Details

const Preview = () => {
  return (
    <Details>
      <Details.Summary>
        Hvem kan registrere seg i Frivillighetsregisteret?
      </Details.Summary>
      <Details.Content>
        For å kunne bli registrert i Frivillighetsregisteret, må organisasjonen
        drive frivillig virksomhet. Det er bare foreninger, stiftelser og
        aksjeselskap som kan registreres. Virksomheten kan ikke dele ut midler
        til fysiske personer. Virksomheten må ha et styre.
      </Details.Content>
    </Details>
  );
};

render(<Preview />)

Bruk Details når

• mindre viktig innhald skal gjerast valfritt å opne
• tilleggsinformasjon kan vere nyttig for enkelte brukarar
• du skal gje døme eller svare på ofte stilte spørsmål

Unngå Details når

• du skal visa viktig innhald som alle bør sjå når dei kjem til sida
• feilmeldingar skal oppsummerast - bruk heller ErrorSummary

Eksempel

Du kan bruke Details i eit kort for å få ramme rundt innhaldet. Dette passar i tilfeller der Details ikkje dekkjer heile sida, eller når det berre er ei rad.

const InCardWithColor = () => {
  return (
    <>
      <Card data-color='brand3' data-variant='tinted'>
        <Details>
          <Details.Summary>
            Hvordan får jeg tildelt et jegernummer?
          </Details.Summary>
          <Details.Content>
            Du vil automatisk få tildelt jegernummer og bli registrert i
            Jegerregisteret når du har bestått jegerprøven.
          </Details.Content>
        </Details>
        <Details>
          <Details.Summary>
            Jeg har glemt jegernummeret mitt. Hvor finner jeg dette?
          </Details.Summary>
          <Details.Content>
            <Paragraph>
              Du kan finne dette ved å logge inn på{' '}
              <Link href='https://minjegerside.brreg.no/'>Min side</Link>
            </Paragraph>
          </Details.Content>
        </Details>
      </Card>
      <br />
      <Card data-color='brand1'>
        <Details>
          <Details.Summary>Vedlegg</Details.Summary>
          <Details.Content>Vedlegg 1, vedlegg 2, vedlegg 3</Details.Content>
        </Details>
      </Card>
    </>
  );
};

render(<InCardWithColor />)

Retningslinjer

Store tekstmengder kan vere krevjande for mange. Details gjev brukaren moglegheit til sjølv å velja kva som er relevant å lese. Samstundes bør du ikkje bruke Details for å skjule innhald berre for å gjere sida ryddigare. Når innhald vert skjult, er det ein risiko for at brukaren ikkje oppdagar det i det heile. Vurder difor nøye om innhaldet faktisk bør skjulast, og ver bevisst på kvifor du gjer det.

Unngå nøsta lister

Ikkje legg ein Details inni ein annan, det vi kallar nøsta lister. Det kan bli forvirrande for brukaren å forstå kva som er opna og lukka, spesielt når fleire nivå kan opnast samtidig.

Tekst

Sørg for at overskrifta gjev ei god skildring av kva innhaldet i Details er. Overskriftene kan ha stor tyding for om brukarane finn det dei treng, om innhaldet blir lese og om det kan reknast som tilgjengeleg for alle brukarar. «Vis meir» eller «Les meir her» er ikkje gode nok titlar. Har du ein Details med mange nedtrekk, kan du ha ei hovudoverskrift eller temaoverskrift over heile lista.

Hold innholdet i Details kort for å sikre at det lett kan relaterast til overskriften. Om innhaldet er for langt bør du fordela innhaldet i fleire Details. Ved veldig mykje innhald kan det vere betre å vurdere å lage eigne sider.