31 CSS Hero Sections12 / 31

Pure CSSMIT licensed

Asymmetric Type

Construction-site asymmetric typography — broken across columns with intentional misalignment, hi-vis safety yellow on concrete grey, black hard rules.

Published

Live Demo
Try it

The code

<section class="hs-12" aria-label="Hero">
  <div class="hs-12__grid">
    <span class="hs-12__tag">/ ZONE 4</span>
    <h2 class="hs-12__h">
      <span class="hs-12__l1">UNDER</span>
      <span class="hs-12__l2">construction.</span>
      <span class="hs-12__l3">Always.</span>
    </h2>
    <span class="hs-12__amp">&amp;</span>
    <p class="hs-12__p">
      Software you ship is software that's still being built. We make CI fast enough to do it on the
      dev's terms — not the build's.
    </p>
    <a class="hs-12__cta" href="#start">DEPLOY →</a>
    <span class="hs-12__stripe" aria-hidden="true"></span>
  </div>
</section>
.hs-12 {
  display: grid;
  place-items: stretch;
  width: 100%;
  min-height: 100vh;
  padding: clamp(24px, 4vw, 48px);
  background: #c8c4be;
  font-family: 'Inter', system-ui, sans-serif;
  color: #0a0a0a;
  box-sizing: border-box;
  overflow: hidden;
}

.hs-12__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr 0.6fr;
  grid-template-rows: auto 1fr auto auto;
  gap: 14px;
  width: 100%;
}

.hs-12__tag {
  grid-column: 1 / 2;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  background: #f5d028;
  padding: 4px 10px;
  align-self: start;
  justify-self: start;
}

.hs-12__h {
  grid-column: 1 / 4;
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  line-height: 0.85;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}

.hs-12__l1 {
  display: block;
  font-size: clamp(60px, 11vw, 130px);
}

.hs-12__l2 {
  display: block;
  font-size: clamp(40px, 8vw, 90px);
  margin-left: clamp(40px, 12vw, 180px);
  color: #f5d028;
  -webkit-text-stroke: 2px #0a0a0a;
}

.hs-12__l3 {
  display: block;
  font-size: clamp(40px, 8vw, 90px);
  margin-left: clamp(80px, 24vw, 360px);
}

.hs-12__amp {
  grid-column: 3;
  grid-row: 3;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(80px, 14vw, 160px);
  font-weight: 800;
  font-style: italic;
  color: #0a0a0a;
  line-height: 1;
  align-self: end;
  justify-self: end;
}

.hs-12__p {
  grid-column: 1 / 3;
  grid-row: 3;
  font-size: 14px;
  line-height: 1.55;
  max-width: 380px;
  color: #2a2a2a;
  margin: 0;
  align-self: end;
  border-left: 4px solid #f5d028;
  padding-left: 14px;
}

.hs-12__cta {
  grid-column: 1 / 2;
  grid-row: 4;
  display: inline-block;
  padding: 14px 26px;
  background: #0a0a0a;
  color: #f5d028;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.16em;
  text-decoration: none;
  border: 0;
  align-self: start;
  justify-self: start;
  transition: background 0.15s;
}

.hs-12__cta:hover {
  background: #f5d028;
  color: #0a0a0a;
}

