` (or `

` with `headingLevel={2}`). Required. | ## Native attributes Also accepts the attributes in React's `HTMLAttributes` (`id`, `aria-*`, event handlers), passed to the rendered element, except those named on this page. ## Don't use These are not props. Passing one fails the type check with the fix in the error, and in development a console message names the fix. - `action`: Not a prop. The buttons are `actions`: `Start} />`. - `heading`: Not a prop. The headline is `title`: ``. - `image`: Not a prop. The picture is `picture`: ``. - `overline`: Not a prop. The line above the title is `eyebrow`: ``. - `subtitle`: Not a prop. The lede is `description`: ``. ## Types ### `HeroPicture` The hero's picture. It never shows wider than its intrinsic `width`. ```ts interface HeroPicture { /** The fallback `` file. */ src: string; /** * The intrinsic pixel width of the wide file. The picture is never shown wider than this. */ width: number; /** The intrinsic pixel height, which sets the picture's aspect ratio and stops layout shift. */ height: number; /** What the picture shows. Required unless `decorative` is set. */ alt?: string; /** Hides the picture from assistive technology, with `alt=""`. */ decorative?: boolean; /** `` elements, in order: for example phone formats with a `media` query, then wide formats. */ sources?: HeroPictureSource[]; /** The ``'s `srcset`. */ srcSet?: string; /** The ``'s `sizes`. */ sizes?: string; /** Loads the picture early with `fetchPriority="high"`. Otherwise it loads lazily. In `{ light, dark }`, see `HeroPictures` for how each twin loads. */ priority?: boolean; /** * A wide aspect ratio, such as `"8 / 3"`, applied on wider screens in the stage and column * layouts. Without it the picture keeps its own ratio, as it does on a phone and in the split * layout, so a wide crop never cuts the subject in the split layout's narrower column. */ crop?: string; /** * The focal point kept in view when the picture is cropped, as an `object-position`, such as * `"50% 80%"` for a subject near the bottom. Set it on each picture: the dark one takes the * light one's unless it has its own. * * @default "50% 42%" */ focus?: string; /** * A colour painted in the picture's box while the image loads, such as the art's main colour, * in place of an empty hole. It fills the box the `width` and `height` already reserve, so it * moves nothing, and an opaque image covers it once it decodes. Give the dark picture its own, * as it never takes the light one's: a day colour would flash at night. Hero has the file's * address but not its pixels, so take the colour from your image pipeline, for example the * `dominant` colour of `sharp(file).stats()`, or pick it by eye. Leave it out for art with * transparency, which would show it through. */ placeholder?: string; } ``` ### `HeroPictures` The hero's art in light and dark mode: the same scene by day and at night. Hero shows `light` or `dark` in CSS, with your app's Tailwind `dark` variant, the one every Ouro component's dark styles follow, so the right one is there from the first paint. That variant reads the `.dark` class Ouro's `colorSchemeScript` sets; a site that marks dark mode with `data-theme` or the system setting redefines it, as the theming guide's [dark mode recipe](theming.md#dark-mode) shows, and Hero follows. `dark` shares `light`'s frame: its `width` and `crop` size the box. It is the same scene, so without its own `alt`, `decorative` or `focus` it takes `light`'s. `priority` decides how the twin that shows loads. A twin without it is lazy, and a hidden lazy image is never fetched. Give `priority` to the twin most of your visitors see, and it loads straight from the HTML at high fetch priority while the other stays lazy. Give it to both when the page preloads the art for its scheme: both wait in the HTML, and an inline script after them, which runs once the page's CSS has loaded, loads the one that shows, so neither scheme downloads both. A preload for the dark twin, which follows the system setting, is ``, with exactly the twin's `srcSet` and `sizes` (and a `type` for a `sources` format); a page that stores the person's choice adds the link from the script in its `` that applies the choice. ```ts interface HeroPictures { /** The art shown in light mode, and the frame both are shown in. */ light: HeroPicture; /** The same scene at night, shown in dark mode. */ dark: HeroPicture; } ``` ### `HeroPictureSource` One `` element of a hero picture, in the order given. ```ts interface HeroPictureSource { /** The source's `srcset`, such as an AVIF or WebP file. */ srcSet: string; /** The MIME type, such as `image/avif`. */ type?: string; /** A media query that picks this source, such as `(max-width: 40rem)`. */ media?: string; /** The `sizes` for this source. */ sizes?: string; /** * This source's intrinsic pixel width, when its art has another shape than the picture's own, * such as a phone crop. With `height`, it holds the image's box to this source's shape before * the file arrives, so the page doesn't shift. */ width?: number; /** This source's intrinsic pixel height, with `width`. */ height?: number; } ```