Expandable

Fargemodus
ExpandablePanel-propstitle 
defaultOpen
<ExpandablePanel title="Kollektivreisende">
  <Paragraph>
    For de reisende tilbyr Entur en nasjonal reiseplanlegger, der man får
    oppdaterte reiseforslag for alle kollektivreiser i Norge. Denne løsningen
    er gratis å bruke og konkurransenøytral.
  </Paragraph>
</ExpandablePanel>

Bruk Expandable når

Expandable-komponenter brukes for å skjule innhold som ikke alltid er relevant, slik at siden blir ryddigere. Brukeren velger selv hva de vil se.

Retningslinjer

ExpandablePanel vs. Accordion

Bruk ExpandablePanel for enkeltstående seksjoner. Bruk Accordion når flere seksjoner hører sammen og bare én bør være åpen om gangen. Se Kode-fanen for implementering.

ExpandableText

For lange tekstblokker som bør vise bare en del av innholdet først, bruk ExpandableText.

Eksempler

Grunnleggende bruk
<ExpandablePanel title="Kollektivreisende">
  <Paragraph>
    For de reisende tilbyr Entur en nasjonal reiseplanlegger, der man får
    oppdaterte reiseforslag for alle kollektivreiser i Norge.
  </Paragraph>
</ExpandablePanel>

Accordion
<Accordion>
  <AccordionItem title="Reiser" id="reiser">
    <Paragraph>Informasjon om reiser.</Paragraph>
  </AccordionItem>
  <AccordionItem title="Billetter" id="billetter">
    <Paragraph>Informasjon om billetter.</Paragraph>
  </AccordionItem>
  <AccordionItem title="Priser" id="priser">
    <Paragraph>Informasjon om priser.</Paragraph>
  </AccordionItem>
</Accordion>

ExpandableText
<ExpandableText title="Les mer om kollektivtransport">
  For de reisende tilbyr Entur en nasjonal reiseplanlegger, der man får
  oppdaterte reiseforslag for alle kollektivreiser i Norge. Denne løsningen
  er gratis å bruke og konkurransenøytral. Uansett om reisen består av
  flere delstrekninger, vil Entur gjøre det mulig å kjøpe billetter til
  hele reisen med ett tastetrykk.
</ExpandableText>