Docs

Details

Details is an expandable panel for showing and hiding content from the user, to make the UI less cluttered.
<Details opened>
  <div slot="summary">Contact information</div>

  <VerticalLayout>
    <span>Sophia Williams</span>
    <span>sophia.williams@company.com</span>
    <span>(501) 555-9128</span>
  </VerticalLayout>
</Details>

Anatomy

Details consists of a summary area and a content area.

Summary

The Summary is the part that’s always visible, and typically describes the contents, for example with a title. Clicking on the summary toggles the content area’s visibility.

The summary supports rich content and can contain any component. This can be used, for example, to display the status of the corresponding content.

Content

This is the collapsible part of Details. It can contain any component. When the content area is collapsed, the content is invisible and inaccessible by keyboard or screen reader.

<Details opened>
  <div slot='summary'>Analytics</div>

  <VerticalLayout>
    <a href='#'>Dashboard</a>
    <a href='#'>Reports</a>
    <a href='#'>Data sources</a>
  </VerticalLayout>
</Details>

<Details>
  <div slot='summary'>Customers</div>

  <VerticalLayout>
    <a href='#'>Accounts</a>
    <a href='#'>Contacts</a>
  </VerticalLayout>
</Details>

<Details>
  <div slot='summary'>Finances</div>

  <VerticalLayout>
    <a href='#'>Invoices</a>
    <a href='#'>Transactions</a>
    <a href='#'>Statements</a>
  </VerticalLayout>
</Details>