Card grid
Use the card grid to create collections like dashboards or navigation pages.
Sample HTML for Card grid example
<div class="ds_wrapper">
<div class="ds_card-grid-container">
<div class="ds_card-grid">
<div class="ds_card ds_card--background-secondary">
<div class="ds_card__content">
<div class="ds_card__content-header">
<span class="ds_notification-tag__wrapper">
<svg class="ds_icon" aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 34 40" width="34" height="40" fill="none">
<path d="m2.77792 33.6667c-.75 0-1.40056-.2754-1.95167-.8263-.550833-.5511-.82625-1.2016-.82625-1.9516v-21.11088c0-.75.275417-1.40056.82625-1.95167.55111-.55083 1.20167-.82625 1.95167-.82625h27.77748c.75 0 1.4006.27542 1.9517.82625.5508.55111.8262 1.20167.8262 1.95167v21.11088c0 .75-.2754 1.4005-.8262 1.9516-.5511.5509-1.2017.8263-1.9517.8263zm13.88878-12.5417c.1389 0 .2662-.0208.3821-.0625.1155-.0417.2336-.0949.3541-.1596l12.6525-8.1529c.1667-.1019.2917-.2339.375-.3958.0834-.162.125-.3402.125-.5346 0-.4261-.1851-.7549-.5554-.9863s-.7499-.2221-1.1387.0279l-12.1946 7.75-12.1667-7.75c-.38889-.25-.77319-.2616-1.15292-.0349-.37944.2269-.56916.5487-.56916.9654 0 .2036.04625.3911.13875.5625s.21291.3033.36125.3958l12.65248 8.1529c.1206.0647.2386.1179.3542.1596.1158.0417.2432.0625.3821.0625z" />
</svg>
<span class="ds_notification-tag" aria-hidden="true">12 <span class="visually-hidden">unread messages</span></span>
</span>
<h2 class="ds_card__title">Your messages <span class="visually-hidden">, 12 unread</span></h2>
</div>
<div class="ds_card__content-main">
<p>Read and reply to messages from agencies and services.</p>
<div class="ds_button-group ds_button-group--wrap">
<button class="ds_button ds_button--secondary ds_button--small">Open your mailbox</button>
</div>
</div>
</div>
</div>
<div class="ds_card ds_card--background-secondary">
<div class="ds_card__content">
<div class="ds_card__content-header">
<strong class="ds_tag" aria-hidden="true">Not started</strong>
<h2 class="ds_card__title">Side extension<span class="visually-hidden">, Not started</span></h2>
</div>
<div class="ds_card__content-main">
<p>Clackmannanshire council</p>
<div class="ds_button-group ds_button-group--wrap">
<button class="ds_button ds_button--secondary ds_button--small">View details</button>
</div>
</div>
<div class="ds_card__content-footer">
<dl class="ds_metadata ds_metadata--inline">
<div class="ds_metadata__item">
<dt class="ds_metadata__key">Last updated</dt>
<dd class="ds_metadata__value">12 December 2025</dd>
</div>
</dl>
</div>
</div>
</div>
<div class="ds_card ds_card--background-secondary">
<div class="ds_card__content">
<div class="ds_card__content-header">
<strong class="ds_tag ds_tag--green" aria-hidden="true">Completed</strong>
<h2 class="ds_card__title">Loft conversion<span class="visually-hidden">, Completed</span></h2>
</div>
<div class="ds_card__content-main">
<p>Stirling council</p>
<div class="ds_button-group ds_button-group--wrap">
<button class="ds_button ds_button--secondary ds_button--small">View details</button>
</div>
</div>
<div class="ds_card__content-footer">
<dl class="ds_metadata ds_metadata--inline">
<div class="ds_metadata__item">
<dt class="ds_metadata__key">Last updated</dt>
<dd class="ds_metadata__value">14 October 2025</dd>
</div>
</dl>
</div>
</div>
</div>
</div>
</div>
</div>How to use a card grid
Responsive behaviour
The grid is responsive by default, adapting to the viewport width.
The default behaviour changes depending on screen size.
On smaller screens cards will stack vertically as the grid changes to a single column.
The number of columns changes based on the available screen width:
- on small screens, the grid defaults to a single column
- on medium screens and larger, the grid changes to a 3-column layout
Flexible layouts
You can override these defaults if your content requires more horizontal space. For example, you can force a 2-column layout on medium screens by adding the modifier class ds_card-grid--medium-2 to the ds_card-grid element.
You can set a minimum height on all the cards in a grid by adding the modifier class ds_card-grid--min-height to the ds_card-grid element. The card navigation pattern uses this, along with the ds_card-grid--narrow modifier class, to create an easy to scan grid of navigation cards that are all the same size with smaller gaps between cards.
You can vary the size of cards to span multiple rows or columns if you need a more flexible layout than the standard 1, 2 or 3 columns by creating your own grid layouts.
Using different card types in a grid
The entire container is a link in a navigation card. If you use other cards alongside navigation cards then users might expect those to be a single link.
Perform user testing to check whether users understand how to interact with your cards.
Character limits
You should keep titles and descriptions as concise as possible.
Large amounts of text in a card may create excessive white space that make the grid layout appear imbalanced.
Evidence
Flexible sizing and mixed card types can affect how users browse.
Creating an irregular layout using cards may cause users to browse less predicably compared to a hierarchical list. Neilsen Norman research shows users’ eyes follow a semirandom pattern on a newspaper homepage.