Hero

Press Compare. A hero is the largest thing above the fold on most pages it sits on, so it is worth checking it does not overflow at 320.

In a page

import { Hero, Breadcrumb } from "@sushindustries/ui";

export function ComponentPage() {
	return (
		<Hero
			variant="doc"
			trail={<Breadcrumb items={[{ label: "Components", href: "/components" }]} />}
			name="hero"
			title="Hero"
			version="0.1.0"
			summary="The top of a documentation page, as one component."
		/>
	);
}

What this example is not

The demo shows HeroHeroThe head of a documentation page: trail, element name, version, measured facts, actions and a responsive shot. Folds to one column by the room it has, not by the size of the window.@sushindustries/ui · docs on its own, at the width the showcase frame gives it. On a real page it sits inside apps/web's document layout, which is what actually constrains its max width - HeroHeroThe head of a documentation page: trail, element name, version, measured facts, actions and a responsive shot. Folds to one column by the room it has, not by the size of the window.@sushindustries/ui · docs itself has no opinion on that.