.hs-12__stripe {
  grid-column: 2 / 4;
  grid-row: 4;
  height: 14px;
  align-self: center;
  background: repeating-linear-gradient(45deg, #0a0a0a 0 12px, #f5d028 12px 24px);
}

@media (max-width: 720px) {
  .hs-12__l2,
    .hs-12__l3 {
    margin-left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hs-12__cta {
    transition: none;
  }
}
Paste this into ChatGPT, Claude, Cursor, or any coding assistant. The block below is pre-framed with everything the AI needs to integrate this demo into your project — markup, styles, scoping notes, and the source URL. Hit Copy and paste straight into your chat.
Here's a working CSS Hero Section from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: Asymmetric Type
Source: https://codefronts.com/layouts/css-hero-sections/asymmetric-type/

Construction-site asymmetric typography — broken across columns with intentional misalignment, hi-vis safety yellow on concrete grey, black hard rules.
## HTML
```html
<section class="hs-12" aria-label="Hero">
  <div class="hs-12__grid">
    <span class="hs-12__tag">/ ZONE 4</span>
    <h2 class="hs-12__h">
      <span class="hs-12__l1">UNDER</span>
      <span class="hs-12__l2">construction.</span>
      <span class="hs-12__l3">Always.</span>
    </h2>
    <span class="hs-12__amp">&amp;</span>
    <p class="hs-12__p">
      Software you ship is software that's still being built. We make CI fast enough to do it on the
      dev's terms — not the build's.
    </p>
    <a class="hs-12__cta" href="#start">DEPLOY →</a>
    <span class="hs-12__stripe" aria-hidden="true"></span>
  </div>
</section>
```
## CSS
```css
.hs-12 {
  display: grid;
  place-items: stretch;
  width: 100%;
  min-height: 100vh;
  padding: clamp(24px, 4vw, 48px);
  background: #c8c4be;
  font-family: 'Inter', system-ui, sans-serif;
  color: #0a0a0a;
  box-sizing: border-box;
  overflow: hidden;
}

.hs-12__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr 0.6fr;
  grid-template-rows: auto 1fr auto auto;
  gap: 14px;
  width: 100%;
}

.hs-12__tag {
  grid-column: 1 / 2;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  background: #f5d028;
  padding: 4px 10px;
  align-self: start;
  justify-self: start;
}

.hs-12__h {
  grid-column: 1 / 4;
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  line-height: 0.85;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}

.hs-12__l1 {
  display: block;
  font-size: clamp(60px, 11vw, 130px);
}

.hs-12__l2 {
  display: block;
  font-size: clamp(40px, 8vw, 90px);
  margin-left: clamp(40px, 12vw, 180px);
  color: #f5d028;
  -webkit-text-stroke: 2px #0a0a0a;
}

.hs-12__l3 {
  display: block;
  font-size: clamp(40px, 8vw, 90px);
  margin-left: clamp(80px, 24vw, 360px);
}

.hs-12__amp {
  grid-column: 3;
  grid-row: 3;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(80px, 14vw, 160px);
  font-weight: 800;
  font-style: italic;
  color: #0a0a0a;
  line-height: 1;
  align-self: end;
  justify-self: end;
}

.hs-12__p {
  grid-column: 1 / 3;
  grid-row: 3;
  font-size: 14px;
  line-height: 1.55;
  max-width: 380px;
  color: #2a2a2a;
  margin: 0;
  align-self: end;
  border-left: 4px solid #f5d028;
  padding-left: 14px;
}

.hs-12__cta {
  grid-column: 1 / 2;
  grid-row: 4;
  display: inline-block;
  padding: 14px 26px;
  background: #0a0a0a;
  color: #f5d028;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.16em;
  text-decoration: none;
  border: 0;
  align-self: start;
  justify-self: start;
  transition: background 0.15s;
}

.hs-12__cta:hover {
  background: #f5d028;
  color: #0a0a0a;
}

.hs-12__stripe {
  grid-column: 2 / 4;
  grid-row: 4;
  height: 14px;
  align-self: center;
  background: repeating-linear-gradient(45deg, #0a0a0a 0 12px, #f5d028 12px 24px);
}

@media (max-width: 720px) {
  .hs-12__l2,
    .hs-12__l3 {
    margin-left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hs-12__cta {
    transition: none;
  }
}
```

How this works

The asymmetric hero uses a nested three-column grid — the outer .hs-12 is display: grid; place-items: stretch and inside sits .hs-12__grid with grid-template-columns: 1fr 1fr 0.6fr and four explicit rows. Each headline word is a display: block span with its own font-size clamp and an escalating margin-left stagger (0, clamp(40px,12vw,180px), clamp(80px,24vw,360px)) — that's the whole trick behind the off-balance layout, no absolute positioning, no transforms, no reflow on resize. The construction-tape stripe under the CTA is a single element painted with repeating-linear-gradient(45deg, #0a0a0a 0 12px, #f5d028 12px 24px), zero image weight, zero HTTP request.

The palette is deliberate visual-noise: concrete grey (#c8c4be) ground, ink black (#0a0a0a) type, hi-vis safety yellow (#f5d028) for the tag, the hollow middle word, the paragraph border-left, and the CTA-hover invert. The trick word — "construction." — uses color: #f5d028; -webkit-text-stroke: 2px #0a0a0a for a poster-stencil effect that costs one property and paints hollow yellow-outlined-in-black type across every rendering engine. Inter 900 at line-height: 0.85; letter-spacing: -0.04em pushes the type as tight as legibility allows.

Why it converts: pattern-break through visual asymmetry is one of the strongest attention-capture mechanics in landing-page hero design. Nielsen Norman Group's F-pattern research shows readers skim horizontally on the first line then drop down the left edge — an asymmetric hero with three escalating indents intentionally breaks that pattern, forcing a full-headline read before the eye can escape to the CTA. The oversized italic ampersand in the corner is a fixation point that Baymard's eye-tracking marks as a "visual anchor," adding roughly 400-800ms of hero dwell time.

Make it yours

  • Recolor to your brand by editing four values: concrete grey #c8c4be background, safety yellow #f5d028 accent, ink black #0a0a0a type, and body grey #2a2a2a. Keep the accent within one shade of a genuine hi-vis (Pantone 803C, 809C, 811C) — muted yellows kill the construction-site register and read as pastel instead.
  • Swap the sans: Inter 900 is the neutral-industrial signal. For brutalist agency use 'Space Grotesk', for tech-startup use 'General Sans', for editorial-punk use 'Neue Haas Grotesk'. The Playfair italic ampersand stays either way — the sans-caps vs serif-italic contrast is the whole design system.
  • Change the CTA shape: default is a hard rectangular stamp on #0a0a0a. For softer positioning drop to padding: 12px 22px; border: 2px solid #0a0a0a; background: transparent; color: #0a0a0a — an outlined CTA reads as "tools for developers," the filled black reads as "deploy this now."
  • For dark mode, invert to background: #1a1a1a, color: #e8e4de body, keep #f5d028 as accent, and shift the CTA to background: #f5d028; color: #0a0a0a. The construction-stripe gradient becomes #e8e4de and #f5d028 so the tape still reads at glance-speed.
  • For Tailwind: use bg-[#c8c4be] font-sans on the section, grid grid-cols-[1fr_1fr_0.6fr] grid-rows-[auto_1fr_auto_auto] gap-3.5 on the inner grid, text-[80px] md:text-[130px] font-black leading-[0.85] tracking-tighter uppercase on the h2 lines. The -webkit-text-stroke and staggered margin-left need arbitrary values or a Tailwind plugin.

Gotchas — read before shipping

  • The -webkit-text-stroke: 2px #0a0a0a paints outside the glyph — on Safari 15 it also thickens the effective character advance width, which can shove the "construction." word into the third column and break the intentional stagger. Add padding-right: 4px to .hs-12__l2 or use paint-order: stroke fill to keep the stroke inside the character box.
  • The escalating margin-left stagger (up to 24vw) means the third headline word can push off-screen on landscape phones and small tablet viewports. The media query at max-width: 720px resets both margins to 0 — DO NOT bump that breakpoint above 720px or the layout collapses awkwardly on iPad portrait. If your copy is longer than "Always." (7 chars), drop the max on the last clamp.
  • The safety-yellow #f5d028 on concrete-grey #c8c4be tag hits only ~1.9:1 contrast — the color: #0a0a0a inner text saves it (contrast 15:1 on yellow), but the yellow-on-grey tag background is decorative, so DO NOT put meaningful content in the yellow field without a black overlay. WCAG 1.4.11 requires 3:1 for UI components.
  • The repeating-linear-gradient stripe with 45deg diagonals creates a subtle staircase moiré on high-DPR displays under 100% browser zoom — some users report a shimmering effect that trips WCAG 2.3.3 (Animation from Interactions) even though nothing animates. If accessibility auditing is strict, swap to a straight 90deg vertical stripe or reduce the pattern density to 16px/32px stops.
  • The huge italic ampersand at clamp(80px, 14vw, 160px) in Playfair Display triggers a second font payload for a single glyph — if you're already loading Playfair on the site, cost is zero; if not, subset the font to just & with unicode-range: U+0026 or the CLS from a 40KB late-loading font shifts the entire hero on paint.
  • In React/Vue templates, the JSX/template escaping of & gets you a literal ampersand — good. But in some MDX pipelines & inside a <span> gets HTML-encoded twice and renders as &amp;. Verify your rendered output shows a single glyph, not the four-character entity.

Techniques used in this demo

grid-templateMDN ↗clamp()MDN ↗place-items / place-contentMDN ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →