Menu
Home Get started
Utilities
Colors Typography Border Display Flex Grid Spacings Shadow
Components
Breadcrumb Button Card Calendar Chip Drawer Expansion-Panel Form Icon Icon-Button List Navbar Table Tabs Toast Tooltip

Expansion Panels

v1.1.0
Expansion panels let users show and hide sections of related content on a page.
Default
Content
Content
Content
<div class="expansion-panel-container">
	<div class="expansion-panel is-open">
		<button class="expansion-panel-header" type="button">Expansion Panel Header 1</button>
		<div class="expansion-panel-content">
			<div class="expansion-panel-inner">Content</div>
		</div>
	</div>
	<div class="expansion-panel">
		<button class="expansion-panel-header" type="button">Expansion Panel Header 2</button>
		<div class="expansion-panel-content">
			<div class="expansion-panel-inner">Content</div>
		</div>
	</div>
	<div class="expansion-panel">
		<button class="expansion-panel-header" type="button">Expansion Panel Header 3</button>
		<div class="expansion-panel-content">
			<div class="expansion-panel-inner">Content</div>
		</div>
	</div>
</div>

Previous: Components

← Drawer

Next: Components

Form →