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
Static title
-
Example title Example optional description of the title.
Linked title
Linked title, with grey background
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.
Static title
-
Example title Example optional description of the title.
Linked title
Linked title, with grey background
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>