Components / Artwork & collections

Backdrop

One background image shared by separate Groups, such as a CTA and footer. Each Group keeps its own content layout; Backdrop does not position the text.

Basic structure

div.backdrop > div.artwork + section.group + footer.group

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 Background image Image fit Groups sharing the image Show Group boundaries

Choose an image and compare one, two or three Groups. One Artwork element paints the entire Backdrop; the image does not restart at each Group. The image URL is an ordinary img src in the HTML below. Replace it with your own asset—no inline CSS or background-image variable is required.

First Group: an invitation.

Its layout and padding belong to Group and Container. The image behind it belongs to the outer Backdrop.

See the HTML

HTML

<div class="backdrop">
  <div class="artwork" aria-hidden="true"><img src="/assets/images/artwork-placement.svg" alt="" width="800" height="500"></div>
  <section class="group"><div class="container"><article class="card"><div class="content"><h2 class="like-h3">First Group: an invitation.</h2><p>Its layout and padding belong to Group and Container. The image behind it belongs to the outer Backdrop.</p><a class="button is-primary" href="#example-code">See the HTML</a></div></article></div></section>
  <section class="group" hidden><div class="container"><article class="card"><div class="content"><h2 class="like-h3">Another Group, the same background.</h2><p>Adding this section makes the shared image area taller. No second image is added.</p></div></article></div></section>
  <footer class="group"><div class="container"><div class="card is-padded content"><h2 class="like-h4">Final Group: a footer.</h2><p>The same backdrop continues behind this separate semantic region.</p><a href="#options">Backdrop options</a></div></div></footer>
</div>

Options

Class or attribute	What it does
`artwork + img src`	Put an ordinary image inside a direct Artwork child. It fills the Backdrop across all Groups. No inline background-image declaration is needed.
`artwork.is-contained`	Show the entire image; the default is cover.
`groups`	Add or remove semantic sections. One shared image adapts to their combined height.
`transparent sections`	The background is visible where child content does not paint over it. Cards can supply readable foreground surfaces.
`columns.is-centered + fractional columns`	Compact centered CTA options, using normal layout primitives.