Details Component
Default Details
Details
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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<details class="details">
<summary class="details__summary">
<span class="details__label"> Details </span>
<span class="details__icon" hidden>
<svg class="icon icon--16" aria-hidden="true">
<use href="#icon-chevron-down-16" />
</svg>
</span>
</summary>
<p>Sample content</p>
</details>
Opened Details
Apply the open attribute to change the state.
Details
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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<details class="details" open>
<summary class="details__summary">
<span class="details__label"> Details </span>
<span class="details__icon" hidden>
<svg class="icon icon--16" aria-hidden="true">
<use href="#icon-chevron-down-16" />
</svg>
</span>
</summary>
<p>Sample content</p>
</details>
Centered Details
Apply the details__summary--center class to center the summary.
Details
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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<details class="details">
<summary class="details__summary details__summary--center">
<span class="details__label"> Details </span>
<span class="details__icon" hidden>
<svg class="icon icon--16" aria-hidden="true">
<use href="#icon-chevron-down-16" />
</svg>
</span>
</summary>
<p>Sample content</p>
</details>
Small Details
Apply the details__summary--small class to use the smaller version of summary.
Details
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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<details class="details">
<summary class="details__summary details__summary--small">
<span class="details__label"> Details </span>
<span class="details__icon" hidden>
<svg class="icon icon--16" aria-hidden="true">
<use href="#icon-chevron-down-16" />
</svg>
</span>
</summary>
<p>Sample content</p>
</details>
RTL Details
Works with right-to-left languages.
Details
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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<details class="details" dir="rtl">
<summary class="details__summary">
<span class="details__label"> Details </span>
<span class="details__icon" hidden>
<svg class="icon icon--16" aria-hidden="true">
<use href="#icon-chevron-down-16" />
</svg>
</span>
</summary>
<p>Sample content</p>
</details>