Hero
Om komponenten
Hero-elementer brukes i toppen av en side, plassert under Breadcrumbs. Formålet er å gi en kort beskrivelse av sidens rolle, og har ofte en tydelig og konkret handlingsknapp.
Hero har tre varianter: standard, two-column og full-bleed. Two-column skal kun brukes til landingssider, standard kan brukes til både landingssider og undersider. Mens full-bleed kun kan brukes til undersider for bolig/eiendomsenheter.
Egnet til:
- Innhold på toppnivå med overskrift, undertekst, media (bilde eller video) og ofte knapp.
Relaterte komponenter
Varianter
Standard
Standard (landingsside)
Standard (underside)
Full-bleed (underside)
Kontekst
I kode må denne komponenten (i fullbleed) ikke plasseres i en relativ container som ikke tar hele skjermbredden. Det er fordi bildet plasseres med absolute position for å ta opp hele skjermbredden.
Props
Hero
| Prop | Description | Default |
|---|---|---|
id? | - | |
variant? | Defines the variant of the Hero | standard |
Heading
| Prop | Description | Default |
|---|---|---|
id? | - | |
size? | The visual text size of the heading | - |
level | The semantic level of the heading | - |
Media
| Prop | Description | Default |
|---|---|---|
id? | - | |
fit? | Control how the content should be placed with the object-fit property
You might for example want to use fit="contain" portrait images that should not be cropped | cover |
Carousel
| Prop | Description | Default |
|---|---|---|
id? | - | |
align? | Alignment of the items relative to the carousel viewport. | center |
autoPlayDelay? | Delay in milliseconds between each automatic transition of the carousel. Any interaction with the carousel will immediately stop the autoplay. | - |
initialIndex? | The initial snapped index of the carousel. | 0 |
orientation? | Orientation of the carousel. | horizontal |
scrollGestures? | Whether the carousel should scroll with regular mouse/trackpad scroll gestures, in addition to swipe gestures. | false |
| Events | ||
onSelect? | Callback invoked when the snapped index changes. | - |
onSettled? | Callback invoked after the carousel scrolling "settles". Think of this as the debounced version of onSelect. | - |