The picture header, and the default variant: a photo or a video edge to edge under a black overlay, the head centred in white over it. The breadcrumb is not on the picture: it gets its own row under it, in the page's container, 16px above and below.

When to use

A page that opens on a photo: a hotel's rooms, a clinic, a restaurant's menu. On an inner page keep it short (size="sm", 50vh): the content is below it. Not for a text page (clean is lighter), and not as a homepage hero (Heroes).

מגדל המשרדים

שתים עשרה קומות של זכוכית ופלדה, מהשרטוט הראשון ועד מסירת המפתח.

Under a floating navbar

Under a sticky bar (in the flow) the section's own padding centres the text. When the bar floats over the picture, the page wraps the header in [data-navbar-transparent] and the header adds the bar's height on top (padding-top: var(--uk-navbar-h)), so the text centres in the visible part (the barber).

Code

<UkInsideHeader
  imageSrc={hero.src}
  size="sm"
  eyebrow={eyebrow}
  breadcrumb={crumbs}
  breadcrumbHomeLabel="בית"
  breadcrumbHomeHref={ROOT}
  breadcrumbHomeIcon={false}
  containerSize="uk-container-large"
>
  <h1>{title}</h1>
  <div className="uk-spacer-v-16" />
  <p>{description}</p>
</UkInsideHeader>

Props

• imageSrcstring
  The background photo, object-fit: cover, loading="eager" (it is the LCP).
• imageAltstringdefault ""
  Its alt. The photo is a background (aria-hidden), so empty is the norm.
• imagePositionstringdefault center
  Its object-position, e.g. "center 30%" to keep the faces in a photo of people.
• videoSrcstring
  A background video (BgVideo, below) instead of the photo. With both set, the video wins.
• videoControlsbooleandefault true
  The video's play / pause button.
• overlayOpacitynumberdefault 0.65
  The black layer over the picture, drawn only with a photo or a video. With cover it is mixed from --uk-inside-header-cover-bg, not from black.
• size"sm" | "md" | "lg" | "full"default "md"
  Min height: 50vh, 70vh, 90vh, 100svh. At every width, unless sizeMobile is set.
• sizeMobilesame as sizedefault size
  The min height under 768px.
• minHeightstring
  Any CSS length. Overrides both sizes.
• boxedbooleandefault false
  A rounded card inside the page's container instead of edge to edge, 16px under the navbar (--uk-inside-header-boxed-top). It crops less of the people in a photo. Ignored with cover.
