31 CSS Hero Sections17 / 31

Pure CSSMIT licensed

Vertical Type Hero

Japanese traditional vertical typography — headline reads top-to-bottom using writing-mode: vertical-rl. Indigo on washi-paper white, vermillion seal stamp.

Published

Live Demo
Try it

The code

<section class="hs-17" aria-label="Hero">
  <div class="hs-17__bg" aria-hidden="true"></div>
  <aside class="hs-17__seal" aria-hidden="true">
    <span>無</span>
    <span>名</span>
  </aside>
  <div class="hs-17__vertical">
    <h2>静かな<em>道具</em>。</h2>
  </div>
  <div class="hs-17__copy">
    <p class="hs-17__jp">Shizuka na dōgu — quiet tools.</p>
    <p class="hs-17__en">
      Hand-forged carpentry implements. Made by one family in Niigata since 1873.
    </p>
    <a class="hs-17__cta" href="#shop">View the catalogue →</a>
  </div>
</section>
.hs-17 {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  width: 100%;
  min-height: 100vh;
  padding: clamp(28px, 4vw, 56px);
  gap: clamp(28px, 5vw, 64px);
  background: radial-gradient(80% 60% at 50% 0%, rgba(20,40,80,0.06), transparent 70%), #f5ede0;
  font-family: 'Cormorant Garamond', Georgia, serif;
  color: #1a2858;
  box-sizing: border-box;
  overflow: hidden;
}

.hs-17__bg {
  position: absolute;
  right: -60px;
  top: 0;
  bottom: 0;
  width: 280px;
  background: repeating-linear-gradient(0deg, transparent 0 23px, rgba(26,40,88,0.05) 23px 24px);
  pointer-events: none;
}

.hs-17__vertical {
  grid-column: 1;
  grid-row: 1 / 3;
  writing-mode: vertical-rl;
  text-orientation: upright;
  align-self: center;
  display: block;
  height: 100%;
  min-height: 380px;
}

.hs-17 h2 {
  margin: 0;
  font-size: clamp(36px, 4.8vw, 56px);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #1a2858;
  line-height: 1.2;
  white-space: nowrap;
}

.hs-17 h2 em {
  color: #c63828;
  font-style: normal;
  font-weight: 800;
}

.hs-17__copy {
  grid-column: 2;
  grid-row: 1 / 3;
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: relative;
  z-index: 1;
  max-width: 460px;
}

.hs-17__jp {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 18px;
  color: #c63828;
  margin: 0;
  letter-spacing: 0.06em;
}

.hs-17__en {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: #4a5478;
  margin: 0;
}

.hs-17__seal {
  position: absolute;
  top: clamp(20px, 3vw, 32px);
  right: clamp(20px, 3vw, 32px);
  width: 78px;
  height: 78px;
  background: #c63828;
  color: #f5ede0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 22px;
  border: 2px solid #c63828;
  box-shadow: inset 0 0 0 4px #f5ede0, inset 0 0 0 6px #c63828;
  z-index: 2;
}

.hs-17__cta {
  display: inline-block;
  padding: 12px 22px;
  background: #1a2858;
  color: #f5ede0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-decoration: none;
  align-self: flex-start;
  transition: background 0.15s;
}

