31 CSS Hero Sections02 / 31

Pure CSSMIT licensed

Split with Mockup

Two-column hero with copy left, an SVG-painted dashboard mockup right. Rust red and ochre on deep brown — the heritage industrial / workshop aesthetic.

Published

Live Demo
Try it

The code

<section class="hs-02" aria-label="Hero">
  <div class="hs-02__copy">
    <span class="hs-02__eye">EST. 2024</span>
    <h2>Inventory that <em>actually adds up.</em></h2>
    <p>Stock, batches, suppliers — one ledger, no spreadsheets, no Sundays at the laptop.</p>
    <a class="hs-02__cta" href="#start">Get started →</a>
  </div>
  <div class="hs-02__mock" aria-hidden="true">
    <div class="hs-02__window">
      <header><span></span><span></span><span></span></header>
      <div class="hs-02__bars">
        <span style="height: 32%"></span>
        <span style="height: 64%"></span>
        <span style="height: 48%"></span>
        <span style="height: 88%"></span>
        <span style="height: 56%"></span>
        <span style="height: 72%"></span>
      </div>
      <div class="hs-02__line">
        <svg viewBox="0 0 200 60" preserveAspectRatio="none">
          <path
            d="M0,40 Q40,20 80,30 T160,15 T200,20"
            stroke="#d97742"
            stroke-width="2.5"
            fill="none"
          />
        </svg>
      </div>
    </div>
  </div>
</section>
.hs-02 {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  width: 100%;
  min-height: 100vh;
  padding: clamp(28px, 5vw, 56px) clamp(20px, 5vw, 56px);
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
  background: #2c1f15;
  font-family: 'Inter', system-ui, sans-serif;
  color: #f5e6d3;
  box-sizing: border-box;
}

.hs-02__eye {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: #d97742;
  padding: 4px 10px;
  border: 1px solid #d97742;
  margin-bottom: 18px;
}

.hs-02 h2 {
  margin: 0 0 16px;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(32px, 5vw, 52px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: #fff8ed;
}

.hs-02 h2 em {
  color: #d97742;
  font-style: italic;
  font-weight: 700;
}

.hs-02 p {
  margin: 0 0 26px;
  font-size: 15.5px;
  line-height: 1.6;
  color: #c9b5a0;
  max-width: 460px;
}

.hs-02__cta {
  display: inline-block;
  padding: 12px 22px;
  background: #d97742;
  color: #2c1f15;
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
  border: 0;
  border-radius: 0;
  box-shadow: 4px 4px 0 #8a4520;
  transition: transform 0.15s, box-shadow 0.15s;
}

.hs-02__cta:hover {
  transform: translate(2px,2px);
  box-shadow: 2px 2px 0 #8a4520;
}

.hs-02__mock {
  background: #1a120a;
  border: 2px solid #6b4427;
  border-radius: 4px;
  padding: 12px;
  box-shadow: 8px 8px 0 #d97742;
}

.hs-02__window header {
  display: flex;
  gap: 6px;
  padding-bottom: 12px;
  border-bottom: 1px dashed #6b4427;
}

.hs-02__window header span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #6b4427;
}

.hs-02__window header span:nth-child(1) {
  background: #d97742;
}

.hs-02__window header span:nth-child(2) {
  background: #b8943f;
}

.hs-02__bars {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  height: 120px;
  align-items: end;
  margin: 14px 0;
}

