Typography

Komponent for alle tekstvarianter.

FigmaGitHubEndringslogg

Komponenten er klar til testing, men ikke ferdig

Komponenten har blitt utarbeidet nok til at det ikke kommer store endringer, men trenger å bli testet for å avdekke behov. Gi tilbakemelding om noe lugger eller mangler.

Breaking changes varsles i endringsloggen som patches, ikke som major oppdateringer, for å unngå versjonsinflasjon.

Send innspill

Test props

Eksempler

Headings

Tekstvarianten heading* er for titler.

Heading kommer i 6 ulike varianter av synkende font-size. Første variant er også italic-30, og brukes som hovedoverskrift.

<Stack gap="md">
  <Typography as="h1" variant="heading1">
    Hovedoverskrift
  </Typography>
  <Typography as="h2" variant="heading2">
    Her er en overskrift
  </Typography>
  <Typography as="h3" variant="heading3">
    Her er en overskrift
  </Typography>
  <Typography as="h4" variant="heading4">
    Her er en overskrift
  </Typography>
  <Typography as="h5" variant="heading5">
    Her er en overskrift
  </Typography>
  <Typography as="h6" variant="heading6">
    Her er en overskrift
  </Typography>
</Stack>

Variant-propen er for styling. Du må sette riktig as-verdi i henhold til elementet som passer på siden. For headings er det viktig at nivået er rett.

<Stack gap="md">
  <Typography as="h1" variant="heading2">
    (h1) Her er en overskrift
  </Typography>
  <Typography as="h2" variant="heading2">
    (h2) Her er en overskrift
  </Typography>
  <Typography as="h3" variant="heading2">
    (h3) Her er en overskrift
  </Typography>
  <Typography as="h4" variant="heading2">
    (h4) Her er en overskrift
  </Typography>
  <Typography as="h5" variant="heading2">
    (h5) Her er en overskrift
  </Typography>
  <Typography as="h6" variant="heading2">
    (h6) Her er en overskrift
  </Typography>
</Stack>

Brødtekst

For brødtekst kan variantene ingress, paragraph og paragraph-small brukes.

<Stack gap="lg">
  <Typography as="p" variant="ingress">
    Her er en noe innledende tekst om det som kommer nedenfor.
  </Typography>
  <Typography as="p" variant="paragraph">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ac lorem aliquet, interdum sapien interdum, malesuada diam. 
  </Typography>
  <Typography as="p" variant="paragraph-small">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ac lorem aliquet, interdum sapien interdum, malesuada diam. 
  </Typography>
</Stack>

Skjemaer, tabeller og lignende

Tekstvarianten "text-*" er mer kompakt, og er beregnet på skjemaer, tabeller og lignende. Denne stilen er innbakt i flere komponenter, men her får du en egen stilvariant hvor det mangler.

For tekstelementer som krever flere props, som label eller lenke, kan du bruke as="child", for å få rett stilvariant.

<Stack gap="lg">
  <Typography as="child" variant="text-regular">
    <label>
      Teksten blir rendret som en label
      <input style={{marginLeft: "8px"}} type="text" />
      <Typography as="p" variant="text-light">
        Her er en hjelpetekst
      </Typography>
    </label>
  </Typography>
  <Typography as="child" variant="text-light">
    <a href="#">
      Her er en lenke
    </label>
  </Typography>
  <Typography as="p" variant="text-light">
    Her er en tekst, også med en {" "}
    <a href="#">
      lenke
    </label>
  </Typography>
</Stack>

Retningslinjer

Headings

H1-nivået i overskrifter representerer den viktigste tittelen på en side, og for god semantisk HTML bør det bare være én h1 per side. Deretter bør man bruke h2, h3 osv. for underoverskrifter i synkende rekkefølge av betydning.

Størrelse er uavhengig av semantisk betydning, selv om de ofte henger sammen.

Paragraph

Bruk paragraph som standard. Bruk paragraph-small for løsninger hvor du har behov for mer plass-utnyttelse.

Kode

<Typography />

import { Typography } from "@aneo-org/design-react/serverComponents";

Tekst-komponent.

PropTypeBeskrivelse
as"h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | "i" | "u" | "b" | "em" | "strong" | "child"Semantisk nivå på tekst.
marginBottomboolean?False som standard. Legger til margin under elementet. Kun lagt til marginBottom for ingress, paragraph og paragraph-small.
variant"heading1" | "heading2" | "heading3" | "heading4" | "heading5" | "heading6" | "paragraph" | "paragraph-small" | "ingress" | "text-light" | "text-regular" | "text-medium" | "text-s-light" | "text-s-regular" | "text-s-medium"Tekstens stil.