• coverbooleandefault false
  Full screen under the navbar (calc(100svh - var(--uk-navbar-h))): on scroll the content sinks and the next section rises over it. The curtain is --uk-inside-header-cover-bg (default #111).
• scrollArrowbooleandefault false
  The "more below" chevrons (UkScrollToMainArrow) at the foot; a click scrolls past the header.

Plus variant, bgColor (with no picture, the band's colour; default var(--uk-inside-header-bg) = var(--foreground)), the breadcrumb props, containerSize, eyebrow, children and className, as in the clean table.

Every head above puts the trail at the same distances, and none of them types a spacer for it: two tokens on :root (--uk-breadcrumb-top, --uk-breadcrumb-after), their classes and the picture header's own row carry the gaps, in the breadcrumb's CSS and the header's. Change a gap there and every demo follows. The trail itself: UkBreadcrumb, on UIKit Components.

• navbar (in the flow) → trail: 10 / 16 (16 / 16 under a bar that draws its bottom border)
  --uk-breadcrumb-top on :root, read by .uk-breadcrumb-top (UkInsideHeader clean, a head you build) and by .uk-section-page-header (PageHeader, plus --uk-topbar-h). Phone: under 768px.
• trail → the head (badge / h1): 32 / 40
  --uk-breadcrumb-after on :root (32 under 768px), read by .uk-breadcrumb-after, an empty div (UkInsideHeader clean, PageHeader, a head you build).
• picture header → trail: 16 / 16
  The trail's own row, [data-uk-inside-header-breadcrumb]: 16px above and below.
• trail row → the first section: 24 / 32
  The row's 16 + the next .uk-section starting at 8 / 16 (phone: under 640px). In front of a pt-0 section, .uk-breadcrumb-spacer-bottom (8 / 16) does it.

Why 10 on a phone: the navbar's own bottom padding reads as part of the gap. A bar that draws its bottom border (UkNavbar bottomBorder) ends at its line, and 10 from a line reads glued, so there the phone takes 16 too: :root:has(nav[uk_navbar].hasBottomBorder:not(.isFloating)), by itself.

Live: the pink bands are the real paddings of the real classes, painted. Resize the window to see the phone values.

A head you build yourself

<header>
  {/* the trail's own row: no uk-section around it */}
  <div className="uk-container uk-breadcrumb-top">   {/* navbar → trail: the token */}
    <UkBreadcrumb items={crumbs} />
    <div className="uk-breadcrumb-after" />          {/* trail → head: 32 / 40, the token */}
    <h1>{title}</h1>
  </div>
</header>

A demo retunes the token in its own scope, never in the arsenal. One does today: the surf demo, .uk-breadcrumb-top { --uk-breadcrumb-top: 8px; } in app/demos/surf_sport_01_06/_styles/waveline.css, 8px at every width.

Rules

• The trail never sits inside a uk-section: its padding (40 / 100) pushes it away from the navbar and the head, and it reads as part of whatever block it landed in. It is a row of the page.
• Count every box between the trail and its neighbour: two paddings meet there without anyone typing a big number (the row's 16 plus a section's top). npm run rhythm flags both directions, CRUMB and CRUMBTOP.
• The rule in full: .claude/skills/vertical-rhythm/SKILL.md, rule 3b (a file in the repo, not a web page).

A moving WebGL background in plain WebGL (no three.js, about 3KB). For a text hero on a light ground that needs life without a photo. Not behind a photo. Its default colours are light (pass colors for a brand ground).

Code

import UkShaderBackdrop from '@/components/uikit/UkShaderBackdrop'

<section className="uk-section relative overflow-hidden">
  <UkShaderBackdrop variant="flow" intensity={0.8} />
  <div className="uk-container relative z-10">…</div>
</section>

Props

• variant"flow" | "dots"default "flow"
  flow: a soft liquid gradient, light in its default colours. dots: a floor of points in perspective rippling toward the horizon, in the lower part of the box.
• colorsstring[] (hex)
  flow takes the background + 3 colours (default #ffffff #cfe0ff #b4f0f7 #dcd6ff), dots the first 2 (default #2563eb #22c3dd).
• intensitynumber, 0..1default 1
  flow only. Lower is paler and hazier, a mist instead of veins.
• classNamestringdefault ""
  On the <canvas>.

A cut-out portrait on a flat block, with HTML cards floating over it. The component owns the mechanism (the box, the picture, card slots placed in % of the picture, a card font size that shrinks with the screen, the slow float); the card's look is the demo's class. For a hero built around one person: a dentist, a guide, a coach.

8 משתתפיםמקסימום בכל סיור

מדריכים מקומייםאתונאים מלידה

מ-2014באתונה

Code

import UkStage, { UkStageCard } from '@/components/uikit/UkStage'

<UkStage src={img.src} alt="…" fetchPriority="high" className="mx-auto max-w-[460px]">
  <UkStageCard at={{ left: '6%', top: '32%' }} delay={-1.5} className="my-stage__card">
    <strong>18 שנות ניסיון</strong>
  </UkStageCard>
</UkStage>

Props: UkStage

• srcstringrequired
  The cut-out picture: one image with alpha (scripts/cutout.cjs).
• altstringrequired
  Its alt text.
• fetchPriority"high" | "low" | "auto"
  "high" in a hero: it is the LCP candidate.
• classNamestringdefault ""
  On the box: size and place it here (mx-auto max-w-[460px]).
• childrenReactNode
  The cards.

Props: UkStageCard

• at{ left, right, top, bottom }required
  Where on the picture, in % of its box. Physical sides: the picture is not mirrored in RTL.
• delaynumberdefault 0
  The float's phase, in seconds. Negative starts mid-cycle, so the cards drift out of sync.
• decorativebooleandefault true
  aria-hidden: a card repeats a fact from the copy. false when it says something new.
• classNamestringdefault ""
  The card's look (background, radius, shadow, padding): the demo's class.
• childrenReactNoderequired
  The card's content.

Tokens: --uk-stage-card-fs (default clamp(0.72rem, 0.55rem + 0.55vw, 0.95rem)), --uk-stage-float-y (-7px), --uk-stage-float-duration (7s). The float stops under prefers-reduced-motion.