1. Design System
  2. Components
  3. Links panels

Links panels

The links panel component provides a list of links to more detailed information.

Default links panels

<div class="columns">
	<div class="column">
		<div class="box has-background-light">
			<h2 class="is-size-3 has-heading-line">Literature</h2>
			<ul class="list-unstyled m-bottom-20">
				<li><a class="is-size-5 text-link" href="#">Electronic resources for researchers</a></li>
				<li><a class="is-size-5 text-link" href="#">Referencing and avoiding plagiarism</a></li>
				<li><a class="is-size-5 text-link" href="#">Special Collections</a></li>
				<li><a class="is-size-5 text-link" href="#">Theses</a></li>
			</ul>
		</div>
	</div>
	<div class="column">
		<div class="box has-background-light">
			<h2 class="is-size-3 has-heading-line">Publishing</h2>
			<ul class="list-unstyled m-bottom-20">
				<li><a class="is-size-5 text-link" href="#">Choose a journal</a></li>
				<li><a class="is-size-5 text-link" href="#">Research data management</a></li>
				<li><a class="is-size-5 text-link" href="#">Intellectual property and copyright</a></li>
				<li><a class="is-size-5 text-link" href="#">RADAR</a></li>
			</ul>
		</div>
	</div>
</div>

Alternative links panels

<div class="columns">
	<div class="column">
		<div class="">
			<h2 class="is-size-3 has-heading-line">Literature</h2>
			<ul class="list-unstyled m-bottom-20">
				<li><a class="is-size-5 text-link" href="#">Electronic resources for researchers&nbsp;<span class="text-link-icon fa fa-arrow-right" aria-hidden="true"></span></a></li>
				<li><a class="is-size-5 text-link" href="#">Referencing and avoiding plagiarism&nbsp;<span class="text-link-icon fa fa-arrow-right" aria-hidden="true"></span></a></li>
				<li><a class="is-size-5 text-link" href="#">Special Collections&nbsp;<span class="text-link-icon fa fa-arrow-right" aria-hidden="true"></span></a></li>
				<li><a class="is-size-5 text-link" href="#">Theses&nbsp;<span class="text-link-icon fa fa-arrow-right" aria-hidden="true"></span></a></li>
			</ul>
		</div>
	</div>
	<div class="column">
		<div class="">
			<h2 class="is-size-3 has-heading-line">Publishing</h2>
			<ul class="list-unstyled m-bottom-20">
				<li><a class="is-size-5 text-link" href="#">Choose a journal&nbsp;<span class="text-link-icon fa fa-arrow-right" aria-hidden="true"></span></a></li>
				<li><a class="is-size-5 text-link" href="#">Research data management&nbsp;<span class="text-link-icon fa fa-arrow-right" aria-hidden="true"></span></a></li>
				<li><a class="is-size-5 text-link" href="#">Intellectual property and copyright&nbsp;<span class="text-link-icon fa fa-arrow-right" aria-hidden="true"></span></a></li>
				<li><a class="is-size-5 text-link" href="#">RADAR&nbsp;<span class="text-link-icon fa fa-arrow-right" aria-hidden="true"></span></a></li>
			</ul>
		</div>
	</div>
</div>

Accessibility