Patterns

Hero

A hero is the first major section of a page: headline, supporting copy, primary action, and optional media or links. It is not the site header or footer; it is the lead block for that screen.

Contract

Decorative hero photos use alt="". Every interactive control is a real href or button. Paste into main, then swap media and routes.

Build on a system you can own

HTML-first utilities, a live style guide, and paste-ready components. Standardise your product surface without a framework tax.

Get Started

Utility patterns

Interactive components

Page patterns

Changelog

Build on a system you can own

Dependency-free layout utilities, a canonical style guide, and documented components you can hand to design and engineering unchanged.

Get Started Open style guide
Trusted
4.5 Rating View on Google
Book now
WCKD UI

Build on a system you can own

Contact us FAQs

Markup starters

Ellipsis stands in for your headline, media paths, and real href targets. Decorative hero art keeps alt="".

Split + rail (demo 1)

<section class="hero fill-fade round-xl">
  <div class="background-image">
    <img class="round-xl" src="media/hero.webp" alt="" width="1920" height="1080" />
  </div>
  <div class="overlay relative">
    <div class="columns count-3 gap align-middle pad">
      <div class="column pad-xl span-2">…headline, copy, primary CTA…</div>
      <div class="column"></div>
    </div>
    <div class="fill-fade pad">
      <div class="columns wckd-carousel count-4 gap filled-light rounded">…optional rail…</div>
    </div>
  </div>
</section>

Centered on media (demo 2)

<section class="hero height-50 fill-fade round-xl">
  <div class="background-image">
    <img class="round-xl" src="media/hero.webp" alt="" width="1920" height="1080" />
  </div>
  <div class="overlay aligned-middle aligned-center pad-xl center">
    <div>
      <h2 class="text-7xl white-text">…</h2>
      <p class="text-l width-l align-center white-text">…</p>
      <div class="flex-group gap align-center margin-top-xl">…buttons…</div>
    </div>
  </div>
</section>

Two-column split (demo 3)

<section class="hero columns count-2 height-50 match-height fill-light round-xl">
  <div class="column flex">
    <div class="background-image">…media + bottom bar…</div>
  </div>
  <div class="column flex flex-column padded-l">
    <div class="flex-grow flex aligned-middle aligned-center text-center">…</div>
    <div class="flex space-between width-100">…secondary actions…</div>
  </div>
</section>

Checklist

← All patterns