List

const Preview = () => {
  return (
    <List.Unordered>
      <List.Item>Bøyabreen</List.Item>
      <List.Item>Briksdalsbreen</List.Item>
      <List.Item>Nigardsbreen</List.Item>
    </List.Unordered>
  );
};

render(<Preview />)

Bruk List når

• brukerne skal ha en rask oversikt over innhold i lengre tekster
• flere trinn i en prosess skal listes opp
• kriterier skal listes opp

Unngå List når

• brukerne skal lese lengre innhold
• flere grupper av informasjon skal kunne sammenlignes, bruk heller en Table

Eksempel

Usortert liste

const Unordered = () => {
  return (
    <>
      <Heading
        level={2}
        data-size='xs'
        style={{ marginBottom: 'var(--ds-size-2)' }}
      >
        Foreningen har plikt til å ha revisor hvis de har
      </Heading>
      <List.Unordered>
        <List.Item>
          et gjennomsnittlig antall ansatte som tilsvarer ti årsverk eller mer
        </List.Item>
        <List.Item>balansesum som er 27 millioner kroner eller mer</List.Item>
        <List.Item>driftsinntekter på 35 millioner kroner eller mer</List.Item>
      </List.Unordered>
    </>
  );
};

render(<Unordered />)

Sortert liste

const Ordered = () => {
  return (
    <>
      <Heading
        level={2}
        data-size='xs'
        style={{ marginBottom: 'var(--ds-size-2)' }}
      >
        Slik gjør du:
      </Heading>
      <List.Ordered>
        <List.Item>
          Tørk over kyllingfiletene før du krydrer og steker
        </List.Item>
        <List.Item>Ha salt og pepper på filetene</List.Item>
        <List.Item>
          Stek filetene på sterk varme i to minutter på hver side
        </List.Item>
      </List.Ordered>
    </>
  );
};

render(<Ordered />)

Retningslinjer

Lister gjør innhold lettere å skumme og forstå. Bruk sorterte (ordnede) lister når rekkefølgen er viktig, og usorterte når den ikke er det. Vær bevisst på strukturen, og unngå lange punktrekker. Del heller opp i flere korte lister for bedre lesbarhet.

Liste eller tabell?

Lister og tabeller har forskjellige bruksområder. Riktig bruk gjør opplevelsen tydelig for alle brukere, spesielt for de med kognitive vansker og læringsvansker, eller de som bruker skjermlesere.

• En liste presenterer relatert informasjon på en oversiktlig måte.
• En tabell lar brukeren se og sammenligne flere grupper av informasjon.

Tekst

Alle elementer i en liste bør ha samme form og struktur.

Når hvert punkt er en fortsettelse av innledningen bruker vi

• liten forbokstav i punktene
• ikke punktum eller komma til slutt på hvert punkt

Når punktene er hele setninger, bruker vi

• Stor forbokstav i det første ordet, slik at hvert punkt leses som en selvstendig setning.
• Punktum til slutt på hvert punkt, for å markere at setningen er avsluttet.

Bruk av kolon

Det skal ikke brukes kolon før oppramsingen dersom punktet er en naturlig fortsettelse av innledningen. Bruk kun kolon når det også ville vært riktig i en vanlig oppramsing uten punktliste.¹ Se eksempel under.

Når du fyller ut skattemeldingen må du huske på dette:

• Du skal føre opp nettoinntekt ved utleie av bolig.
• Du skal føre opp nettoinntekt ved utleie av tomt.

Relevante kilder

[1] Språkrådets anbefaling om kolon og punktlister