Hero with image

A page-opening section: an eyebrow, a headline, a lede and two actions beside a photograph.

Use to introduce a page when the photograph conveys information alongside the headline. Choose the background-image hero when the photograph sets the atmosphere behind the message.

Build with the LoamUI skill

Already added the LoamUI skill? Copy the prompt below. Your agent will check your project and help complete any missing setup before building.

Prompt

Use the LoamUI skill to build the “Hero with image” recipe for my application.

Add your content or describe what you want to change. New to the skill? Add it to your project.

CatalogueSowing from March

Seed saved by growers, for growers.

Hedgerow is a nursery and seed co-op. Every packet is an open-pollinated variety grown on a member plot, dried and packed by hand, and posted the week you order it.

Browse the catalogue Watch how we save seed

Cupped hands holding a bundle of fresh green shoots

TSX

import { useId } from "react";import { Badge, SignpostLink } from "@loamui/core";import "./recipe.css";
export default function Recipe() {  const titleId = useId();  return (    <section className="hero-with-image" aria-labelledby={titleId}>      <div className="copy">        <p className="eyebrow">          <Badge.Root>            <Badge.Text>Catalogue</Badge.Text>          </Badge.Root>          <span>Sowing from March</span>        </p>        <h1 id={titleId}>Seed saved by growers, for growers.</h1>        <p className="lede">          Hedgerow is a nursery and seed co-op. Every packet is an open-pollinated variety grown on          a member plot, dried and packed by hand, and posted the week you order it.        </p>        <div className="actions">          <SignpostLink href="/catalogue">Browse the catalogue</SignpostLink>          <a href="/films/seed-saving">            <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">              <path d="M8 5v14l11-7z" />            </svg>            Watch how we save seed          </a>        </div>      </div>      <img        src="https://picsum.photos/id/785/1200/900"        srcSet="https://picsum.photos/id/785/600/450 600w, https://picsum.photos/id/785/900/675 900w, https://picsum.photos/id/785/1200/900 1200w"        sizes="100vw"        alt="Cupped hands holding a bundle of fresh green shoots"        width="1200"        height="900"        fetchPriority="high"      />    </section>  );}

CSS

@scope (.hero-with-image) to ([class*="loam-"]) {  @layer loamui.components {    :scope {      align-items: center;      container-type: inline-size;      display: block grid;      font-size: var(--loam-text-md);      gap: var(--loam-space-l);      grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));      padding-block: var(--loam-space-l);    }
    /* The copy is the section's body, not its introduction, so it is a box       rather than a <header>. */    .copy {      display: block grid;      gap: var(--loam-space-s);      grid-template-columns: minmax(0, 1fr);      overflow-wrap: anywhere;    }
    h1,    p {      margin-block: 0;    }
    p.eyebrow {      --loam-context: primary;
      align-items: center;      color: var(--loam-color-fg-muted);      display: block flex;      flex-wrap: wrap;      font-size: var(--loam-text-sm);      gap: var(--loam-space-2xs);    }
    h1 {      max-inline-size: 18ch;    }
    p.lede {      color: var(--loam-color-fg-muted);      font-size: var(--loam-text-lg);      max-inline-size: var(--loam-measure);    }
    div.actions {      align-items: center;      display: block flex;      flex-wrap: wrap;      gap: var(--loam-space-xs);
      > a {        align-items: center;        display: inline flex;        gap: var(--loam-space-3xs);
        svg {          block-size: 1em;          flex: none;          inline-size: 1em;        }      }    }
    img {      border-radius: var(--loam-radius-lg);      inline-size: 100%;    }  }}

Use this recipe

Copy Recipe.tsx and recipe.css side by side into a React 19 project. Install @loamui/core and load the core stylesheet at your application root, as shown in the installation guide. The component imports its own stylesheet.

Use the h1 for the page's main heading; choose the appropriate heading level if adapting this into a subsection. Replace the sample photograph, alt text and routes. Keep the badge label brief and put longer seasonal information in the wrapping text beside it. Its dimensions reserve space and fetchPriority="high" suits an above-the-fold hero image: avoid lazy-loading the page's likely largest-contentful-paint image. The sample srcSet offers three renditions; sizes="100vw" is a conservative upper bound because this portable recipe cannot know its host width. Replace it with an accurate sizes hint for your page and use your own image pipeline. Reserve high priority for the page's critical image. This synchronous component can render on the server; useId does not require a client directive.

Uses

Design decisions

How this recipe answers the two pillars, and how it composes the primitives. These notes explain the design. The included tests cover structure and selected interactions; check contrast, keyboard behaviour and assistive technology support in your application.

Modern: A section named by its h1, with a native header and image; element styles supply the heading typography, body leading and link states, and the recipe adds only its layout and editorial roles. An intrinsic auto-fit grid makes two columns when both fit and stacks them otherwise, measuring the contents’ fluid type and spacing, with styles in loamui.components inside a donut scope so element defaults remain the base and selectors stop at LoamUI component boundaries. The eyebrow declares --loam-context: primary, so the Badge inside takes the brand colour without a prop — primary is the brand slot, neutral until a theme fills it, and the eyebrow reads as one by its place above the heading.
Accessible: useId keeps each region tied to its own heading. Both destinations are keyboard-operable links with visible text, the play icon is decorative, and the photograph has descriptive alt text. Content order is unchanged when the grid stacks.
Composition: Badge identifies the catalogue, SignpostLink goes to the catalogue and an ordinary link opens the seed-saving film.