Hopp til hovedinnhold
Designsystemet logo

Størrelsar i kode

11. september 2025

HTML data-attributt og css custom properties (variablar) vert brukt for å definere størrelsesmodus for ein komponent. Dette fungerar for alle komponentar og HTML-element, med nokon få unntak som er nemnt lenger ned.

Størrelsesmodusen påverkar våre størrelsesvariablar (--ds-size-*) og fontstørrelsesvariablar (--ds-font-size-* og --ds-*-font-size-*).

Sette størrelsesmodus med data-size

Dette data-attributtet blir brukt for å endre størrelsesmodus, som påverkar elementet og alle etterkommar-element. Vi støttar tre størrelsesmodusar ut av boksen: sm, md eller lg. Som standard vil md bli brukt.

<body>
  <div>
    <!-- Størrelsesmodus md blir brukt som standard -->
  </div>


  <div data-size="sm"> <!-- Dette elementet bruker størrelsesmodus sm -->
    <!-- Etterkommarar vil òg bruke størrelsesmodus sm -->
  </div>
</body>

Sette størrelsesmodus med css custom properties

Du kan sette css-variabelen --ds-size i staden for å sette ein spesifikk størrelsesmodus i markupen. Fordelen med dette er at du då kan endre størrelsesmodus basert på ein media query eller container query.

Du gjer dette ved å definere --ds-size: var(--ds-size--<mode>), der <mode> er anten sm, md eller lg. Merk at du også må sette attributtet data-size på elementet der modusen skal inntreffe, men det kan vere blankt eller kva som helst anna enn "sm", "md" eller "lg".

Eksempel: Legge til ein "auto"-størrelsesmodus

[data-size='auto'] {
  --ds-size: var(--ds-size--sm);


  @media (min-width: 600px) {
    --ds-size: var(--ds-size--md);
  }
  @media (min-width: 992px) {
    --ds-size: var(--ds-size--lg);
  }
}
<body data-size="auto">
  <div data-size="sm"> <!-- Dette element bruker størrelsesmodus sm -->
    <!-- Etterkommarar vil òg bruke størrelsesmodus sm -->
  </div>
  <!--
    Etterkommarar av <body> utan eit eksplisitt data-size-attributt
    bruker no størrelsesmodus sm, md eller lg basert på on breidda
    til visningsområdet
  -->
</body>

Unntak

Enkelte komponentar bruker ikkje data-size for å sette størrelsesmodus. I staden vil attributtet sette komponentstørrelsen. Dette gjeld

  • Avatar
  • Heading
  • Paragraph
  • Spinner

Desse komponentane støttar andre størrelsar, som xs og xl. Sjekk komponentdokumentasjonen for å sjå kva størrelsar dei støttar.

Dei vil likevel bli påverka av størrelsesmodus på forfedrar. Til dømes vil det første avsnittet i dette eksempelet vere mindre enn det andre:

<div data-size="sm">
  <Paragraph data-size="xs">Lorem ipsum</Paragraph>
</div>
<div data-size="md">
  <Paragraph data-size="xs">Lorem ipsum</Paragraph>
</div>

Det er forvirrande at data-size betyr størrelsesmodus i nokre samanhengar, og komponentstørrelse i andre. Dette vil sannsynlegvis bli endra i neste major-versjon som ein breaking change.

Eigendefinerte størrelsesmodusar

Under panseret endrar variablane våre seg basert på den lokale verdien av --ds-size-mode-font-size, og bruker rem for å skalere med nettlesarinnstillingane til brukaren. data-size="<mode>" og --ds-size: var(--ds-size--<mode>) fungerar ved å sette --ds-size-mode-font-size til verdiar som samsvarar med dei samme størrelsesmodusane i Figma, men du kan òg sette denne variabelen direkte for eigendefinerte størrelsar.

Merk at du også må sette attributtet data-size på elementet der modusen skal inntreffe, men det kan vere blankt eller kva som helst anna enn "sm", "md" eller "lg".

.example {
  --ds-size-mode-font-size: 0.9;
}
[data-size="giant"] {
  --ds-size-mode-font-size: 1.5;
}
<body>
  <div>
    <!-- Størrelsesmodus md blir brukt som standard -->
  </div>


  <div data-size class="example">
    <!--
      Dette elementet og etterkommarar bruker 0.9 som skaleringsfaktor,
      som definert av klassen .example
    -->
  </div>


  <div data-size="giant" >
    <!--
      Dette elementet og etterkommarar bruker den eigendefinerte
      størrelsesmodusen "giant", med 1.5 som skaleringsfaktor
    -->
  </div>
</body>
Rediger denne siden på Github (åpnes i ny fane)