Components / Artwork & collections

Selector

Selecting a disclosure changes both its open explanation and the paired Figure. Manual, with no autoplay.

Basic structure

div.selector.columns[data-selector] > div.column.selector-media + div.column.content > div.accordion

Try it Image on the right Figure width

Works for brands like yours

Software and services

Make an invisible service easier to understand. The selected explanation and its illustration stay together.

Founders and entrepreneurs

Give a personal brand a recognizable visual voice. Selecting this item opens its explanation and changes the illustration.

Physical products

Show the experience behind a product, rather than only the object. Each item owns its own words and Figure.

HTML

<div class="selector columns is-vcentered" data-selector>
  <div class="column selector-media" hidden></div>
  <div class="column content">
    <h2>Works for brands like yours</h2>
    <div class="accordion">
      <details open>
        <summary>Software and services</summary>
        <div class="accordion-body content"><p>Make an invisible service easier to understand. The selected explanation and its illustration stay together.</p>
          <figure class="figure is-rounded is-4by3"><img src="/assets/images/pattern-example.svg" alt="Software and services — illustrative image" width="800" height="500"></figure>
        </div>
      </details><details >
        <summary>Founders and entrepreneurs</summary>
        <div class="accordion-body content"><p>Give a personal brand a recognizable visual voice. Selecting this item opens its explanation and changes the illustration.</p>
          <figure class="figure is-rounded is-4by3"><img src="/assets/images/artist-detail.svg" alt="Founders and entrepreneurs — illustrative image" width="800" height="500"></figure>
        </div>
      </details><details >
        <summary>Physical products</summary>
        <div class="accordion-body content"><p>Show the experience behind a product, rather than only the object. Each item owns its own words and Figure.</p>
          <figure class="figure is-rounded is-4by3"><img src="/assets/images/composition-placeholder.svg" alt="Physical products — illustrative image" width="800" height="500"></figure>
        </div>
      </details>
    </div>
  </div>
</div>

Options

Class or attribute	What it does
`is-reversed`	Media on the right, using the same Columns convention.
`is-vcentered`	Vertically center the text and media; used by the example.
`figure modifiers`	Each disclosure owns a Figure; existing rounding, ratio, shadow and overlap treatments carry across.
`native details`	Put the original Figure in each accordion-body. No-JS keeps each explanation paired with its image.
`optional js`	One open item, image decoding/crossfade, native keyboard activation and reduced motion.