List

Unable to parse html

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

Unable to parse html

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

Unable to parse html

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

Vi bruker lister til oppramsinger. Det betyr at punktene bør være maks en setning, helst bare noen få ord. Alle punktene i en liste bør ha samme form og struktur.

Rettskrivingsregler for lister

En vanlig feil når vi skriver lister, er at vi bruker kolon, punktum, komma og stor bokstav på feil sted. Det er to hovedregler for tegnsetting.

1. Når hvert punkt er en fortsettelse av innledningen skal det

• ikke være kolon etter innledningen
• være liten forbokstav i punktene
• ikke være punktum eller komma til slutt i hvert punkt

2. Når hvert punkt er fullstendige setninger, bruker vi kolon i den innledende setningen. I tillegg må vi huske på disse tingene:

• 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.

Eksempler

Siste frist for å søke er

• 15.november for hele året eller bare høstsemesteret
• 15.mars for vårsemesteret

For å ha rett til å få uføretrygd, må sykdom og/eller skade være hovedårsaken til at du har nedsatt arbeids- og inntektsevne.

I tillegg må du som hovedregel fylle disse vilkårene:

• Du må være mellom 18 og 67 år.
• Du må ha vært medlem av folketrygden de siste 5 årene før du ble syk eller skadet.
• Du må ha minst 50 prosent redusert arbeids- og inntektsevne.