Sami Vuori Design system Back to site →

Reflection

The band that closes a case study (Figma 132:1456): a big title, then blocks of heading and text in the reading column, like the rest of the article.

<Reflection id="reflection">
  <div><h3>What took the most time</h3><p>…</p></div>
  <div><h3>What went wrong, and how I fixed it</h3><p>…</p></div>
</Reflection>
PropTypeDefaultDescription
id string — Chapter anchor, e.g. "reflection".
title string 'Reflection' Band title.
Token Base≥ 390≥ 1024≥ 1440 Note
--type-figure-size 56px64px80px100px key figures: number
--type-h2-size 24px28px32px36px h2 and big list numbers (Figma Heading/Label: 36)
--article-column 1 / -12 / span 43 / span 3 reading column