Details

<!-- REQUIRED for bolt styles to be applied -->
<bolt-details>
  <details>
    <!-- The summary provides an indication of the content body -->
    <summary>Description</summary>
    <!-- Content can be any valid HTML -->
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
      nisi ut aliquip ex ea commodo consequat.
    </p>
  </details>
</bolt-details>

• noindent: (optional)
  • Removes built in indentation on the details content body.
  • The indentation vertically aligns the summary and content of the rendered <details> element.
  • Only remove when custom content adds additional space on the left side.
• summarysize: (optional)
  • Controls the typography size of the summary text
  • Values:
    • md (default): Uses 'bolt-body-md' typography
    • sm: Uses 'bolt-body-sm' typography

• Details keeps attention on primary content while letting users show brief supporting information only when they need it.
• Details should be collapsed by default so users focus on primary content, allowing supporting content to be expanded only when needed.
• Details should be adjacent to or below the primary content it supports.
• The trigger should always appear above content, with the expanded area appearing below. Expanding content above the trigger isn't accessible for screenreader or keyboard users.
• It is suggested to only have one level of Details. Nesting Details inside of other Details makes it difficult to understand where content begins and ends.
• Use Details sparingly on a page, so users do not have to manage an excessive number of show/hide interactions.
• Each Details should open and close independently from one another.
• When the trigger is toggled, maintain the user’s place on the page (no scrolling to the top or bottom of the expanded content or moving focus unexpectedly).
• The expanded content should be straightforward allowing users to scan and understand it without feeling overwhelmed (short paragraphs or descriptions, brief explanatory text, etc.).
• Error messages, instructions and actions should not be hidden within the content of the component.

• When there is tertiary information that may be helpful to users, but is not necessary for them to see by default, such as explanation text, a short description below a claim, etc..
• When space is limited on a page and information is not necessary for basic understanding. For example, stacked content, tables/columns, cards and dashboards.

• Avoid when content inside the expanded area is necessary to complete a task or is legally required.
• Avoid if the user needs to read all content in a specific order.
• Avoid if the amount of content is too long or complex.

• Use Buttons or Links for primary actions like “Make a payment”.
• Use static content and let the user scroll the page when content is meant to be read in full or represents key steps the user must take.
• Use an Accordion or different layout to organize large or varied sections of content, especially when they have headings or need to be grouped.
• Consider using Contextual help or alternative patterns when you only need a very short definition or label clarification.

• Use sentence case for Details label. For example, “Show claim details”.
• Labels should clearly describe the contents of the expanded region so users can decide whether they need to open it.
• Keep the expanded content concise and scannable with short paragraphs or bullets. Avoid long blocks of text.
• Do not overload a single Details with too much content.

All Bolt components have gone through accessibility testing, but please keep our accessibility guidelines in mind.