Feature grid

Three or four claims side by side, each one a card under a rule. It is the page's own grid, fixed at three columns, with no icons: the words carry the point.

Basic

<section data-features>
  <article><h3>No build step</h3><p>Two files, a stylesheet and a script. Copy them in and write HTML.</p></article>
  <article><h3>Plain elements</h3><p>A table is a table. Variants are data attributes, never classes.</p></article>
  <article><h3>One configuration</h3><p>Palette, type, pattern and theme all sit on the html element.</p></article>
</section>

Add data-features="4" for four columns. Both drop to two under 900px and to one under 560px.

Notes

• The columns come from --s72-cols, the same custom property data-grid uses, so --s72-gap changes the spacing here too.
• Every card stretches to the height of the tallest, so the rules across the top line up.
• The top rule is the soft tone. Set --s72-soft on the section to change it for that block alone.
• An <h3> and a <p> are the whole card. Anything more belongs in a data-grid of cards.