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 />)

Use Details when

• less important content should be optional to open
• additional information may be useful for some users
• you need to provide examples or answer frequently asked questions

Avoid Details when

• important content needs to be visible as soon as users arrive on the page
• error messages must be summarised, use ErrorSummary instead

Example

You can use Details inside a card to give the content a framed appearance. This works well when Details does not span the full width of the page, or when it contains only a single line.

const InCardWithColorEn = () => {
  return (
    <>
      <Card data-color='brand3' data-variant='tinted'>
        <Details>
          <Details.Summary>
            How do I get assigned a hunter number?
          </Details.Summary>
          <Details.Content>
            You will automatically be assigned a hunter number and registered in
            the Hunter Register when you have passed the hunter's exam.
          </Details.Content>
        </Details>
        <Details>
          <Details.Summary>
            I have forgotten my hunter number. Where can I find it?
          </Details.Summary>
          <Details.Content>
            <Paragraph>
              You can find this by logging in to{' '}
              <Link href='https://minjegerside.brreg.no/'>My Page</Link>
            </Paragraph>
          </Details.Content>
        </Details>
      </Card>
      <br />
      <Card data-color='brand1'>
        <Details>
          <Details.Summary>Attachments</Details.Summary>
          <Details.Content>
            Attachment 1, attachment 2, attachment 3
          </Details.Content>
        </Details>
      </Card>
    </>
  );
};

render(<InCardWithColorEn />)

Guidelines

Large amounts of text can be demanding for many users. The Details component allows users to decide for themselves what is relevant to read. However, you should not use Details to hide content just to make the page look tidier. When content is hidden, there is a risk that users will not notice it at all. Carefully consider whether the content really needs to be hidden, and be clear about why you are doing so.

Avoid nested lists

Do not place one Details inside another. Nested lists can make it difficult for users to understand what is open and what is closed, especially when several levels can be expanded at once.

Text

Make sure the heading clearly describes what the Details contains. Headings can strongly influence whether users find what they need, whether the content is read, and whether it is considered accessible to all.

“Show more” or “Read more here” are not good enough headings. If you have many expandable sections, consider adding a main heading or thematic heading above the entire list.

Keep the content inside Details short so it is easy to relate to the heading. If the content is too long, divide it into several Details. For very large amounts of content, it may be better to create separate pages.