Hero - Smart layout / CSS Day 2025

Source (Nunjucks)

<div class="smart-layout debug-label">
  <div class="smart-layout-item">
    <article class="smart-card" data-container="true" data-type="quote">
      <img class="placeholder" alt="Quote image"/>
      <hgroup>
        <h2 class="text-step-1">First item in HTML (Quotes 1)</h2>
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</p>
      </hgroup>
    </article>
    <article class="smart-card" data-container="true" data-type="quote">
      <img class="placeholder" alt="Quote image"/>
      <hgroup>
        <h2 class="text-step-1">First item in HTML (Quotes 2)</h2>
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</p>
      </hgroup>
    </article>
    <article class="smart-card" data-container="true" data-type="quote">
      <img class="placeholder" alt="Quote image"/>
      <hgroup>
        <h2 class="text-step-1">First item in HTML (Quotes 3)</h2>
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</p>
      </hgroup>
    </article>
    <article class="smart-card" data-container="true" data-type="quote">
      <img class="placeholder" alt="Quote image"/>
      <hgroup>
        <h2 class="text-step-1">First item in HTML (Quotes 4)</h2>
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</p>
      </hgroup>
    </article>
  </div>
  <div class="smart-layout-item">
    <article class="smart-card" data-container="true" data-type="featured">
      <img class="placeholder" alt="Featured image"/>
      <hgroup>
        <h2 class="text-step-1">Second item in HTML (Featured)</h2>
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Veritatis, impedit, officia, cumque
          porro fugiat at quis nemo cum adipisci est dignissimos? Necessitatibus sed hic reiciendis magni est tempore repudiandae
          quod.</p>
          <button class="bevel">Find out more</button>
      </hgroup>
    </article>
  </div>
  <div class="smart-layout-item">
    <article class="smart-card" data-container="true" data-type="misc">
      <img class="placeholder" alt="Misc image"/>
      <hgroup>
        <h2 class="text-step-1">Third item in HTML (Misc)</h2>
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Veritatis, impedit, officia, cumque
          porro fugiat at quis nemo cum adipisci est dignissimos? Necessitatibus sed hic reiciendis magni est tempore repudiandae
          quod.</p>
      </hgroup>
    </article>
  </div>
</div>