Explore the system

Get started

Get the tools and building blocks to design and develop consistent and accessible experiences.

Start developing Start designing

Content lists

Content lists are used to display search results or links to other resources.

Guidance

Content lists are an effective way to list items such as search results, articles, publications, or other resources. Content lists are a navigation pattern. The information presented in a content list must describe what the list item navigates to. Content lists consist of the following parts:

Do

  • Keep content list title links and descriptions short.
  • List links should be no more than 140 characters, or approximately 20 words.
  • List descriptions should be no more than 280 characters, or approximately 40 words.
  • Links and descriptions should be truncated if they exceed the recommended limits.
  • Links and descriptions should match the heading and lead text description of the page they are navigating to.
  • Use an external link class if the list item link is navigating to a page on another website.
  • Use pagination if the list is displaying more than 12 results.

Don’t

  • Use a list without descriptions.
  • Add inline links in the link descriptions.
  • Add buttons or other elements to the list content.
  • Use labels or dates unless it adds value to the user.
  • Mix and match list item types. Only one list item type may appear per list.

Content list

HTML

<ul class="gnb-content-list">
	<li>
		<a href="#">Lorem ipsum dolor sit amet consectetur adipiscing</a>
		<p>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eu tincidunt ipsum. Etiam tempus vulputate enim, id fermentum magna tempus ut.
		</p>
	</li>
	<li>
		<a href="#" class="external-link">Lorem ipsum dolor sit amet consectetur adipiscing</a>
		<p>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eu tincidunt ipsum. Etiam tempus vulputate enim, id fermentum magna tempus ut.
		</p>
	</li>
	<li>
		<a href="#">Lorem ipsum dolor sit amet consectetur adipiscing</a>
		<p>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eu tincidunt ipsum. Etiam tempus vulputate enim, id fermentum magna tempus ut.
		</p>
	</li>
</ul>

Content list with URL

HTML

<ul class="gnb-content-list">
	<li>
		<a href="#">Lorem ipsum dolor sit amet consectetur adipiscing</a>
		<p class="url">https://gnb.ca/topic/title/</p>
		<p>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eu tincidunt ipsum. Etiam tempus vulputate enim, id fermentum magna tempus ut.
		</p>
	</li>
	<li>
		<a href="#">Lorem ipsum dolor sit amet consectetur adipiscing</a>
		<p class="url">https://gnb.ca/topic/title/</p>
		<p>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eu tincidunt ipsum. Etiam tempus vulputate enim, id fermentum magna tempus ut.
		</p>
	</li>
	<li>
		<a href="#">Lorem ipsum dolor sit amet consectetur adipiscing</a>
		<p class="url">https://gnb.ca/topic/title/</p>
		<p>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eu tincidunt ipsum. Etiam tempus vulputate enim, id fermentum magna tempus ut.
		</p>
	</li>	
</ul>

Content list with meta information

Category

HTML

<ul class="gnb-content-list">
	<li>
		<p class="gnb-label">Category</p>
		<a href="#">Lorem ipsum dolor sit amet consectetur adipiscing</a>
		<p>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eu tincidunt ipsum. Etiam tempus vulputate enim, id fermentum magna tempus ut.
		</p>
	</li>
</ul>

Date

HTML

<ul class="gnb-content-list">
	<li>
		<p class="gnb-date">May 17 2024</p>
		<a href="#">Lorem ipsum dolor sit amet consectetur adipiscing</a>
		<p>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eu tincidunt ipsum. Etiam tempus vulputate enim, id fermentum magna tempus ut.
		</p>
	</li>
</ul>

Category and date

HTML

<ul class="gnb-content-list">
	<li>
		<p class="gnb-label">Category</p>
		<p class="gnb-date">May 17 2024</p>
		<a href="#">Lorem ipsum dolor sit amet consectetur adipiscing</a>
		<p>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eu tincidunt ipsum. Etiam tempus vulputate enim, id fermentum magna tempus ut.
		</p>
	</li>
</ul>

Tags

HTML

<ul class="gnb-content-list">
	<li>
		<a href="#">Lorem ipsum dolor sit amet consectetur adipiscing</a><
		<p>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eu tincidunt ipsum. Etiam tempus vulputate enim, id fermentum magna tempus ut.
		</p>
		<p>
			<a class="gnb-tag" href="">Link tag</a>
			<a class="gnb-tag" href="">Link tag</a>
			<a class="gnb-tag" href="">Link tag</a>
		</p>
	</li>
</ul>

Content list with images

HTML

<ul class="gnb-content-list-img">
	<li>
		<div class="img">
			<img src="img/your-image.jpg" alt="Image description" />
		</div>
		<div class="content">
			<p class="gnb-date">May 17 2024</p>
			<h3><a href="#">Lorem ipsum dolor sit amet consectetur adipiscing</a></h3>
			<p>
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eu tincidunt ipsum. Etiam tempus vulputate enim, id fermentum magna tempus ut.
			</p>
		</div>
	</li>
	<li>
		<div class="img">
			<img src="img/your-image.jpg" alt="Image description" />
		</div>
		<div class="content">
			<p class="gnb-date">May 17 2024</p>
			<h3><a href="#">Lorem ipsum dolor sit amet consectetur adipiscing</a></h3>
			<p>
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eu tincidunt ipsum. Etiam tempus vulputate enim, id fermentum magna tempus ut.
			</p>
		</div>
	</li>
	<li>
		<div class="img">
			<img src="img/your-image.jpg" alt="Image description" />
		</div>
		<div class="content">
			<p class="gnb-date">May 17 2024</p>
			<h3><a href="#">Lorem ipsum dolor sit amet consectetur adipiscing</a></h3>
			<p>
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eu tincidunt ipsum. Etiam tempus vulputate enim, id fermentum magna tempus ut.
			</p>
		</div>
	</li>
</ul>