Hero

Full-width banner primitive with three optional slots — .hero-head, .hero-body, .hero-foot — height modifiers, and the same .is-* colour combinations as Button and Card. Plain .hero stays colour-neutral so it composes with the page baseline.

Live

Default: colour-neutral, body fills the container

Page heading

Supporting copy.

<div class="hero" style="border: 1px dashed var(--kc-doc-border);">
<div class="hero-body" style="background: var(--kc-doc-callout-bg); padding: 0.75rem; border-radius: 4px;">
  <h1 class="title">Page heading</h1>
  <p class="subtitle">Supporting copy.</p>
</div>
</div>
@use '@adnap/krysalicss' with (
  $feature-list: ('base-reset', 'base-global', 'layout-hero')
);
Playground

.is-primary: themed colour band

Launching today

Themed band uses the shared --kc-primary-* tokens.

<div class="hero is-primary">
<div class="hero-body">
  <h1 class="title">Launching today</h1>
  <p class="subtitle">Themed band uses the shared <code>--kc-primary-*</code> tokens.</p>
</div>
</div>
@use '@adnap/krysalicss' with (
  $feature-list: ('base-reset', 'base-global', 'layout-hero')
);
Playground

.is-small: compact hero-body padding

Compact band

<div class="hero is-small is-primary">
<div class="hero-body">
  <h1 class="title">Compact band</h1>
</div>
</div>
@use '@adnap/krysalicss' with (
  $feature-list: ('base-reset', 'base-global', 'layout-hero')
);
Playground

.is-medium: tall hero-body padding

Tall band

<div class="hero is-medium is-warning">
<div class="hero-body">
  <h1 class="title">Tall band</h1>
</div>
</div>
@use '@adnap/krysalicss' with (
  $feature-list: ('base-reset', 'base-global', 'layout-hero')
);
Playground

.is-fullheight-with-navbar: 100vh minus the configured navbar height

Fills the viewport, less the navbar

min-height: calc(100vh - 3.25rem). Tune via $navbar-height.

<div class="hero is-fullheight-with-navbar is-danger" style="min-height: 12rem;">
<div class="hero-body">
  <h1 class="title">Fills the viewport, less the navbar</h1>
  <p>min-height: calc(100vh - 3.25rem). Tune via <code>$navbar-height</code>.</p>
</div>
</div>
@use '@adnap/krysalicss' with (
  $feature-list: ('base-reset', 'base-global', 'layout-hero')
);
Playground

Three slots: head + body + foot, head/foot fixed-size, body grows

head

Body

Flex-grow: 1 — fills the remaining height.

foot
<div class="hero is-halfheight is-success" style="min-height: 18rem;">
<div class="hero-head" style="padding: 0.75rem 1rem; border-bottom: 1px solid color-mix(in srgb, currentColor 20%, transparent);">head</div>
<div class="hero-body">
  <h1 class="title">Body</h1>
  <p>Flex-grow: 1 — fills the remaining height.</p>
</div>
<div class="hero-foot" style="padding: 0.75rem 1rem; border-top: 1px solid color-mix(in srgb, currentColor 20%, transparent);">foot</div>
</div>
@use '@adnap/krysalicss' with (
  $feature-list: ('base-reset', 'base-global', 'layout-hero')
);
Playground

Markup

markup
<!-- Default: colour-neutral band, body fills available height. -->
<section class="hero">
  <div class="hero-body">
    <h1 class="title">Page heading</h1>
    <p class="subtitle">Supporting copy that introduces the page.</p>
  </div>
</section>

<!-- Themed band via the shared .is-* combinations. -->
<section class="hero is-primary">
  <div class="hero-body">
    <h1 class="title">Launching today</h1>
  </div>
</section>

<!-- Size scale: rescales hero-body padding. -->
<section class="hero is-small">…</section>
<section class="hero is-medium">…</section>
<section class="hero is-large">…</section>

<!-- Height modifiers compose with size + colour. -->
<section class="hero is-halfheight is-primary">…</section>
<section class="hero is-fullheight is-primary">…</section>
<section class="hero is-fullheight-with-navbar is-primary">…</section>

<!-- Three-slot composition with head + foot. -->
<section class="hero is-fullheight is-primary">
  <div class="hero-head">
    <nav class="navbar">…</nav>
  </div>
  <div class="hero-body">
    <h1 class="title">Centred body</h1>
  </div>
  <div class="hero-foot">
    <nav class="tabs">…</nav>
  </div>
</section>

Variables

VariableDefaultNotes
$selector'.hero'Container.
$head-selector'.hero-head'Top slot. flex-shrink: 0.
$body-selector'.hero-body'Middle slot. flex-grow: 1, vertically centres its children.
$foot-selector'.hero-foot'Bottom slot. flex-shrink: 0.
$body-padding-block3remTop + bottom padding on the body (default size).
$body-padding-inline$global-gap (1rem)Side padding on the body (default size).
$body-padding-by-size(small: (1.5rem, $global-gap), medium: (9rem, 4.5rem), large: (18rem, 6rem))Map of .is-<size> → (block, inline) padding tuples applied to the body. Drop a key to skip emitting that size.
$halfheight-modifier'halfheight'Final selector .hero.is-halfheight → min-height: 50vh. Set to null to drop.
$fullheight-modifier'fullheight'Final selector .hero.is-fullheight → min-height: 100vh. Set to null to drop.
$fullheight-with-navbar-modifier'fullheight-with-navbar'Final selector .hero.is-fullheight-with-navbar → min-height: calc(100vh - $navbar-height). Set to null to drop.
$navbar-height3.25remSubtracted from 100vh by the is-fullheight-with-navbar rule. Match your navbar's resolved height.

Tokens consumed

.hero.is-<label> reads the shared theme tokens (--kc-default-bg/fg, --kc-primary-bg/fg, --kc-warning-bg/fg, --kc-danger-bg/fg, --kc-success-bg/fg) — same set as Button and Card, so swapping a theme re-skins all three in lockstep. Plain .hero (no modifier) reads no tokens and inherits the page surface.

When to use

Reach for .hero when a page needs a banner section that owns its own vertical rhythm — landing pages, section intros, marketing bands. For content-bounded layout (cards, grids, forms), prefer Container + Grid.

Override example

app.scss
@use '@adnap/krysalicss/layout/hero' with (
  $selector: '.banner',
  $body-padding-block: 5rem,
  $fullheight-modifier: null,  // drop the 100vh rule
  $navbar-height: 4rem,        // match a taller navbar
  $body-padding-by-size: (     // ship a leaner size scale
    small: (1rem, 1rem),
    large: (12rem, 4rem),
  ),
);