Banner with image
A fruit-plant offer with a photograph beside the deadline, heading and one clear destination.
Use for one offer or announcement when the photograph deserves its own space beside the copy. Choose the background-image banner when the image is decorative.
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.
Use the LoamUI skill to build the “Banner 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.
OfferUntil 30 November · bare-root season
Members save 20% on fruit plants
Apples, pears, plums and soft fruit on local rootstocks, lifted the week they are posted. Order before the end of November and the discount comes off at the basket.
import { useId } from "react";import { Badge, SignpostLink } from "@loamui/core";import "./recipe.css"; export default function Recipe() { const titleId = useId(); return ( <section className="banner-with-image" aria-labelledby={titleId}> <img src="https://picsum.photos/id/429/800/600" srcSet="https://picsum.photos/id/429/400/300 400w, https://picsum.photos/id/429/800/600 800w, https://picsum.photos/id/429/1600/1200 1600w" sizes="auto, 100vw" alt="A cup of freshly picked raspberries" width="1600" height="1200" loading="lazy" /> <div className="copy"> <p className="eyebrow"> <Badge.Root> <Badge.Text>Offer</Badge.Text> </Badge.Root> <span>Until 30 November · bare-root season</span> </p> <h2 id={titleId}>Members save 20% on fruit plants</h2> <p className="description"> Apples, pears, plums and soft fruit on local rootstocks, lifted the week they are posted. Order before the end of November and the discount comes off at the basket. </p> <div className="actions"> <SignpostLink href="/catalogue/fruit">See the fruit list</SignpostLink> </div> </div> </section> );}
@scope (.banner-with-image) to ([class*="loam-"]) { @layer loamui.components { :scope { background: var(--loam-color-surface); border: 1px solid var(--loam-color-line); border-radius: var(--loam-radius-xl); container: banner-with-image / inline-size; display: block grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); } img { inline-size: 100%; object-fit: cover; } /* The copy is the section's body, not its introduction, so it is a box rather than a <header>. */ .copy { align-content: center; display: block grid; font-size: var(--loam-text-md); gap: var(--loam-space-xs); grid-template-columns: minmax(0, 1fr); overflow-wrap: anywhere; padding: var(--loam-space-l); } h2, 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); } h2 { max-inline-size: 22ch; } p.description { color: var(--loam-color-fg-muted); max-inline-size: var(--loam-measure); } div.actions { display: block flex; flex-wrap: wrap; gap: var(--loam-space-xs); } @container banner-with-image (inline-size < 44rem) { img, .copy { grid-column: 1 / -1; } img { aspect-ratio: 16 / 9; block-size: auto; border-start-end-radius: var(--loam-radius-xl); border-start-start-radius: var(--loam-radius-xl); } } @container banner-with-image (inline-size >= 44rem) { img { aspect-ratio: auto; block-size: 100%; border-end-start-radius: var(--loam-radius-xl); border-start-start-radius: var(--loam-radius-xl); min-block-size: 0; } } }}
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.
Replace the sample offer, closing date, photograph and destination with your own; use the heading level appropriate to the surrounding page. Keep Badge labels short and put longer details in the adjacent wrapping text. Both banners demonstrate a promotion below the initial viewport: loading="lazy" and sizes="auto, 100vw" let the browser choose a rendition from the rendered image width, with a conservative viewport fallback. For a banner visible on first load, remove lazy loading and auto from sizes; set a layout-appropriate size hint and use high fetch priority only if this is the page’s critical image. Supply appropriately cropped renditions through your own image pipeline. useId only connects each section to its heading; this synchronous component needs no 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 h2, with the photograph as an img carrying real alt text, because a picture of the fruit on offer is content rather than decoration. Its stylesheet lives in loamui.components inside a donut scope and measures the section’s own inner grid against the header’s fluid token spacing and type: one column with the picture on top, then a 2:3 split at 44rem of its own width, where the picture grows to the height of the words and is cropped rather than letterboxed. The eyebrow declares --loam-context: primary, so the offer Badge inherits the brand context without a styling prop; a promotion does not imply a warning, and the adjacent text spells out the closing date.
- Accessible
- useId names each repeated region by its own h2. The photograph has descriptive alt text and reserved space before loading. Enlarged text can grow the layout; rounded image corners do not clip focus rings. The date is written out, the destination is a native link, and the border survives forced colours.
- Composition
- No Card: a Card pads every side and the picture runs to the edge, so the section paints its own surface and line from the same tokens; Badge and SignpostLink are dropped in as they come.