Eksempler
Du må selv velge hvilken h-tag Heading rendres som ved hjelp av level-prop.
Varianter
Størrelse
Komponenten tilbyr disse størrelsene "xlarge" | "large" | "medium" | "small" | "xsmall" tilsvarende 40, 32, 24, 20, og 18px.
Mobilskalering
Ved brekkpunkt 480px vil Heading size xlarge og large skaleres ned et hakk. xlarge går fra 40px til 32px, mens large går fra 32px til 28px.
Hierarki
Komponenten tilbyr en prop: level som brukes for å sikre riktig heading-heirarki på siden. Bruk da level 1-6 for å velge om heading skal være h1-h6.
Med eller uten spacing (padding)
Heading har en prop: spacing, som automatisk setter på padding-bottom for å gi mer avstand mellom elementene.
Props
Heading
- as? React.ElementType
- level?"1" | "2" | "3" | "4" | "5" | "6"
- size "xlarge" | "large" | "medium" | "small" | "xsmall"
- children ReactNode
- spacing?boolean
- className? string
- ref? Ref<HTMLHeadingElement>
- OverridableComponent-api
- Heading level
- Changes text-sizing
- Heading text
- Adds margin-bottom
- Heading extends HTMLHeadingElement