Components / Artwork & collections

Exhibit & Artwork

Artwork/content layout applied to a Group or Card—not a Card subtype. Artwork fills the host bounds, while Container or content measure limits the words.

Basic structure

section.group.exhibit > div.artwork + div.container > div.content

The pieces have different jobs

Group defines a section’s bounds and vertical spacing. Container limits content width inside it.
Card supplies an enclosed surface and optional regions.
Exhibit is the artwork/content layout you add to a Group or Card. It is not a Card subtype. Artwork sits beside the content region and fills the host’s bounds.
Backdrop paints one background behind multiple Groups. Each Group still owns its content layout.

A meaningful Figure can sit inside the content’s Columns. Decorative Artwork is a separate layer; it does not have to stop at the text Container.

Try it Apply Exhibit to Immersive Reservation Height Placement Text alignment Content layout Reverse columns ScrimArt below Show Group / content bounds Artwork image fitFade art edgeForeground layer

exhibit is-immersive places content over artwork. With no position class, its fallback is bottom-left, leaving room for art above. Choose any of the nine positions; the generated HTML names it explicitly. Placement moves the content box, while text alignment controls words inside it. An Inset reserves its side of the scene so the main text does not collide with the quotation.

Artwork is a direct child of Group, beside Container. It reaches the Group edges; Container limits only the content. Gold marks the Group bounds; blue marks the inner content region.

Give the artwork room.

The artwork fills the Group. Container bounds the words, not the art.

80%: Supporting text stays readable in the scene.

HTML

<section class="group exhibit is-dark is-immersive is-center has-scrim">
  <div class="artwork is-layered" id="example-art" aria-hidden="true"><img src="/assets/images/artwork-placement.svg" alt="" width="800" height="500"><img class="art-foreground" src="/assets/images/artist-foreground.svg" width="800" height="500" alt="" hidden></div>
  <div class="container"><div class="content measure-sm text-center" data-exhibit-main><h2>Give the artwork room.</h2><p class="lede">The artwork fills the Group. Container bounds the words, not the art.</p><dl class="stats"><div><dt>80%</dt><dd>Supporting text stays readable in the scene.</dd></div></dl><button class="button" type="button" data-scene="example-art" hidden>Preview camera pass</button></div></div>
</section>

Options

Class or attribute	What it does
`reserve-1 … reserve-10`	Ten increasing content reservations over the original range; changes space, not image zoom.
`group exhibit`	Section-wide artwork is a direct child of Group, beside Container. It is not constrained to the text width.
`card exhibit`	The same layout on an enclosed surface. Card owns the surface; Exhibit owns artwork/content placement.
`is-dark`	Opt into light ink and controls over a dark scene; Exhibit alone does not change text color.
`is-art-bottom`	Reserve the space below instead of above.
`is-immersive`	Full-surface art with content over it.
`default placement`	Bottom-left leaves room for artwork above. This is an Exhibit default, not Card behavior. Add a position class to choose deliberately.
`has-height-small / has-height-medium / has-height-large`	Responsive minimum heights; long content still expands naturally.
`content alignment / columns`	Normal text alignment and Columns also work in non-immersive mode.
`is-top-left/center/right`	Immersive top placement.
`is-center-left / is-center / is-center-right`	Immersive middle placement.
`is-bottom-left/center/right`	Immersive bottom placement.
`has-scrim`	Contrast layer in immersive mode.
`has-inset`	Measured rounded artwork cutaway around an Inset.
`artwork.is-faded / artwork.is-layered`	Edge fade or coordinated background/foreground layers.
`--art-fade-color`	Optional per-Exhibit fade destination; defaults to the Exhibit surface. Set on a named section for another color.
`artwork.is-contained`	Show the whole decorative image instead of cover-cropping it.
`data-scene`	Optional button targets layered artwork for the camera-pass demonstration.