Expander

<div class="o-expander c-expander">
	<div class="o-box u-p-small o-expander__trigger c-box c-box--rounded c-expander__header" tabindex="0">
		<div class="o-layout o-layout--fit u-flex-middle">
			<div class="o-layout__item u-width-grow">
				<h2 class="c-type-echo">Toggle Expander</h2>
			</div>
			<div class="o-layout__item u-width-shrink">
				<div class="c-expander__header-icon"></div>
			</div>
		</div>
	</div>
	<div class="o-expander__content c-expander__content">
		<div class="o-box u-p-small">
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam condimentum vitae nisi et vulputate. Cras facilisis magna vehicula eleifend ullamcorper. Ut eu nisi eget lectus lobortis tincidunt. Sed dictum nibh sem, non malesuada augue malesuada nec. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec bibendum eros neque, ac maximus odio ullamcorper in.</p>
			<p>Aliquam ut magna at ex ultricies aliquet. Pellentesque placerat urna sapien, et ornare metus tincidunt nec. Phasellus in dolor id elit porttitor eleifend. Donec sagittis quis dolor nec fringilla. Maecenas risus turpis, sagittis ut mollis vel, dapibus sed risus.</p>
			<p>Aliquam facilisis, velit a dignissim sollicitudin, tortor mi pharetra felis, efficitur rutrum sem ipsum cursus nisi. Duis vitae elit ornare, consectetur risus vel, elementum magna. Donec tincidunt aliquet luctus.</p>
			<p class="u-align-center">
				<button class="o-expander__trigger c-button" data-expander-behaviour="close">Close</button>
			</p>
		</div>
	</div>
</div>

<div class="o-expander c-expander c-expander--content-border">
	<div class="o-box u-p-small o-expander__trigger c-box c-box--rounded c-expander__header" tabindex="0">
		<div class="o-layout o-layout--fit u-flex-middle">
			<div class="o-layout__item u-width-grow">
				<h2 class="c-type-echo">Toggle Expander</h2>
			</div>
			<div class="o-layout__item u-width-shrink">
				<div class="c-expander__header-icon"></div>
			</div>
		</div>
	</div>
	<div class="o-expander__content c-expander__content">
		<div class="o-box u-p-small">
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam condimentum vitae nisi et vulputate. Cras facilisis magna vehicula eleifend ullamcorper. Ut eu nisi eget lectus lobortis tincidunt. Sed dictum nibh sem, non malesuada augue malesuada nec. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec bibendum eros neque, ac maximus odio ullamcorper in.</p>
			<p>Aliquam ut magna at ex ultricies aliquet. Pellentesque placerat urna sapien, et ornare metus tincidunt nec. Phasellus in dolor id elit porttitor eleifend. Donec sagittis quis dolor nec fringilla. Maecenas risus turpis, sagittis ut mollis vel, dapibus sed risus.</p>
			<p>Aliquam facilisis, velit a dignissim sollicitudin, tortor mi pharetra felis, efficitur rutrum sem ipsum cursus nisi. Duis vitae elit ornare, consectetur risus vel, elementum magna. Donec tincidunt aliquet luctus.</p>
			<p class="u-align-center">
				<button class="o-expander__trigger c-button" data-expander-behaviour="close">Close</button>
			</p>
		</div>
	</div>
</div>