Skip to main content

Hero

A full-bleed marketing hero for the top of a landing page. Pair the section with l-ui-bleed to break out of the page gutter, and the body with l-ui-body--glass-header and l-ui-body--flush-top so it sits flush to the viewport top with the background showing through the glass header.

Default hero

A sensible background ships with the gem, so l-ui-hero looks good out of the box with no image markup of your own - the overlay keeps the text legible and the active theme's variant is chosen automatically. Toggle the theme to see the dark variant. The example is shown inside a bordered box for the documentation; on a real page the hero spans the full viewport width and tucks under the glass header.

Build better, run smarter.

Open source enterprise-grade app components, and the AI-assisted platform that builds, deploys, and runs them.

Get started Learn more 
<%# In the layout or view, pin the hero to the top behind the glass header %>
<% l_ui_add_body_class "l-ui-body--glass-header", "l-ui-body--flush-top" %>

<section class="l-ui-hero l-ui-bleed" aria-labelledby="hero-heading">
  <div class="l-ui-hero__inner">
    <h1 id="hero-heading" class="l-ui-hero__title">
      <span class="l-ui-hero__title-accent">Build better,</span> run smarter.
    </h1>

    <p class="l-ui-hero__subtitle">
      Open source enterprise-grade app components, and the AI-assisted
      platform that builds, deploys, and runs them.
    </p>

    <div class="l-ui-hero__actions">
      <a href="#" class="l-ui-button l-ui-button--primary">Get started</a>
      <a href="#" class="l-ui-button l-ui-button--outline">Learn more</a>
    </div>
  </div>
</section>

Without a background

Set --l-ui-hero-image: none (inline for one hero, or in your overrides file for all of them) to drop the background and fall back to the plain page background.

Build better, run smarter.

Open source enterprise-grade app components, and the AI-assisted platform that builds, deploys, and runs them. 

<section class="l-ui-hero l-ui-bleed" style="--l-ui-hero-image: none" aria-labelledby="hero-heading">
  <div class="l-ui-hero__inner">
    <h1 id="hero-heading" class="l-ui-hero__title">
      <span class="l-ui-hero__title-accent">Build better,</span> run smarter.
    </h1>
    <p class="l-ui-hero__subtitle">Your supporting copy here.</p>
  </div>
</section>

Custom background

Re-skin the background by overriding the --l-ui-hero-image token - globally in your overrides file, or inline on a single section to give different heroes different art. For per-page art with proper light/dark <img> loading, add a l-ui-hero__media picture instead; it paints above the token background, and the same overlay keeps the text legible. 

<section class="l-ui-hero l-ui-bleed" aria-labelledby="hero-heading">
  <picture class="l-ui-hero__media l-ui-hero__media--light">
    <img class="l-ui-hero__media-img" src="my_hero_light.webp" alt="" aria-hidden="true">
  </picture>
  <picture class="l-ui-hero__media l-ui-hero__media--dark">
    <img class="l-ui-hero__media-img" src="my_hero_dark.webp" alt="" aria-hidden="true">
  </picture>

  <div class="l-ui-hero__inner">
    <h1 id="hero-heading" class="l-ui-hero__title">
      <span class="l-ui-hero__title-accent">Build better,</span> run smarter.
    </h1>
    <p class="l-ui-hero__subtitle">Your supporting copy here.</p>
  </div>
</section>

CSS classes

Hero CSS classes
Class Description
l-ui-hero Full-bleed hero section (pair with l-ui-bleed)
l-ui-hero__inner Content column, capped at the contained width with the page gutter
l-ui-hero__title Large, tight-tracked hero heading
l-ui-hero__title-accent Gradient-clipped accent span for emphasising part of the title
l-ui-hero__subtitle Supporting subtitle paragraph below the title
l-ui-hero__actions Row of call-to-action buttons or links
l-ui-hero__media Optional decorative background media layer
l-ui-hero__media--light / --dark Theme-specific media; only the active theme's variant is shown
l-ui-hero__media-img The image inside a media layer (covers and right-aligns)

The background is driven by the --l-ui-hero-image custom property (a light and dark default ships with the gem). Override it in your overrides file to re-skin every hero, inline on a single section for one-off art, or set it to none to remove it.