Guidance
Use content blocks to create groups of information that are scannable and easy for users to
understand. Headlines and descriptions must be kept short, and links must clearly describe what
they are linking to. Content blocks are for small chunks of information. If you are looking to
list items such as a
series of publications, articles or other websites, consider using a list component instead. Content blocks can be used in a
variety of ways, such as:
- Creating a hierarchical structure for content-rich pages
- Highlighting important information
- Grouping related information
- When content requires multiple links
Content block
A content block can be used to separate and draw attention to key information on a page.
Make sure content blocks are always inside a container. Use a
content block group as the container for groups of more than 1 block.
Content block heading
Lorem ipsum dolor sit amet, consectetur adipsing elit doales volutpat risus tempus id.
HTML
<div class="gnb-content-block">
<h3>Content block heading</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipsing elit doales volutpat risus tempus id.
</p>
</div>
</div>
Content block group
Content block groups are used to group related information together, making it easier for users to
compare options or find related information quickly. Use content block groups to:
- Break up long pages of text or other content into smaller, more manageable chunks
- Make it easier for people to scan the page and quickly find what they're looking for
- Separate and draw attention to key information on a page
Content block heading
Lorem ipsum dolor sit amet, consectetur adipsing elit doales volutpat risus tempus
id.
Content block heading
Lorem ipsum dolor sit amet, consectetur adipsing elit doales volutpat risus tempus
id.
Content block heading
Lorem ipsum dolor sit amet, consectetur adipsing elit doales volutpat risus tempus
id.
Content block heading
Lorem ipsum dolor sit amet, consectetur adipsing elit doales volutpat risus tempus
id.
Content block heading
Lorem ipsum dolor sit amet, consectetur adipsing elit doales volutpat risus tempus
id.
HTML
<div class="gnb-content-block-group">
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3">
<div class="col">
<div class="gnb-content-block">
<h3>Content block heading</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipsing elit doales volutpat risus tempus id.
</p>
</div>
</div>
<div class="col">
<div class="gnb-content-block">
<h3>Content block heading</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipsing elit doales volutpat risus tempus id.
</p>
</div>
</div>
<div class="col">
<div class="gnb-content-block">
<h3>Content block heading</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipsing elit doales volutpat risus tempus id.
</p>
</div>
</div>
<div class="col">
<div class="gnb-content-block">
<h3>Content block heading</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipsing elit doales volutpat risus tempus id.
</p>
</div>
</div>
<div class="col">
<div class="gnb-content-block">
<h3>Content block heading</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipsing elit doales volutpat risus tempus id.
</p>
</div>
</div>
</div>
</div>
Content block with links
Content blocks with links can be used for tasks like visiting a secondary page or downloading a
document. When content requires multiple links, you can use a content block with links present the
user with multiple topic or task actions.
Content block heading
Lorem ipsum dolor sit amet, consectetur adipsing elit doales volutpat risus
tempus
id.
Download (PDF, 12.5 MB)
Content block heading
Lorem ipsum dolor sit amet, consectetur adipsing elit doales volutpat risus
tempus
id.
Content block heading
Lorem ipsum dolor sit amet, consectetur adipsing elit doales volutpat risus
tempus
id.
See more
HTML
<div class="gnb-content-block-group">
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3">
<div class="col">
<div class="gnb-content-block">
<h3>Content block heading</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipsing elit doales volutpat risus tempus id.
</p>
<p>
<a href="#">Download (PDF, 12.5 MB)</a>
</p>
</div>
</div>
<div class="col">
<div class="gnb-content-block">
<h3>Content block heading</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipsing elit doales volutpat risus tempus id.
</p>
<ul>
<li><a href="#" class="external-link">Lorem ipsum dolor sit amet</a></li>
<li><a href="#">Consectetur adipscing elit sodales</a></li>
<li><a href="#">Volutpat risus tempus id</a></li>
</ul>
</div>
</div>
<div class="col">
<div class="gnb-content-block">
<h3>Content block heading</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipsing elit doales volutpat risus tempus id.
</p>
<ul>
<li><a href="#" class="external-link">Lorem ipsum dolor sit amet</a></li>
<li><a href="#">Consectetur adipscing elit sodales</a></li>
<li><a href="#">Volutpat risus tempus id</a></li>
</ul>
<p>
<a href="#">See more</a>
</p>
</div>
</div>
</div>
</div>
Content block with icon
Only add icons to highlighted featured content, or if context is required.
Content block heading
Sed egestas velit sit amet lorem porttitor, eu posuere elit varius.
Content block heading
Sed egestas velit sit amet lorem porttitor, eu posuere elit varius.
Content block heading
Sed egestas velit sit amet lorem porttitor, eu posuere elit varius.
HTML
<div class="gnb-content-block-group">
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3">
<div class="col">
<div class="gnb-content-block">
<i class="fa-solid fa-box-archive"></i>
<h3>Content block heading</h3>
<p>
Sed egestas velit sit amet lorem porttitor, eu posuere elit varius.
</p>
</div>
</div>
<div class="col">
<div class="gnb-content-block">
<i class="fa-solid fa-mask-face"></i>
<h3>Content block heading</h3>
<p>
Sed egestas velit sit amet lorem porttitor, eu posuere elit varius.
</p>
</div>
</div>
<div class="col">
<div class="gnb-content-block">
<i class="fa-solid fa-folder-open"></i>
<h3>Content block heading</h3>
<p>
Sed egestas velit sit amet lorem porttitor, eu posuere elit varius.
</p>
</div>
</div>
</div>
</div>
Content block with icon and links
Content block heading
Sed egestas velit sit amet lorem porttitor, eu posuere elit varius.
Content block heading
Sed egestas velit sit amet lorem porttitor, eu posuere elit varius.
See more
HTML
<div class="gnb-content-block-group">
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3">
<div class="col">
<div class="gnb-content-block">
<i class="fa-solid fa-box-archive"></i>
<h3>Content block heading</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipsing elit doales volutpat risus tempus id.
</p>
<p>
<a href="#">Download (PDF, 12.5 MB)</a>
</p>
</div>
</div>
<div class="col">
<div class="gnb-content-block">
<i class="fa-solid fa-mask-face"></i>
<h3>Content block heading</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipsing elit doales volutpat risus tempus id.
</p>
<ul>
<li><a href="#" class="external-link">Lorem ipsum dolor sit amet</a></li>
<li><a href="#">Consectetur adipscing elit sodales</a></li>
<li><a href="#">Volutpat risus tempus id</a></li>
</ul>
</div>
</div>
<div class="col">
<div class="gnb-content-block">
<i class="fa-solid fa-folder-open"></i>
<h3>Content block heading</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipsing elit doales volutpat risus tempus id.
</p>
<ul>
<li><a href="#" class="external-link">Lorem ipsum dolor sit amet</a></li>
<li><a href="#">Consectetur adipscing elit sodales</a></li>
<li><a href="#">Volutpat risus tempus id</a></li>
</ul>
<p>
<a href="#">See more</a>
</p>
</div>
</div>
</div>
</div>
Content block with left icon
Content block heading
Sed egestas velit sit amet lorem porttitor, eu posuere elit varius.
Content block heading
Sed egestas velit sit amet lorem porttitor, eu posuere elit varius.
Content block heading
Sed egestas velit sit amet lorem porttitor, eu posuere elit varius.
HTML
<div class="gnb-content-block-group">
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3">
<div class="col">
<div class="gnb-content-block-icon-left">
<div class="icon">
<i class="fa-solid fa-chart-line"></i>
</div>
<div class="content">
<h3>Content block heading</h3>
<p>
Sed egestas velit sit amet lorem porttitor, eu posuere elit varius.
</p>
</div>
</div>
</div>
<div class="col">
<div class="gnb-content-block-icon-left">
<div class="icon">
<i class="fa-solid fa-user"></i>
</div>
<div class="content">
<h3>Content block heading</h3>
<p>
Sed egestas velit sit amet lorem porttitor, eu posuere elit varius.
</p>
</div>
</div>
</div>
<div class="col">
<div class="gnb-content-block-icon-left">
<div class="icon">
<i class="fa-solid fa-file-lines"></i>
</div>
<div class="content">
<h3>Content block heading</h3>
<p>
Sed egestas velit sit amet lorem porttitor, eu posuere elit varius.
</p>
</div>
</div>
</div>
</div>
</div>
Content block with image
Only add images to highlighted featured content. Please note that your images will render with a
16:9 aspect ratio whether you crop them or not.
Content block heading
Lorem ipsum dolor sit amet, consectetur adipsing elit doales volutpat risus
tempus
id.
Content block heading
Lorem ipsum dolor sit amet, consectetur adipsing elit doales volutpat risus
tempus
id.
Content block heading
Lorem ipsum dolor sit amet, consectetur adipsing elit doales volutpat risus
tempus
id.
HTML
<div class="gnb-content-block-group">
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3">
<div class="col">
<div class="gnb-content-block">
<img src="../img/your-image.jpg" alt="" />
<h3>Content block heading</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipsing elit doales volutpat risus tempus id.
</p>
</div>
</div>
<div class="col">
<div class="gnb-content-block">
<img src="../img/your-image.jpg" alt="" />
<h3>Content block heading</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipsing elit doales volutpat risus tempus id.
</p>
</div>
</div>
<div class="col">
<div class="gnb-content-block">
<img src="../img/your-image.jpg" alt="" />
<h3>Content block heading</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipsing elit doales volutpat risus tempus id.
</p>
</div>
</div>
</div>
</div>
Content block with image and links
Content block heading
Lorem ipsum dolor sit amet, consectetur adipsing elit doales volutpat risus
tempus id.
Download (PDF, 12.5 MB)
Content block heading
Lorem ipsum dolor sit amet, consectetur adipsing elit doales volutpat risus
tempus
id.
Content block heading
Lorem ipsum dolor sit amet, consectetur adipsing elit doales volutpat risus
tempus
id.
See more
HTML
<div class="gnb-content-block-group">
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3">
<div class="col">
<div class="gnb-content-block">
<img src="../img/your-image.jpg" alt="" />
<h3>Content block heading</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipsing elit doales volutpat risus tempus id.
</p>
<p>
<a href="#">Download (PDF, 12.5 MB)</a>
</p>
</div>
</div>
<div class="col">
<div class="gnb-content-block">
<img src="../img/your-image.jpg" alt="" />
<h3>Content block heading</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipsing elit doales volutpat risus tempus id.
</p>
<ul>
<li><a href="#" class="external-link">Lorem ipsum dolor sit amet</a></li>
<li><a href="#">Consectetur adipscing elit sodales</a></li>
<li><a href="#">Volutpat risus tempus id</a></li>
</ul>
</div>
</div>
<div class="col">
<div class="gnb-content-block">
<img src="../img/your-image.jpg" alt="" />
<h3>Content block heading</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipsing elit doales volutpat risus tempus id.
</p>
<ul>
<li><a href="#" class="external-link">Lorem ipsum dolor sit amet</a></li>
<li><a href="#">Consectetur adipscing elit sodales</a></li>
<li><a href="#">Volutpat risus tempus id</a></li>
</ul>
<p>
<a href="#">See more</a>
</p>
</div>
</div>
</div>
</div>
