Hero section

How to use it

Use once, at the top of a landing or product page, to say what the product does and offer the main next step. Do not stack several heroes on one page; use the CTA banner for later prompts. The heading is an <h2> so it sits safely in this gallery: change it to <h1> when it is the page's main heading, and point both links at the real sign-up and tour pages.

Accessibility

A <section> labelled by its heading, with the two actions as ordinary links because they navigate to other pages; the illustration is inline SVG with aria-hidden="true", so it adds nothing to the reading order. Both links show a 2px blue focus-visible outline and are large enough to tap. The headline #0f172a on #f8fafc is 17.06:1, the subtext #334155 on #f8fafc 9.90:1, the eyebrow #1e3a8a on #dbeafe 8.49:1, the primary link's white on #1d4ed8 (#1e40af hovered) 6.70:1 (8.72:1), and the secondary link #1d4ed8 on white (#eff6ff hovered) 6.70:1 (6.16:1).

Source (copy-ready)

Copy code

<section class="dcl-hero" aria-labelledby="dcl-hero-title">
  <div class="dcl-hero__copy">
    <p class="dcl-hero__eyebrow">New: offline mode</p>
    <h2 id="dcl-hero-title" class="dcl-hero__title">Plan your team's week on one shared board</h2>
    <p class="dcl-hero__text">See who is working on what, move tasks between days with the keyboard or a drag, and keep everyone in step without another status meeting.</p>
    <div class="dcl-hero__actions">
      <a href="../index.html" class="dcl-hero__primary">Start a free trial</a>
      <a href="../about.html" class="dcl-hero__secondary">See how it works</a>
    </div>
  </div>
  <svg class="dcl-hero__art" viewBox="0 0 240 180" aria-hidden="true" focusable="false"><rect x="8" y="8" width="224" height="164" rx="12" fill="#ffffff" stroke="#cbd5e1" stroke-width="2"/><rect x="24" y="28" width="56" height="10" rx="5" fill="#94a3b8"/><rect x="24" y="52" width="56" height="32" rx="6" fill="#bfdbfe"/><rect x="24" y="92" width="56" height="32" rx="6" fill="#dbeafe"/><rect x="92" y="28" width="56" height="10" rx="5" fill="#94a3b8"/><rect x="92" y="52" width="56" height="48" rx="6" fill="#bbf7d0"/><rect x="160" y="28" width="56" height="10" rx="5" fill="#94a3b8"/><rect x="160" y="52" width="56" height="32" rx="6" fill="#fde68a"/><rect x="160" y="92" width="56" height="32" rx="6" fill="#bfdbfe"/><rect x="160" y="132" width="56" height="24" rx="6" fill="#dbeafe"/></svg>
</section>
<style>
.dcl-hero { display: flex; flex-wrap: wrap; align-items: center; gap: 2rem; padding: 2.5rem 1.5rem; border-radius: 0.75rem; font: inherit; color: #0f172a; background-color: #f8fafc; }
.dcl-hero__copy { flex: 1 1 18rem; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
.dcl-hero__eyebrow { margin: 0; padding: 0.2rem 0.65rem; border-radius: 999px; font-size: 0.85rem; font-weight: 600; color: #1e3a8a; background-color: #dbeafe; }
.dcl-hero__title { margin: 0; font-size: clamp(1.75rem, 5vw, 2.75rem); line-height: 1.15; color: #0f172a; background-color: #f8fafc; }
.dcl-hero__text { margin: 0; max-width: 36rem; font-size: 1.125rem; line-height: 1.55; color: #334155; background-color: #f8fafc; }
.dcl-hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.dcl-hero__primary { display: inline-block; padding: 0.7rem 1.25rem; border: 2px solid #1d4ed8; border-radius: 6px; font-weight: 600; text-decoration: none; color: #ffffff; background-color: #1d4ed8; }
.dcl-hero__primary:hover { color: #ffffff; background-color: #1e40af; }
.dcl-hero__primary:focus-visible { outline: 2px solid #1d4ed8; outline-offset: 2px; }
.dcl-hero__secondary { display: inline-block; padding: 0.7rem 1.25rem; border: 2px solid #1d4ed8; border-radius: 6px; font-weight: 600; text-decoration: none; color: #1d4ed8; background-color: #ffffff; }
.dcl-hero__secondary:hover { color: #1d4ed8; background-color: #eff6ff; }
.dcl-hero__secondary:focus-visible { outline: 2px solid #1d4ed8; outline-offset: 2px; }
.dcl-hero__art { flex: 1 1 14rem; width: 100%; max-width: 20rem; height: auto; }
</style>