Die Köpfe von Unterseiten und Sections. Titel mit Aktionen, Tabs, Kennzahlen und Suche.
Marketing
Content
App
E-Commerce
Industries
Elements
page-header
Der Kopf einer Unterseite. Wo du bist, was die Seite ist und was du hier tun kannst, für Listen, Datensätze, Profile und die Unterseiten einer Website. App-Köpfe übergeben an eine kompakte Leiste, sobald sie aus dem Bild scrollen.
Installv1.0.1
aiw add @ai-website/page-headerBringt mit utils, kit, button, icon, breadcrumbs, dropdown-menu, number-ticker, motion
Usage
<PageHeader variant="actions" breadcrumbs={[…]} title="Invoices" count={128} actions={[{ label: "Export" }, { label: "New invoice", variant: "primary" }]}>…</PageHeader>Source
Installv1.0.1
aiw add @ai-website/page-headerBringt mit utils, kit, button, icon, breadcrumbs, dropdown-menu, number-ticker, motion
Usage
<PageHeader variant="with-tabs" title="Kanzlei Berger" avatar={<Logo />} tabs={[{ label: "Overview", active: true }, { label: "Projects", count: 4 }, …]} onTabChange={setTab}>…</PageHeader>Source
Installv1.0.1
aiw add @ai-website/page-headerBringt mit utils, kit, button, icon, breadcrumbs, dropdown-menu, number-ticker, motion
Usage
<PageHeader variant="with-stats" title="Sales" periods={["7 days", "30 days", "12 months"]} stats={[{ label: "Revenue", values: [4820, 21460, 248300], format: { style: "currency", currency: "USD" } }, …]} />Source
Installv1.0.1
aiw add @ai-website/page-headerBringt mit utils, kit, button, icon, breadcrumbs, dropdown-menu, number-ticker, motion
Usage
<PageHeader variant="cover" cover={<img … />} avatar={<img … />} title="Sofia Klein" actions={[{ label: "Follow", pressedLabel: "Following", variant: "primary" }]} tabs={[…]} />Source
section-header
Köpfe für Sections, die mehr tragen als einen Titel. Ein Link auf der Grundlinie, Filter für das Raster, eine Kapitelmarke mit Linie, eine große Kennzahl, eine Seitenspalte, die beim Scrollen stehen bleibt, und ein Satz, der beim Lesen aufleuchtet.
Mehr aus Layout, demselben Bereich des Kits.
Sections, die auf einer Seite meist neben Page Header stehen.
Quellcode lädt
Quellcode lädt