Asides

On this page

# Intro

Asides are used to display side menus and vertical navigation with an accordion effect using details elements. Asides have no padding by default and should be used with the --padding utility.

<aside class="--padding-4">
	<a href="" class="link">Home</a>
	<details>
		<summary>Development <i class="icon lni lni-chevron-right"></i></summary>
		<div class="content">
			<a href="https://atom.io" target="_blank" class="link">Atom</a>
			<a href="https://github.com" target="_blank" class="link">Github</a>
			<a href="https://slack.com" target="_blank" class="link">Slack</a>
		</div>
	</details>
</aside>

Ungrouped links can be make by using the link class on anchors.

<aside class="--padding-4">
	<a href="https://atom.io" target="_blank" class="link">Atom</a>
	<a href="https://github.com" target="_blank" class="link">Github</a>
	<a href="https://slack.com" target="_blank" class="link">Slack</a>
</aside>

# Details

Link are grouped together by details elements that contain link classed anchors. See details.

<aside class="--padding-4">
	<details>
		<summary>Development <i class="icon lni lni-chevron-right"></i></summary>
		<div class="content">
			<a href="https://atom.io" target="_blank" class="link">Atom</a>
			<a href="https://github.com" target="_blank" class="link">Github</a>
			<a href="https://slack.com" target="_blank" class="link">Slack</a>
		</div>
	</details>
</aside>