Hero

Baner powitalny na górze ekranu głównego, z powitaniem, jednym akapitem i pierwszymi akcjami. Użyj go raz na stronę.

Hero

PodglądLink do sekcji Podgląd

Na żywo we wszystkich trzech motywach. Wszystko tutaj jest interaktywne.

Dzień, podgląd: Hero

Monday, 9 November

Good morning. Your agents are ready.

One window for every coding agent: tasks from your trackers, skills, pipelines and commits in the style of the project.

2 agents ready

Noc, podgląd: Hero

Monday, 9 November

Good morning. Your agents are ready.

One window for every coding agent: tasks from your trackers, skills, pipelines and commits in the style of the project.

2 agents ready

Wysoki kontrast, podgląd: Hero

Monday, 9 November

Good morning. Your agents are ready.

One window for every coding agent: tasks from your trackers, skills, pipelines and commits in the style of the project.

2 agents ready

UżycieLink do sekcji Użycie

tsx

import { Hero } from '@skribly/ui/surfaces'

tsx

<Hero
  eyebrow="Monday, 9 November"
  title="Good morning. Your agents are ready."
  lead="One window for every coding agent."
  actions={<Button>Start an agent</Button>}
  aside={<AgentChip … />}
/>

Każda etykieta jest propem, więc aplikacja przekazuje własne słowa we własnym języku. Zobacz zasadę brak wbudowanego tekstu.

DostępnośćLink do sekcji Dostępność

Region nazwany swoim nagłówkiem, który jest h1, chyba że level mówi inaczej.
Grafika jest ukryta przed czytnikami ekranu i pomijana w wąskich kontenerach, aby tekst zachował szerokość.
Akcje i element boczny się zawijają; wstęp zachowuje czytelną długość linii.

Ten przykład przechodzi przez axe we wszystkich trzech motywach przy każdym uruchomieniu testów. Zobacz, co sprawdzają testy.