Hopp til innhold

Accordion

Med trekkspillister kan vi presentere mye innhold på liten plass. En trekkspilliste har én eller flere rader, som brukeren kan klikke på for å vise eller skjule informasjon.

EksemplerBrukKode

Kom i gang

Accordion finnes i en React-versjon og som en enkel CSS-pakke. Om du bruker React trenger du ikke installere stilpakken selv, den blir inkludert automatisk.

Installer
npm i @fremtind/jkl-accordion-react

# Eller for kun CSS

npm i @fremtind/jkl-accordion
Bruk
import { Accordion } from "@fremtind/jkl-accordion-react";



// Importer stilark via JavaScript med CSS-loader.

import "@fremtind/jkl-accordion/accordion.min.css";

// Eller importer stilark via SCSS.

@use "@fremtind/jkl-accordion/accordion";
React
Versjon
Dokumentasjon
Readme
Changelog

Live demo

Accordion
Visning
Tema
Tetthet
<Accordion>

  <AccordionItem title="Hvem kan kjøpe livsforsikring?">

    <UnorderedList>

      <ListItem>Personer med et norsk fødselsnummer.</ListItem>

      <ListItem>

        Personer som har vært bosatt i Norge i minst de fem siste årene før

        avtalen inngås.

      </ListItem>

      <ListItem>

        Livsforsikring kan kjøpes på nett av personer mellom 18 og 79 år.

      </ListItem>

    </UnorderedList>

    Ønsker du en forsikringssum på mer enn 3 millioner trenger vi ekstra

    økonomiske opplysninger. Da må du ta kontakt med banken din.

  </AccordionItem>

  <AccordionItem title="Hvem kan kjøpe kritisk sykdom?">

    Personer med et norsk fødselsnummer. Personer som har vært bosatt i Norge i

    minst de fem siste årene før avtalen inngås. Kritisk sykdom kan kjøpes på

    nett av personer mellom 18 og 58 år. Ønsker du en forsikringssum på mer enn

    1,1 millioner trenger vi ekstra økonomiske opplysninger. Da må du ta kontakt

    med banken din.

  </AccordionItem>

  <AccordionItem title="Hvem kan kjøpe uførepensjon?">

    Personer med et norsk fødselsnummer. Personer som har vært bosatt i Norge i

    minst de fem siste årene før avtalen inngås. Uførepensjon kan kjøpes på nett

    av personer mellom 18 og 60 år. Ønsker du en forsikringssum på mer enn 96

    000 trenger vi ekstra økonomiske opplysninger. Da må du ta kontakt med

    banken din.

  </AccordionItem>

</Accordion>

React API

Her finner du en oversikt over props på komponentene i pakken.