Cards

A card groups content about one topic. Use cards for sets of similar items such as articles or services. Prefer a plain list when users know what they are looking for or need to compare details.

<article class="card">
  <div class="card-body">
    <p class="card-subtitle">Home energy</p>
    <h2 class="card-title h4">
      <a href="/advice/">Find ways to save energy</a>
    </h2>
    <p class="card-text">Get practical recommendations based on your home.</p>
  </div>
</article>

Use a heading level that fits the page structure; the visual .h4 class does not determine the document outline. Keep the link on the title rather than wrapping the whole card. This preserves clear link text and leaves room for additional actions if the content model later requires them.

The MVP intentionally has no article, category, arrow or borderless modifiers. Add a modifier only when repeated content requirements demonstrate that it represents a stable pattern.