.hs-17__cta:hover {
  background: #c63828;
}

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

  .hs-17__vertical {
    grid-column: 1;
    grid-row: auto;
    min-height: 200px;
  }

  .hs-17__copy {
    grid-column: 1;
    grid-row: auto;
  }

  .hs-17__seal {
    top: 16px;
    right: 16px;
    width: 60px;
    height: 60px;
    font-size: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hs-17__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: Vertical Type Hero
Source: https://codefronts.com/layouts/css-hero-sections/vertical-type-hero/

Japanese traditional vertical typography — headline reads top-to-bottom using writing-mode: vertical-rl. Indigo on washi-paper white, vermillion seal stamp.
## HTML
```html
<section class="hs-17" aria-label="Hero">
  <div class="hs-17__bg" aria-hidden="true"></div>
  <aside class="hs-17__seal" aria-hidden="true">
    <span>無</span>
    <span>名</span>
  </aside>
  <div class="hs-17__vertical">
    <h2>静かな<em>道具</em>。</h2>
  </div>
  <div class="hs-17__copy">
    <p class="hs-17__jp">Shizuka na dōgu — quiet tools.</p>
    <p class="hs-17__en">
      Hand-forged carpentry implements. Made by one family in Niigata since 1873.
    </p>
    <a class="hs-17__cta" href="#shop">View the catalogue →</a>
  </div>
</section>
```
## CSS
```css
.hs-17 {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  width: 100%;
  min-height: 100vh;
  padding: clamp(28px, 4vw, 56px);
  gap: clamp(28px, 5vw, 64px);
  background: radial-gradient(80% 60% at 50% 0%, rgba(20,40,80,0.06), transparent 70%), #f5ede0;
  font-family: 'Cormorant Garamond', Georgia, serif;
  color: #1a2858;
  box-sizing: border-box;
  overflow: hidden;
}

.hs-17__bg {
  position: absolute;
  right: -60px;
  top: 0;
  bottom: 0;
  width: 280px;
  background: repeating-linear-gradient(0deg, transparent 0 23px, rgba(26,40,88,0.05) 23px 24px);
  pointer-events: none;
}

.hs-17__vertical {
  grid-column: 1;
  grid-row: 1 / 3;
  writing-mode: vertical-rl;
  text-orientation: upright;
  align-self: center;
  display: block;
  height: 100%;
  min-height: 380px;
}

.hs-17 h2 {
  margin: 0;
  font-size: clamp(36px, 4.8vw, 56px);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #1a2858;
  line-height: 1.2;
  white-space: nowrap;
}

.hs-17 h2 em {
  color: #c63828;
  font-style: normal;
  font-weight: 800;
}

.hs-17__copy {
  grid-column: 2;
  grid-row: 1 / 3;
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: relative;
  z-index: 1;
  max-width: 460px;
}

.hs-17__jp {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 18px;
  color: #c63828;
  margin: 0;
  letter-spacing: 0.06em;
}

.hs-17__en {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: #4a5478;
  margin: 0;
}

.hs-17__seal {
  position: absolute;
  top: clamp(20px, 3vw, 32px);
  right: clamp(20px, 3vw, 32px);
  width: 78px;
  height: 78px;
  background: #c63828;
  color: #f5ede0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 22px;
  border: 2px solid #c63828;
  box-shadow: inset 0 0 0 4px #f5ede0, inset 0 0 0 6px #c63828;
  z-index: 2;
}

.hs-17__cta {
  display: inline-block;
  padding: 12px 22px;
  background: #1a2858;
  color: #f5ede0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-decoration: none;
  align-self: flex-start;
  transition: background 0.15s;
}

.hs-17__cta:hover {
  background: #c63828;
}

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

  .hs-17__vertical {
    grid-column: 1;
    grid-row: auto;
    min-height: 200px;
  }

  .hs-17__copy {
    grid-column: 1;
    grid-row: auto;
  }

  .hs-17__seal {
    top: 16px;
    right: 16px;
    width: 60px;
    height: 60px;
    font-size: 18px;
  }
}

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

How this works

This vertical hero uses writing-mode: vertical-rl and text-orientation: upright on .hs-17__vertical to run the headline top-to-bottom in the Japanese traditional column direction. The outer .hs-17 is a two-column CSS Grid — grid-template-columns: auto 1fr — where the vertical headline takes column 1 across both rows and the English copy stack sits in column 2. At max-width: 720px the grid collapses to a single column so the vertical block sits above the prose, keeping the hero readable on mobile where the sideways read would otherwise force a 400px min-height column.

The palette is washi-paper cream #f5ede0 tinted with a subtle indigo radial-gradient wash (rgba(20,40,80,0.06)) at the top, indigo ink #1a2858 for body type, and vermillion #c63828 for the seal stamp and italic emphasis. The .hs-17__bg element paints a repeating linear-gradient of rgba(26,40,88,0.05) horizontal lines every 24px on the right edge — that is the reed-mat texture of a scroll, done in one gradient instead of a background image. The corner .hs-17__seal uses nested box-shadow: inset layers (cream, then vermillion) to fake the double-border of a hanko stamp without SVG.

Typography is Cormorant Garamond serif at font-size: clamp(36px, 4.8vw, 56px) with white-space: nowrap — critical, because the vertical writing-mode still respects wrapping and a two-line vertical headline collapses the layout. Why it converts: forced 90-degree read time roughly doubles headline dwell — but only works for short 3-5 word headlines. The vermillion seal in the corner acts as a signature/authenticity marker, the same trust-anchor role that ratings and press-logos play elsewhere.

Make it yours

  • Recolor to your brand: change washi cream #f5ede0, indigo #1a2858, and vermillion #c63828. For a Scandinavian editorial feel try #f7f4ec / #1e2a1f / #b8501f. Keep the three-color discipline — a fourth color destroys the Japanese-editorial register the hero depends on.
  • Swap Cormorant Garamond for the headline: 'Shippori Mincho' or 'Noto Serif JP' if you keep Japanese glyphs, 'EB Garamond' or 'Playfair Display' for pure Latin. The vertical writing-mode with mincho serifs is the strongest register — sans-serifs look like error messages sideways.
  • Change the CTA shape: the flat rectangle is the intentional editorial choice. To pill-ify (SaaS register) add border-radius: 999px to .hs-17__cta. To ghost-ify (gallery register) replace background: #1a2858 with background: transparent; border: 1px solid #1a2858; color: #1a2858.
  • For dark mode: invert to #1a1410 lacquer background, #f5ede0 cream text, keep vermillion #c63828 as accent — this is the traditional lacquerware palette and reads even more premium than the light version. The .hs-17__bg reed-lines shift to rgba(245,237,224,0.04).
  • For Tailwind: [writing-mode:vertical-rl] [text-orientation:upright] on the vertical container, grid grid-cols-[auto_1fr] gap-8 md:gap-16 on the section. In React/Vue, wrap .hs-17__vertical in a component and pass headline text as a prop — the white-space: nowrap requirement is a footgun for CMS-driven content.

Gotchas — read before shipping

  • The white-space: nowrap on the h2 is load-bearing — if your headline is more than 5-6 CJK characters or ~14 Latin characters, it will overflow the container silently and clip. Test with your longest realistic headline; the CLS impact of a mid-load font swap that changes width can push CLS above the 0.1 Core Web Vitals threshold.
  • The writing-mode: vertical-rl is well-supported (95%+ of traffic) but iOS Safari before 14 had a bug where text-orientation: upright ignored italic style — the 道具 emphasis renders as regular weight on old iPads. If your analytics show meaningful pre-iOS-14 traffic, use font-weight: 800 instead of italic for emphasis.
  • The vermillion seal at ~4.4:1 contrast against washi cream passes WCAG AA for large text (18px+) but fails AAA. The seal characters at 22px are borderline — if you shrink the seal below 60px width the type drops under 18px and fails AA. Either keep the seal ≥ 78px or deepen the vermillion to #a82817.
  • Framework quirk: React Server Components render writing-mode fine, but CSS-in-JS libraries (styled-components, emotion) sometimes strip the vertical-rl value during SSR minification because their PostCSS pipeline treats it as unknown. Verify hydration by inspecting the initial HTML payload, not just the hydrated DOM.
  • The .hs-17__seal uses four box-shadow: inset layers to fake the hanko double-border. Painting nested insets is cheap but ANY animation on this element (hover-scale, entrance) forces a full repaint of the shadow stack each frame — never animate the seal. Keep motion on the CTA only.
  • WCAG 2.4.6 (Headings and Labels) — screen readers announce writing-mode: vertical-rl content in visual order, which for a vertical Japanese headline reads correctly (top-to-bottom = first-to-last character). But if you mix Latin and CJK in the same vertical block, the Latin runs sideways and screen readers still announce it letter-by-letter. Keep vertical blocks single-script.

Techniques used in this demo

radial-gradient()MDN ↗grid-templateMDN ↗clamp()MDN ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →