Components / Surfaces & media

Feature

A compact benefit with a small visual. Uses normal heading and paragraph typography.

Basic structure

article.feature > figure.figure + div.content

Try it Center

A small visual and a useful point.

The feature is compact; its typography still uses the shared scale.

HTML

<article class="feature"><figure class="figure is-rounded"><img src="/assets/images/pattern-example.svg" width="800" height="500" alt="Sun above mountains"></figure><div class="content"><h3 class="like-h4">A small visual and a useful point.</h3><p>The feature is compact; its typography still uses the shared scale.</p></div></article>

Options

Class or attribute	What it does
`text-center`	Center the words and small figure.
`like-h4`	Use on the heading when a smaller title is appropriate.