Details

On this page

# Intro
# Groups
# State
# Nested

# Intro

Details are used to create collapsible content. The summary element is required to change the default label and is styled with uppercase text. Use a content classed container inside the detail for proper padding.

Icons should be used to convey to the user that the detail is interactive. This can be done by using a icon classed element inside of the summary.

Detail

This is the content of a detail

<details>
	<summary>Detail <i class="icon lni lni-chevron-right"></i></summary>
	<div class="content">
		This is the content of a detail
	</div>
</details>

# Groups

You can group together details by wrapping them in a details classed container.

Detail

This is the content of a detail

Detail

This is the content of a detail

Detail

This is the content of a detail

<div class="details">
	<details>
		<summary>Detail <i class="icon lni lni-chevron-right"></i></summary>
		<div class="content">
			This is the content of a detail
		</div>
	</details>
	<details>
		<summary>Detail <i class="icon lni lni-chevron-right"></i></summary>
		<div class="content">
			This is the content of a detail
		</div>
	</details>
	<details>
		<summary>Detail <i class="icon lni lni-chevron-right"></i></summary>
		<div class="content">
			This is the content of a detail
		</div>
	</details>
</div>

# State

You can change the state of a detail by using the open attribute. See MDN for more details.

Closed

This is the content of a detail

Opened

This is the content of a detail

<details>
	<summary>Closed <i class="icon lni lni-chevron-right"></i></summary>
	<div class="content">
		This is the content of a detail
	</div>
</details>
<details open>
	<summary>Opened <i class="icon lni lni-chevron-right"></i></summary>
	<div class="content">
		This is the content of a detail
	</div>
</details>

# Nested

Details can be nested inside another detail.

Parent

Child

This is the content of a detail

<details open>
	<summary>Parent <i class="icon lni lni-chevron-right"></i></summary>
	<div class="content">
		<details class="--margin-bottom-0">
			<summary>Child <i class="icon lni lni-chevron-right"></i></summary>
			<div class="content">
				This is the content of a detail
			</div>
		</details>
	</div>
</details>