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.9)

Note

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

Catalogue group

The catalogue group pattern is used to display a group of links. It is composed of a title – which can be a link or static text – and a list of links beneath. The title may contain an icon for decorative purposes. A short description may also be added to provide some context to the user.

There are two list styles available: simple or arrowed. There are two background colours available: transparent or light grey.

Multiple catalogue groups may be placed on a page (in Bootstrap grid columns) to create a directory for different types of links. See example on calgary.ca.

Demo

Normal

With arrowed list

The arrowed list style provides additional styling for the link list. Each list item is bordered on the top and bottom, contains more vertical whitespace, and has an right-pointing arrow to provide a strong visual cue that that the list item is a link.

Code


<!-- Static title -->
<!-- Add the class `bg-light` for a light grey background -->
<ul class="cui catalogue-group {{ bg-light }}">
	<li>
		<!-- For a static title, any heading tag can be used as long as it has the class `group-title` -->
		<h3 class="group-title">
			<!-- Optional decorative icon -->
			<span class="{{ Icon class (e.g. cicon-home) }}" aria-hidden="true"></span>
			<span class="group-title-text">{{ Title }}</span>
			<span class="group-title-desc">{{ Optional description }}</span>
		</h3>
		<!-- Add the class `arrowed` for the arrowed and bordered list style -->
		<ul class="group-links {{ arrowed }}">
			<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>
	</li>
</ul>

<!-- Linked title -->
<!-- Add the class `bg-light` for a light grey background -->
<ul class="cui catalogue-group {{ bg-light }}">
	<li>
		<a class="group-title" href="{{ URL }}">
			<!-- Optional decorative icon -->
			<span class="{{ Icon class (e.g. cicon-home) }}" aria-hidden="true"></span>
			<span class="group-title-text">{{ Title }}</span>
			<span class="group-title-desc">{{ Optional description }}</span>
		</a>
		<!-- Add the class `arrowed` for the arrowed and bordered list style -->
		<ul class="group-links {{ arrowed }}">
			<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>
	</li>
</ul>