Information This site is moving

The Pattern Library is moving to its new home on the Summit design system site.

Go to the Summit site
Pattern Library (ver. 1.8)

Note

This page is archived under version 1.8 and is available for reference purposes only. The latest version of Pattern Library is 2.

Menus

Other navigation

Related links

Code


<nav aria-label="{{ Label for Assistive Technology users (e.g. Related links) }}">
	<!-- Any heading tag may be used as long as the class `related-links-title` is used -->
	<h3 class="related-links-title">Related links</h3>
	<ul class="cui list-widget regular-link">
		<li><a href="{{ URL }}">{{ Link text }}</a></li>
		<li><a href="{{ URL }}">{{ Link text }}</a></li>
		<li><a href="{{ URL }}">{{ Link text }}</a></li>
	</ul>
</nav>

Arrowed list style

Code


<nav aria-label="{{ Label for Assistive Technology users (e.g. Main menu) }}">
	<ul class="cui list-widget arrowed">
		<!-- If the first list item is the most important, a <strong> tag may be used to bold it.
			 Only the first list item may be bolded. -->
		<li><a href="{{ URL }}"><strong>{{ Link name }}</strong></a></li>
		<li><a href="{{ URL }}">{{ Link name }}</a></li>
		<li><a href="{{ URL }}">{{ Link name }}</a></li>
	</ul>
</nav>