Guidance
Cards are a navigation pattern. The information presented in a card must describe the product, service, or content the card navigates to. Choose text, images and icons carefully, and only add images or icons to highlight featured content or if context is required. Cards are made up of the following parts:
- Heading: The title of the product, service, or content the card navigates to.
- Link: The location of the destination product, service, or content.
- Description: A short description that accurately describes the destination what can be learned or be achieved there. This provides users with the context they need to decide if they want to click on the card or not.
- Meta information (optional): Meta information communicates that the card belongs to a category.
- Image (optional): Images highlight featured and promotional content or provide more context when necessary.
- Icon (optional): Icons highlight featured content or provide more context when necessary.
Do
- Use cards as topic, subtopic and destination navigation.
- Keep card headings and descriptions short. Card headings should be 1-2 rows descriptions 2-3 rows.
- Match card headings and descriptions to the page heading and lead text description of the page they are navigating to.
- Separate different card groupings with sections or horizontal rules, and introduce them
with
<h2>headings. - Use card with image for featured content.
- Use card with image overlay for promotional content.
- Use an external link icon class if the card is navigating to a page on another website.
Don’t
- Use cards for content that is not intended as navigation. Use content blocks instead.
- Card headings should never exceed 3 rows and descriptions should never exceed 5.
- Don’t mix and match card types in the same grouping. Only one card type may appear per group.
- Groupings must be separated by a heading.
- Don’t add inline links in card content.
- Use cards to link directly to documents such as PDFs. Use a content block with links instead.
Card
Card heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit sodales volutpat risus tempus id.
HTML
<div class="gnb-card">
<div class="gnb-card-body">
<h3><a href="#">Card heading</a></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit sodales volutpat risus tempus id.</p>
</div>
</div>
Card group
When displaying more than one card together, always wrap them within a card group. The
.gnb-card-group ensures that all cards within a group align and sort properly. It also
ensures that all cards in a row have equal heights.
Card heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit sodales volutpat risus tempus id.
Card heading with external link
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Card heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Card heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Card heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit sodales volutpat risus tempus id.
HTML
<div class="gnb-card-group">
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3">
<div class="col">
<div class="gnb-card">
<div class="gnb-card-body">
<h3><a href="#">Card heading</a></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit sodales volutpat risus tempus id.</p>
</div>
</div>
</div>
<div class="col">
<div class="gnb-card">
<div class="gnb-card-body">
<h3><a href="#">Card heading with external link</a></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
<div class="col">
<div class="gnb-card">
<div class="gnb-card-body">
<h3><a href="#">Card heading</a></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
</div>
</div>
Card with meta information
Meta information is used to communicate if a card belongs to a particular category, such as a tag, topic, theme, or type. It should be no more than one or two words. Only add meta information if the additional context provides value to the user.
Card heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit sodales volutpat risus tempus id.
Card heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit sodales volutpat risus tempus id.
Card heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit sodales volutpat risus tempus id.
HTML
<div class="gnb-card-group">
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3">
<div class="col">
<div class="gnb-card">
<div class="gnb-card-body">
<span class="gnb-card-meta">Category</span>
<h3><a href="#">Card heading</a></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit sodales volutpat risus tempus id.</p>
</div>
</div>
</div>
<div class="col">
<div class="gnb-card">
<div class="gnb-card-body">
<span class="gnb-card-meta">Category</span>
<h3><a href="#">Card heading</a></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit sodales volutpat risus tempus id.</p>
</div>
</div>
</div>
<div class="col">
<div class="gnb-card">
<div class="gnb-card-body">
<span class="gnb-card-meta">Category</span>
<h3><a href="#">Card heading</a></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit sodales volutpat risus tempus id.</p>
</div>
</div>
</div>
</div>
</div>
Card with image
Cards with images can be used to highlight featured content or provide more context when necessary. Images should always be resized and optimized for web. This component will crop your image to the correct aspect ratio.
Card heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit sodales volutpat risus tempus id.
Card heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit sodales volutpat risus.
Card heading
Lorem ipsum dolor sit amet, consectetur adipiscing.
HTML
<div class="gnb-card-group">
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3">
<div class="col">
<div class="gnb-card">
<img src="../img/your-image.jpg" alt="">
<div class="gnb-card-body">
<h3><a href="#">Card heading</a></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit sodales volutpat risus tempus id.</p>
</div>
</div>
</div>
<div class="col">
<div class="gnb-card">
<img src="../img/your-image.jpg" alt="">
<div class="gnb-card-body">
<h3><a href="#">Card heading</a></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit sodales volutpat risus.</p>
</div>
</div>
</div>
<div class="col">
<div class="gnb-card">
<img src="../img/your-image.jpg" alt="">
<div class="gnb-card-body">
<h3><a href="#">Card heading</a></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing.</p>
</div>
</div>
</div>
</div>
</div>
Card with image and meta information
This card type is used to communicate the category of featured content.
Card heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit sodales volutpat risus tempus id.
Card heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit sodales volutpat risus tempus id.
Card heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit sodales volutpat risus tempus id.
HTML
<div class="gnb-card-group">
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3">
<div class="col">
<div class="gnb-card">
<img src="../img/your-image.jpg" alt="">
<div class="gnb-card-body">
<span class="gnb-card-meta">Category</span>
<h3><a href="#">Card heading</a></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit sodales volutpat risus tempus id.</p>
</div>
</div>
</div>
<div class="col">
<div class="gnb-card">
<img src="../img/your-image.jpg" alt="">
<div class="gnb-card-body">
<span class="gnb-card-meta">Category</span>
<h3><a href="#">Card heading</a></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit sodales volutpat risus tempus id.</p>
</div>
</div>
</div>
<div class="col">
<div class="gnb-card">
<img src="../img/your-image.jpg" alt="">
<div class="gnb-card-body">
<span class="gnb-card-meta">Category</span>
<h3><a href="#">Card heading</a></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit sodales volutpat risus tempus id.</p>
</div>
</div>
</div>
</div>
</div>
Card with icon
Icons can be used to highlight featured content or provide more context when necessary. Don’t overuse icons and choose icons that look the most like the thing they represent. Only used the approved icon library and follow the Government of New Brunswick Design System iconography guidance.
Card heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit sodales volutpat risus tempus id.
Card heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit sodales volutpat risus tempus id.
Card heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit sodales volutpat risus tempus id.
HTML
<div class="gnb-card-group">
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3">
<div class="col">
<div class="gnb-card">
<div class="gnb-card-body">
<i class="fa-solid fa-arrow-trend-up"></i>
<h3><a href="#">Card heading</a></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit sodales volutpat risus tempus id.</p>
</div>
</div>
</div>
<div class="col">
<div class="gnb-card">
<div class="gnb-card-body">
<i class="fa-solid fa-shield-halved"></i>
<h3><a href="#">Card heading</a></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit sodales volutpat risus tempus id.</p>
</div>
</div>
</div>
<div class="col">
<div class="gnb-card">
<div class="gnb-card-body">
<i class="fa-solid fa-mobile-screen"></i>
<h3><a href="#">Card heading</a></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit sodales volutpat risus tempus id.</p>
</div>
</div>
</div>
</div>
</div>
Card with image overlay
This card type should be used sparingly and is reserved for highlighting featured and promotional content. Card headings and descriptions are bottom-aligned. Images should always be resized and optimized for web. This component will crop your image to the correct aspect ratio.
HTML
<div class="gnb-card-group">
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3">
<div class="col">
<div class="gnb-card gnb-card-background-img" style="background-image: url(../img/your-image.jpg)">
<div class="gnb-card-img-overlay">
<h3><a href="#">Card heading</a></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
<div class="col">
<div class="gnb-card gnb-card-background-img" style="background-image: url(../img/your-image.jpg)">
<div class="gnb-card-img-overlay">
<h3><a href="#">Card heading</a></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit sodales volutpat risus tempus id.</p>
</div>
</div>
</div>
<div class="col">
<div class="gnb-card gnb-card-background-img" style="background-image: url(../img/your-image.jpg)">
<div class="gnb-card-img-overlay">
<h3><a href="#" class="external-link">Card heading with external link</a></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit sodales volutpat risus tempus id.</p>
</div>
</div>
</div>
</div>
</div>
Card with image overlay and meta information
This card type should be used sparingly and is reserved for highlighting featured and promotional content. Card headings and descriptions are bottom-aligned. Images should always be resized and optimized for web. This component will crop your image to the correct aspect ratio.
HTML
<div class="gnb-card-group">
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3">
<div class="col">
<div class="gnb-card gnb-card-background-img" style="background-image: url(../img/your-image.jpg)">
<div class="gnb-card-img-overlay">
<span class="gnb-card-meta">Category</span>
<h3><a href="#">Card heading</a></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
<div class="col">
<div class="gnb-card gnb-card-background-img" style="background-image: url(../img/your-image.jpg)">
<div class="gnb-card-img-overlay">
<span class="gnb-card-meta">Category</span>
<h3><a href="#">Card heading</a></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit sodales volutpat risus tempus id.</p>
</div>
</div>
</div>
<div class="col">
<div class="gnb-card gnb-card-background-img" style="background-image: url(../img/your-image.jpg)">
<div class="gnb-card-img-overlay">
<span class="gnb-card-meta">Category</span>
<h3><a href="#" class="external-link">Card heading with external link</a></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit sodales volutpat risus tempus id.</p>
</div>
</div>
</div>
</div>
</div>