.hs-02__bars span {
  background: linear-gradient(180deg, #d97742, #b85a2c);
  border-radius: 2px 2px 0 0;
}

.hs-02__bars span:nth-child(2n) {
  background: linear-gradient(180deg, #b8943f, #8a6c1f);
}

.hs-02__line {
  height: 60px;
}

.hs-02__line svg {
  width: 100%;
  height: 100%;
}

@media (max-width: 720px) {
  .hs-02 {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hs-02__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: Split with Mockup
Source: https://codefronts.com/layouts/css-hero-sections/split-with-mockup/

Two-column hero with copy left, an SVG-painted dashboard mockup right. Rust red and ochre on deep brown — the heritage industrial / workshop aesthetic.
## HTML
```html
<section class="hs-02" aria-label="Hero">
  <div class="hs-02__copy">
    <span class="hs-02__eye">EST. 2024</span>
    <h2>Inventory that <em>actually adds up.</em></h2>
    <p>Stock, batches, suppliers — one ledger, no spreadsheets, no Sundays at the laptop.</p>
    <a class="hs-02__cta" href="#start">Get started →</a>
  </div>
  <div class="hs-02__mock" aria-hidden="true">
    <div class="hs-02__window">
      <header><span></span><span></span><span></span></header>
      <div class="hs-02__bars">
        <span style="height: 32%"></span>
        <span style="height: 64%"></span>
        <span style="height: 48%"></span>
        <span style="height: 88%"></span>
        <span style="height: 56%"></span>
        <span style="height: 72%"></span>
      </div>
      <div class="hs-02__line">
        <svg viewBox="0 0 200 60" preserveAspectRatio="none">
          <path
            d="M0,40 Q40,20 80,30 T160,15 T200,20"
            stroke="#d97742"
            stroke-width="2.5"
            fill="none"
          />
        </svg>
      </div>
    </div>
  </div>
</section>
```
## CSS
```css
.hs-02 {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  width: 100%;
  min-height: 100vh;
  padding: clamp(28px, 5vw, 56px) clamp(20px, 5vw, 56px);
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
  background: #2c1f15;
  font-family: 'Inter', system-ui, sans-serif;
  color: #f5e6d3;
  box-sizing: border-box;
}

.hs-02__eye {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: #d97742;
  padding: 4px 10px;
  border: 1px solid #d97742;
  margin-bottom: 18px;
}

.hs-02 h2 {
  margin: 0 0 16px;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(32px, 5vw, 52px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: #fff8ed;
}

.hs-02 h2 em {
  color: #d97742;
  font-style: italic;
  font-weight: 700;
}

.hs-02 p {
  margin: 0 0 26px;
  font-size: 15.5px;
  line-height: 1.6;
  color: #c9b5a0;
  max-width: 460px;
}

.hs-02__cta {
  display: inline-block;
  padding: 12px 22px;
  background: #d97742;
  color: #2c1f15;
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
  border: 0;
  border-radius: 0;
  box-shadow: 4px 4px 0 #8a4520;
  transition: transform 0.15s, box-shadow 0.15s;
}

.hs-02__cta:hover {
  transform: translate(2px,2px);
  box-shadow: 2px 2px 0 #8a4520;
}

.hs-02__mock {
  background: #1a120a;
  border: 2px solid #6b4427;
  border-radius: 4px;
  padding: 12px;
  box-shadow: 8px 8px 0 #d97742;
}

.hs-02__window header {
  display: flex;
  gap: 6px;
  padding-bottom: 12px;
  border-bottom: 1px dashed #6b4427;
}

.hs-02__window header span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #6b4427;
}

.hs-02__window header span:nth-child(1) {
  background: #d97742;
}

.hs-02__window header span:nth-child(2) {
  background: #b8943f;
}

.hs-02__bars {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  height: 120px;
  align-items: end;
  margin: 14px 0;
}

.hs-02__bars span {
  background: linear-gradient(180deg, #d97742, #b85a2c);
  border-radius: 2px 2px 0 0;
}

.hs-02__bars span:nth-child(2n) {
  background: linear-gradient(180deg, #b8943f, #8a6c1f);
}

.hs-02__line {
  height: 60px;
}

.hs-02__line svg {
  width: 100%;
  height: 100%;
}

@media (max-width: 720px) {
  .hs-02 {
    grid-template-columns: 1fr;
  }
}

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

How this works

The hero is a two-column CSS Grid — grid-template-columns: 1.05fr 1fr gives the copy column a hair more room than the mockup, the ratio that Baymard's landing-page research validates for text-first B2B SaaS heroes with a mockup. At max-width: 720px the grid collapses to a single column so mobile stacks copy above the dashboard mockup without extra JS. The align-items: center vertically centers both columns against the min-height: 100vh stage, so this responsive hero section holds its shape whether the copy is three lines or six.

The palette is pure heritage industrial workshop: deep espresso brown (#2c1f15) as the canvas, rust orange (#d97742) as the primary accent, ochre gold (#b8943f) as the second data color, and warm cream (#f5e6d3) for body text. Playfair Display at font-weight: 800 gives the h2 a chunky editorial slab feel — this isn't quiet-luxury serif, it's workshop signage. Inter carries the body copy where legibility matters more than character. The dashboard mockup on the right recolors the traffic-light window chrome into brand tones (rust, ochre, brown-grey) — a small detail that keeps the mockup feeling designed, not screenshotted.

Why it converts: the SVG dashboard mockup is a proof artifact. B2B SaaS visitors — CRM, PM tools, inventory — need to see the product before they trust the copy, and a hand-painted mockup outperforms a real screenshot on landing-page hero conversion because it stays crisp at every viewport and never leaks stale UI. The brutalist CTA (box-shadow: 4px 4px 0 #8a4520) that shifts on hover to translate(2px,2px) and 2px 2px 0 shadow is a tactile press-in effect that reads as "physical button" — the same weight cue that Stripe and Linear use to make CTAs feel clickable at a glance.

Make it yours

  • Recolor to your brand by editing five values: canvas #2c1f15, rust accent #d97742, ochre secondary #b8943f, cream text #f5e6d3, and the button shadow #8a4520. Keep the shadow 20-25% darker than the button fill so the brutalist stamp effect stays legible.
  • Swap the serif: Playfair Display at 800 is heritage industrial. For a Stripe-style startup hero use 'Inter' at font-weight: 900. For editorial B2B → 'Fraunces'. For enterprise SaaS → 'Source Serif Pro'. Keep Inter on body — the serif/sans contrast is the whole trick.
  • Change the CTA shape: border-radius: 0 plus the offset shadow is peak brutalist hero. Bump to border-radius: 4px for softened industrial. For a SaaS hero section pill (Vercel, Linear) drop the offset shadow and use border-radius: 999px with a subtle 0 8px 20px rgba(0,0,0,0.2) lift.
  • For dark mode inversion, the palette is already dark. To invert to light: canvas #f5e6d3, text #2c1f15, keep rust #d97742 as accent, and shift the mockup fill from #1a120a to #fff8ed with the same #6b4427 border. The offset shadow stays.
  • For Tailwind: grid grid-cols-[1.05fr_1fr] gap-16 bg-[#2c1f15] text-[#f5e6d3] on the section, font-serif font-extrabold text-5xl tracking-tight leading-[1.05] text-[#fff8ed] on the h2, bg-[#d97742] text-[#2c1f15] shadow-[4px_4px_0_#8a4520] hover:translate-x-0.5 hover:translate-y-0.5 on the CTA.

Gotchas — read before shipping

  • The SVG bar chart uses inline style="height: 32%" attributes — quick to author but they don't animate cleanly. If you want the bars to grow on scroll, move the heights to CSS custom properties (--h: 32%) and animate height via transform: scaleY() with transform-origin: bottom so you stay on the compositor and keep INP under 200ms.
  • The mockup's box-shadow: 8px 8px 0 #d97742 creates a rust offset frame — visually striking, but on narrow phones under 380px the shadow can push the mockup past the viewport and trigger horizontal scroll (a CLS-adjacent layout bug). Wrap the section in overflow-x: clip or reduce the offset to 4px 4px 0 at mobile breakpoints.
  • The rust CTA (#d97742) on the deep brown background (#2c1f15) with dark text (#2c1f15) hits a contrast ratio of ~7.2:1 — passes WCAG AAA. But if you swap the CTA text to white to "brighten" it, contrast drops to 3.1:1 which fails AA. Keep dark text on rust; the color inversion is the point.
  • Playfair Display's font-weight: 800 requires the full font family — if you're using @import from Google Fonts, request wght@800 explicitly or the browser synthesizes a fake bold which looks smeared at large sizes. For the italic emphasis <em> you also need the ital,wght@1,700 axis.
  • In React or Vue, don't put the SVG line-chart path directly in the template — the browser re-parses it on every re-render. Extract it to a separate <LineChart /> component and memoize (React.memo or Vue's defineComponent with shallowRef) so it renders once and stays static.
  • The dashed border under the window header (border-bottom: 1px dashed #6b4427) can appear as a solid line on Windows Chrome at certain DPI ratios due to a Chromium rendering quirk. If pixel-perfect matters for a developer hero variant, switch to border-image with a repeating SVG dash or use two thin <hr> elements with gap.

Techniques used in this demo

grid-templateMDN ↗clamp()MDN ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →