Image System · v0.8.3.8.4

Image Presentation Library

Thirty approved image treatments using Monarch default image roles, CSS-first masks, PHP helpers, accessibility expectations, and page-composition standards.

Composition GuidesSection Architecture

Default image roles

2.33:1

Hero

Primary page headers and homepage hero moments.

hero

3.2:1

Banner

Wide promotional bands, CTAs, story bridges, and section separators.

banner

16:9

Landscape

Articles, split content, galleries, feature panels, and editorial sections.

landscape

16:9

Background

Decorative panels, subtle backgrounds, low-emphasis atmosphere, and soft visual support.

background

4:3

Card

Feature cards, product cards, resource cards, article previews, and content summaries.

card

1:1

Square

Gallery tiles, portfolio tiles, category tiles, route cards, and icon-like media.

square

2:3

Portrait

Profiles, About story sections, team/leadership sections, contact sidebars, testimonials, and editorial rhythm.

portrait

1:1

Avatar

Team members, testimonials, profiles, account placeholders, and small identity moments.

avatar

3:1

Logo Light

Logo placeholder for light surfaces and brand/identity demonstrations.

logo-light

3:1

Logo Dark

Logo placeholder for dark or high-contrast surfaces and brand/identity demonstrations.

logo-dark

4:3

Image Not Found

Reliable fallback when an expected image role or file is missing.

image-not-found

First-Round Image Masks

Image mask examples

These masks are presentation classes applied by the image helper. They do not create alternate image files and they do not change the source image context.

Maskrounded

Rounded

Token-based rounded rectangle.

Rounded

.img-mask-rounded

Maskcircle

Circle

Circular mask for avatars and profile images.

Circle

.img-mask-circle

Maskpill

Pill

Fully rounded pill treatment for wide media.

Pill

.img-mask-pill

Maskdiamond

Diamond

Rotated square crop for accent tiles.

Diamond

.img-mask-diamond

Maskhex

Hexagon

Six-sided presentation for portfolio or feature tiles.

Hexagon

.img-mask-hex

Maskfade-bottom

Fade Bottom

Soft bottom fade for hero and background treatments.

Fade Bottom

.img-mask-fade-bottom

Maskfade-top

Fade Top

Soft top fade for hero, editorial, and transition treatments.

Fade Top

.img-mask-fade-top

Maskfade-left

Fade Left

Soft left-side fade for split-content and media panels.

Fade Left

.img-mask-fade-left

Maskfade-right

Fade Right

Soft right-side fade for split-content and media panels.

Fade Right

.img-mask-fade-right

30 approved presentations

Each presentation card lists its role, mode, mask, ratio, and helper usage so the image treatment is visible and repeatable.

01hero

Hero Image

Primary page hero image with a wide crop and full-bleed feeling.

Hero Image
  • Context: monarch
  • Mode: color
  • Mask: fade-bottom
  • Ratio: 2.33:1
PHP helper
<?= monarch_image_frame('hero', 'monarch', 'Hero Image', 'image-role--hero', ['mode' => 'color', 'mask' => 'fade-bottom']) ?>
03landscape

Landscape Image

Standard editorial landscape image for articles and split sections.

Landscape Image
  • Context: monarch
  • Mode: color
  • Mask: rounded
  • Ratio: 16:9
PHP helper
<?= monarch_image_frame('landscape', 'monarch', 'Landscape Image', 'image-role--landscape', ['mode' => 'color', 'mask' => 'rounded']) ?>
04card

Card Image

Card-ready image crop for summaries, services, products, and features.

Card Image
  • Context: monarch
  • Mode: color
  • Mask: rounded
  • Ratio: 4:3
PHP helper
<?= monarch_image_frame('card', 'monarch', 'Card Image', 'image-role--card', ['mode' => 'color', 'mask' => 'rounded']) ?>
05square

Square Image

Balanced square tile for galleries and portfolio grids.

Square Image
  • Context: monarch
  • Mode: color
  • Mask: none
  • Ratio: 1:1
PHP helper
<?= monarch_image_frame('square', 'monarch', 'Square Image', 'image-role--square', ['mode' => 'color', 'mask' => 'none']) ?>
06portrait

Portrait Image

Vertical image treatment for profiles and editorial cards.

Portrait Image
  • Context: monarch
  • Mode: color
  • Mask: rounded
  • Ratio: 2:3
PHP helper
<?= monarch_image_frame('portrait', 'monarch', 'Portrait Image', 'image-role--portrait', ['mode' => 'color', 'mask' => 'rounded']) ?>
07avatar

Avatar Image

Circular avatar for people, testimonials, and account placeholders.

Avatar Image
  • Context: monarch
  • Mode: color
  • Mask: circle
  • Ratio: 1:1
PHP helper
<?= monarch_image_frame('avatar', 'monarch', 'Avatar Image', 'image-role--avatar', ['mode' => 'color', 'mask' => 'circle']) ?>
08background

Background Image

Decorative background image used inside a controlled frame.

Background Image
  • Context: monarch
  • Mode: color
  • Mask: fade-bottom
  • Ratio: 16:9
PHP helper
<?= monarch_image_frame('background', 'monarch', 'Background Image', 'image-role--background', ['mode' => 'color', 'mask' => 'fade-bottom']) ?>
09logo-light

Logo Light

Logo placeholder designed for light surfaces.

Logo Light
  • Context: monarch
  • Mode: color
  • Mask: none
  • Ratio: 3:1
PHP helper
<?= monarch_image_frame('logo-light', 'monarch', 'Logo Light', 'image-role--logo-light image-fit--contain', ['mode' => 'color', 'mask' => 'none']) ?>
10logo-dark

Logo Dark

Logo placeholder designed for dark or high-contrast contexts.

Logo Dark
  • Context: monarch
  • Mode: color
  • Mask: none
  • Ratio: 3:1
PHP helper
<?= monarch_image_frame('logo-dark', 'monarch', 'Logo Dark', 'image-role--logo-dark image-fit--contain', ['mode' => 'color', 'mask' => 'none']) ?>
11unknown-role

Image Not Found

Fallback demonstration for a missing or unknown image role.

Image Not Found
  • Context: monarch
  • Mode: color
  • Mask: none
  • Ratio: 4:3
PHP helper
<?= monarch_image_frame('unknown-role', 'monarch', 'Image Not Found', 'image-role--image-not-found', ['mode' => 'color', 'mask' => 'none']) ?>
12landscape

Figure with Caption

Semantic figure/caption pairing for editorial content.

Figure with Caption
Semantic caption example using Monarch figure standards.
  • Context: monarch
  • Mode: color
  • Mask: rounded
  • Ratio: 16:9
PHP helper
<?= monarch_image_frame('landscape', 'monarch', 'Figure with Caption', 'image-role--landscape', ['mode' => 'color', 'mask' => 'rounded']) ?>
13card

Image Card

Image presentation inside a content card layout.

Image Card
  • Context: monarch
  • Mode: color
  • Mask: rounded
  • Ratio: 4:3
PHP helper
<?= monarch_image_frame('card', 'monarch', 'Image Card', 'image-role--card', ['mode' => 'color', 'mask' => 'rounded']) ?>
14square

Image with Label

Image paired with a Monarch label for category context.

Image with Label
  • Context: monarch
  • Mode: color
  • Mask: diamond
  • Ratio: 1:1
PHP helper
<?= monarch_image_frame('square', 'monarch', 'Image with Label', 'image-role--square', ['mode' => 'color', 'mask' => 'diamond']) ?>
15card

Image with Badge

Image paired with badge metadata and summary text.

Image with Badge
  • Context: monarch
  • Mode: color
  • Mask: hex
  • Ratio: 4:3
PHP helper
<?= monarch_image_frame('card', 'monarch', 'Image with Badge', 'image-role--card', ['mode' => 'color', 'mask' => 'hex']) ?>
16hero

Overlay Text

Image with readable overlay text for campaign or landing pages.

Overlay Text

Image Pattern

Overlay Text

  • Context: monarch
  • Mode: color
  • Mask: fade-top
  • Ratio: 2.33:1
PHP helper
<?= monarch_image_frame('hero', 'monarch', 'Overlay Text', 'image-role--hero', ['mode' => 'color', 'mask' => 'fade-top']) ?>
17banner

Gradient Overlay

Wide image with gradient overlay for strong foreground contrast.

Gradient Overlay

Image Pattern

Gradient Overlay

  • Context: monarch
  • Mode: color
  • Mask: fade-left
  • Ratio: 3.2:1
PHP helper
<?= monarch_image_frame('banner', 'monarch', 'Gradient Overlay', 'image-role--banner', ['mode' => 'color', 'mask' => 'fade-left']) ?>
18landscape

Image with CTA Button

Image, text, and action button composed as one section.

Image with CTA Button

Image Pattern

Image with CTA Button

Call to Action

  • Context: monarch
  • Mode: color
  • Mask: rounded
  • Ratio: 16:9
PHP helper
<?= monarch_image_frame('landscape', 'monarch', 'Image with CTA Button', 'image-role--landscape', ['mode' => 'color', 'mask' => 'rounded']) ?>
19landscape

Split Content Image

Image intended for side-by-side content sections.

Split Content Image
  • Context: monarch
  • Mode: color
  • Mask: rounded
  • Ratio: 16:9
PHP helper
<?= monarch_image_frame('landscape', 'monarch', 'Split Content Image', 'image-role--landscape', ['mode' => 'color', 'mask' => 'rounded']) ?>
21square

Portfolio Tile

Portfolio tile with branded border treatment.

Portfolio Tile
  • Context: monarch
  • Mode: grayscale
  • Mask: diamond
  • Ratio: 1:1
PHP helper
<?= monarch_image_frame('square', 'monarch', 'Portfolio Tile', 'image-role--square image-border--accent', ['mode' => 'grayscale', 'mask' => 'diamond']) ?>
22hero

Article Featured Image

Editorial featured image for article headers.

Article Featured Image
  • Context: monarch
  • Mode: grayscale
  • Mask: fade-right
  • Ratio: 2.33:1
PHP helper
<?= monarch_image_frame('hero', 'monarch', 'Article Featured Image', 'image-role--hero', ['mode' => 'grayscale', 'mask' => 'fade-right']) ?>
23card

Product Listing Image

Product-card image with contain fit to avoid important crop loss.

Product Listing Image
  • Context: monarch
  • Mode: color
  • Mask: rounded
  • Ratio: 4:3
PHP helper
<?= monarch_image_frame('card', 'monarch', 'Product Listing Image', 'image-role--card image-fit--contain', ['mode' => 'color', 'mask' => 'rounded']) ?>
24landscape

Product Detail Image

Larger product-detail visual with stronger elevation.

Product Detail Image
  • Context: monarch
  • Mode: color
  • Mask: rounded
  • Ratio: 16:9
PHP helper
<?= monarch_image_frame('landscape', 'monarch', 'Product Detail Image', 'image-role--landscape image-shadow--strong', ['mode' => 'color', 'mask' => 'rounded']) ?>
25portrait

Team Profile Image

Team profile image with a soft radius treatment.

Team Profile Image
  • Context: monarch
  • Mode: grayscale
  • Mask: rounded
  • Ratio: 2:3
PHP helper
<?= monarch_image_frame('portrait', 'monarch', 'Team Profile Image', 'image-role--portrait image-shape--soft', ['mode' => 'grayscale', 'mask' => 'rounded']) ?>
26avatar

Testimonial Avatar

Small trust-building profile image for quote/testimonial layouts.

Testimonial Avatar
  • Context: monarch
  • Mode: grayscale
  • Mask: circle
  • Ratio: 1:1
PHP helper
<?= monarch_image_frame('avatar', 'monarch', 'Testimonial Avatar', 'image-role--avatar', ['mode' => 'grayscale', 'mask' => 'circle']) ?>
27image-not-found

Empty State Illustration

Neutral empty-state image for no results or future content.

Empty State Illustration
  • Context: monarch
  • Mode: grayscale
  • Mask: none
  • Ratio: 4:3
PHP helper
<?= monarch_image_frame('image-not-found', 'monarch', 'Empty State Illustration', 'image-role--image-not-found image-muted', ['mode' => 'grayscale', 'mask' => 'none']) ?>
28landscape

Documentation Screenshot Placeholder

Monarch documentation placeholder for screenshots and examples.

Documentation Screenshot Placeholder
  • Context: monarch
  • Mode: grayscale
  • Mask: rounded
  • Ratio: 16:9
PHP helper
<?= monarch_image_frame('landscape', 'monarch', 'Documentation Screenshot Placeholder', 'image-role--landscape', ['mode' => 'grayscale', 'mask' => 'rounded']) ?>
29banner

Responsive Container Preview

Image frame used to review responsive container behavior.

Responsive Container Preview
  • Context: monarch
  • Mode: color
  • Mask: pill
  • Ratio: 3.2:1
PHP helper
<?= monarch_image_frame('banner', 'monarch', 'Responsive Container Preview', 'image-role--banner image-border--primary', ['mode' => 'color', 'mask' => 'pill']) ?>
30missing-file

Fallback Image Demonstration

Forced missing-role example proving fallback behavior.

Fallback Image Demonstration
  • Context: monarch
  • Mode: grayscale
  • Mask: none
  • Ratio: 4:3
PHP helper
<?= monarch_image_frame('missing-file', 'monarch', 'Fallback Image Demonstration', 'image-role--image-not-found', ['mode' => 'grayscale', 'mask' => 'none']) ?>

Default images are not the final content.

They are reliable placeholders that keep page composition, components, patterns, and templates working while a real client image set is prepared.