Panels

Basic Panel with stroked sections

<div class="panel panel--stroke">
	<div class="panel__header">
		Panel Header
	</div>
	<div class="panel__section">
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias earum est expedita minus, necessitatibus omnis quisquam recusandae vel. Dicta doloribus earum praesentium ratione veniam. Delectus error eum libero reiciendis voluptate?
	</div>
</div>

Various panel section styles

Panels with solid fills

Rounded Panel

Raised Panel

Collapsible Panel

<div class="panel panel--stroke panel--raise panel--rounded collapsible single-collapsible expanded" data-collapsible>
	<div class="panel__action" data-collapsible-target="content-1" data-collapsible-trigger>
		<div class="panel__action-text">Lorem ipsum dolor sit amet</div>
		<div class="panel__action-icon collapsible__icon"><i class="fal fa-angle-up"></i></div>
	</div>
	<div class="panel__section collapsible__content" id="content-1">
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut omnis maiores deleniti reiciendis dolor, provident possimus. Est eligendi repellat accusantium, quod mollitia cum optio alias fugit a molestiae dolor deserunt!
	</div>
</div>

Panel with multiple collapsible sections

<div class="panel panel--stroke panel--raise panel--rounded">
	<div class="panel__section panel__section--flush collapsible expanded" data-collapsible>
		<div class="panel__action" data-collapsible-target="content-2" data-collapsible-trigger>
			<div class="panel__action-text">Lorem ipsum dolor sit amet</div>
			<div class="panel__action-icon collapsible__icon"><i class="fal fa-angle-up"></i></div>
		</div>
		<div class="panel__section collapsible__content" id="content-2">
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut omnis maiores deleniti reiciendis dolor, provident possimus. Est eligendi repellat accusantium, quod mollitia cum optio alias fugit a molestiae dolor deserunt!
		</div>
	</div>
	<div class="panel__section  panel__section--flush collapsible collapsed" data-collapsible>
		<div class="panel__action" data-collapsible-target="content-3" data-collapsible-trigger>
			<div class="panel__action-text">Lorem ipsum dolor sit amet</div>
			<div class="panel__action-icon collapsible__icon"><i class="fal fa-angle-up"></i></div>
		</div>
		<div class="panel__section collapsible__content" id="content-3">
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut omnis maiores deleniti reiciendis dolor, provident possimus. Est eligendi repellat accusantium, quod mollitia cum optio alias fugit a molestiae dolor deserunt!
		</div>
	</div>
</div>