We use cookies to collect anonymous data to help us improve your site browsing experience.

Click 'Accept all cookies' to agree to all cookies that collect anonymous data. To only allow the cookies that make the site work, click 'Use essential cookies only.' Visit 'Set cookie preferences' to control specific cookies.

Set cookie preferences

Your cookie preferences have been saved. You can change your cookie settings at any time.

Help us improve the Design System by taking our short survey.

NewComponents

Card

Published
21 April 2026
A card is a container to group information.

A card can include:

  • a heading
  • formatted content
  • icons, like an envelope to represent a message
  • notification tags, which show a number, symbol or dot
  • status tags, usually a 1 or 2 word status
  • an image or data visualisation

A navigation card is a variant where the entire card acts as a link. This means it cannot include:

  • buttons
  • links within the text

When to use a card

Adapt cards to meet your users’ needs.

Most elements are optional. A simple card may only include a heading and a short summary.

Open this example in a new window

Sample HTML 

<div class="ds_card">
    <div class="ds_card__content">
        <div class="ds_card__content-header">
            <h2 class="ds_card__title">Your next payment</h2>
        </div>
        <div class="ds_card__content-main">
            <p>&pound;315 will be taken on 11 December 2026.</p>
        </div>
    </div>
</div>

Cards can include additional information, using a status tag and metadata, or include interactive elements, like buttons.

Open this example in a new window

Sample HTML 

<div class="ds_card">
    <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>

Cards can also give users information using icons and notification tags.

Open this example in a new window

Sample HTML 

<div class="ds_card">
    <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>

Navigation card

If the only function of the card is to send users to a single destination then use a navigation card.

For example, use navigation cards in navigational pages.

Open this example in a new window

Sample HTML 

<div class="ds_card  ds_card--navigation">
    <div class="ds_card__content">
        <div class="ds_card__content-header">
            <h2 class="ds_card__title">
                <a class="ds_card__link  ds_card__link--cover" href="#">Owning a home</a>
            </h2>
        </div>
        <div class="ds_card__content-main">
            <p>Information on buying, taxing, keeping and selling a home</p>
        </div>
    </div>
</div>

How to use a card

Content within a card should be concise – your card can link to more detailed information where needed.

You can combine cards in a grid to build collections. For example:

Headings

Card headings are H2 by default. Change this if it breaks the page’s heading hierarchy.

In a navigation card the heading is the link. 

The heading becomes underlined when hover and focus states are activated for the whole card.

A navigation card cannot include any interactive elements such as buttons or other links.

Icons

There is an option to add an icon above the heading in a card.

Only use icons:

Icons for the card component are added as SVG files and optimised for display at larger sizes using the following Material settings:

  • weight 400
  • grade 200
  • optical size 40px
  • rounded

Increase the icon size to 40px in the download options.

The downloaded SVG icon can then be edited in a free vector design tool such as Figma to remove the default left and right padding. This step is included to align the icon with the other card content.

The SVG height should be fixed at 40px, the icon will be automatically scaled 8px larger for desktop sizes.

Use an ARIA label to tell screen readers that icons are decorative.

Open this example in a new window

Sample HTML 

<!-- Copy and paste the SVG tag to use the example icons in your own cards -->

<span class="visually-hidden">Settings icon</span>
<svg class="ds_icon" aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 33 40" width="33" height="40" fill="none">
    <path d="m13.7908 36.6667c-.5092 0-.956-.1667-1.3405-.5-.3841-.3334-.6133-.75-.6875-1.25l-.5416-3.5279c-.4722-.1759-.956-.4073-1.45127-.6942-.49528-.2872-.94208-.5882-1.34042-.9029l-3.24999 1.4721c-.49056.213-.98125.2362-1.47209.0695-.49083-.1666-.87514-.4768-1.15291-.9304l-2.263755-4.0279c-.2777775-.4536-.3565275-.9304-.2362497-1.4304.1205557-.5.3891667-.9121.8058327-1.2363l2.958332-2.1945c-.04639-.2314-.07416-.4836-.08333-.7567-.00945-.2733-.01417-.5257-.01417-.7571s.00472-.4837.01417-.7571c.00917-.273.03694-.5252.08333-.7566l-2.958332-2.1946c-.416666-.3242-.685277-.7363-.8058327-1.2363-.1202778-.5-.0415278-.9768.2362497-1.4304l2.263755-4.02791c.27777-.45361.66208-.76375 1.15291-.93041.49084-.16667.98153-.14348 1.47209.06958l3.24999 1.47204c.39834-.31468.84751-.61565 1.34751-.90287.49998-.28695.98138-.50917 1.44418-.66667l.5416-3.55542c.0742-.5.3034-.91666.6875-1.25.3845-.33333.8313-.5 1.3405-.5h4.5833c.5092 0 .956.16667 1.3404.5.3842.33334.6133.75.6875 1.25l.5417 3.52792c.4722.17583.9605.40264 1.465.68042.5047.27778.9469.58333 1.3266.91662l3.25-1.47204c.4906-.21306.9767-.23625 1.4584-.06958.4814.16666.861.4768 1.1387.93041l2.2917 4.02791c.2778.4536.3565.9351.2362 1.4446-.1205.5092-.3891.9165-.8058 1.2221l-2.9583 2.1387c.0464.25.0742.5117.0833.785.0095.2731.0142.5346.0142.7846s-.0047.507-.0142.7708c-.0091.2639-.0415.5209-.0971.7709l2.9584 2.1666c.4166.3056.6851.713.8054 1.2221.1205.5095.0419.991-.2359 1.4446l-2.2779 4.0279c-.2777.4536-.662.7638-1.1529.9304-.4905.1667-.9812.1435-1.4721-.0695l-3.2221-1.4721c-.3983.3147-.8427.6203-1.3333.9166-.4908.2964-.9769.5232-1.4583.6805l-.5417 3.5279c-.0742.5-.3033.9166-.6875 1.25-.3844.3333-.8312.5-1.3404.5zm2.3195-11.1113c1.537 0 2.8471-.5416 3.9305-1.625 1.0833-1.0833 1.625-2.3934 1.625-3.9304 0-1.5369-.5417-2.8471-1.625-3.9304-1.0834-1.0833-2.3935-1.625-3.9305-1.625-1.5463 0-2.8588.5417-3.9375 1.625-1.0788 1.0833-1.6183 2.3935-1.6183 3.9304 0 1.537.5395 2.8471 1.6183 3.9304 1.0787 1.0834 2.3912 1.625 3.9375 1.625z" />
</svg>

<span class="visually-hidden">Info icon</span>
<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="m16.755 28.3333c.3947 0 .724-.133.9879-.3991.2639-.2664.3959-.5963.3959-.9896v-7.2225c0-.3933-.1335-.7232-.4005-.9896-.2672-.2661-.5983-.3992-.9933-.3992-.3947 0-.724.1331-.9879.3992-.2639.2664-.3958.5963-.3958.9896v7.2225c0 .3933.1334.7232.4004.9896.2672.2661.5983.3991.9933.3991zm-.0887-13.1666c.4169 0 .7666-.1385 1.0491-.4154.2822-.2767.4234-.6198.4234-1.0292 0-.425-.141-.7813-.423-1.0688-.2822-.2875-.6318-.4312-1.0487-.4312-.417 0-.7667.1437-1.0492.4312-.2822.2875-.4233.6438-.4233 1.0688 0 .4094.141.7525.4229 1.0292.2822.2769.6318.4154 1.0488.4154zm.0079 21.5c-2.3009 0-4.4629-.4375-6.4863-1.3125-2.02332-.875-3.7897-2.0671-5.29915-3.5763-1.50917-1.5094-2.70125-3.2765-3.57625-5.3012s-1.3125-4.1882-1.3125-6.4904c0-2.3023.4375-4.4659 1.3125-6.4909.875-2.0247 2.06708-3.78706 3.57625-5.28706 1.50945-1.5 3.27653-2.6875 5.30125-3.5625 2.0247-.875 4.1882-1.3125 6.4904-1.3125s4.4659.4375 6.4909 1.3125c2.0247.875 3.787 2.0625 5.287 3.5625s2.6875 3.26386 3.5625 5.29166 1.3125 4.192 1.3125 6.4925c0 2.3008-.4375 4.4629-1.3125 6.4863-.875 2.0233-2.0625 3.7879-3.5625 5.2937s-3.2639 2.6981-5.2916 3.5767c-2.0278.8783-4.192 1.3175-6.4925 1.3175z" />
</svg>

<span class="visually-hidden">Mail icon</span>
<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="visually-hidden">Article icon</span>
<svg class="ds_icon" aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 40" width="30" height="40" fill="none">
    <path d="m2.77792 35c-.75 0-1.40056-.2754-1.95167-.8262-.550833-.5512-.82625-1.2017-.82625-1.9517v-24.44418c0-.75.275417-1.40056.82625-1.95167.55111-.55083 1.20167-.82625 1.95167-.82625h24.44418c.75 0 1.4005.27542 1.9517.82625.5508.55111.8262 1.20167.8262 1.95167v24.44418c0 .75-.2754 1.4005-.8262 1.9517-.5512.5508-1.2017.8262-1.9517.8262zm5.19416-6.6387h8.75002c.3936 0 .7235-.1337.9896-.4009.2664-.2672.3995-.5982.3995-.9929 0-.395-.1331-.7244-.3995-.9883-.2661-.2639-.596-.3959-.9896-.3959h-8.75002c-.39333 0-.72319.1336-.98958.4009-.26611.2669-.39917.5979-.39917.9929s.13306.7244.39917.9883c.26639.2639.59625.3959.98958.3959zm0-6.9726h14.05582c.3933 0 .7232-.1334.9896-.4004.2661-.2672.3992-.5983.3992-.9933 0-.3947-.1331-.724-.3992-.9879-.2664-.2639-.5963-.3959-.9896-.3959h-14.05582c-.39333 0-.72319.1335-.98958.4005-.26611.2672-.39917.5983-.39917.9933 0 .3947.13306.724.39917.9879.26639.2639.59625.3958.98958.3958zm0-6.972h14.05582c.3933 0 .7232-.1336.9896-.4009.2661-.2669.3992-.5979.3992-.9929s-.1331-.7244-.3992-.9883c-.2664-.2639-.5963-.3958-.9896-.3958h-14.05582c-.39333 0-.72319.1336-.98958.4008-.26611.2672-.39917.5982-.39917.9929 0 .395.13306.7244.39917.9883.26639.2639.59625.3959.98958.3959z" />
</svg>

<span class="visually-hidden">Notifications icon</span>
<svg class="ds_icon" aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27 40" width="27" height="40" fill="none">
    <path d="m1.38875 31.6667c-.398055 0-.729028-.132-.992917-.3959-.263889-.2638-.395833-.5948-.395833-.9929 0-.3983.131944-.7294.395833-.9933s.594862-.3958.992917-.3958h1.94458v-12.3334c0-2.3239.68987-4.4002 2.06959-6.2291 1.37944-1.82865 3.18958-2.99296 5.43038-3.49296v-1c0-.69444.2431-1.28472.7292-1.77083s1.0764-.72917 1.7708-.72917c.6945 0 1.2848.24306 1.7709.72917s.7291 1.07639.7291 1.77083v1c2.2409.5 4.051 1.66431 5.4305 3.49296 1.3797 1.8289 2.0695 3.9052 2.0695 6.2291v12.3334h1.9446c.3981 0 .729.1319.9929.3958s.3959.595.3959.9933c0 .3981-.132.7291-.3959.9929-.2639.2639-.5948.3959-.9929.3959zm11.94455 5c-.9166 0-1.7014-.3264-2.3541-.9792-.6528-.6528-.9792-1.4375-.9792-2.3542h6.6667c0 .9167-.3264 1.7014-.9792 2.3542s-1.4375.9792-2.3542.9792z" />
</svg>

<span class="visually-hidden">Folder icon</span>
<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-.2802-1.95167-.8404-.550833-.56-.82625-1.2059-.82625-1.9375v-21.11088c0-.73167.275417-1.3775.82625-1.9375.55111-.56028 1.20167-.84042 1.95167-.84042h9.98588c.3705 0 .7294.07403 1.0766.22208.3472.14834.6459.3475.8959.5975l1.9583 1.95834h13.8608c.7317 0 1.3775.27998 1.9375.83998.5603.5603.8404 1.2061.8404 1.9375v18.3334c0 .7316-.2801 1.3775-.8404 1.9375-.56.5602-1.2058.8404-1.9375.8404z" />
</svg>

Notification tags and status tags

Notification tags must:

  • use a number or dot to tell the user there’s been a change
  • be used with an icon

If the number is above 99, the user should see 99+.

Use a dot to indicate changes that cannot be expressed as a number by adding the modifier class ds_notification-tag--dot.

Notification tags should reflect the current state.

For example, the number in a messages tag should decrease as messages are read by a user.  

Status tags should be 1 or 2 words which tell the user about what stage something is at.

A card can have both status and notification tags. But each tag should:

  • give the user different information
  • not visually overlap with each other

Images or data visualisation

Avoid images unless essential, as they can increase cognitive load and may not work well on all screen sizes.

For cards to display uniformly in a grid either:

  • use the same size of image in every card
  • place them within a particular ratio of aspect box

When using images in an aspect box you should:

  • centre the subject of your image so it stays visible
  • avoid having key visual details at the far edges of the image

2 highland cows with overlay to show parts of image at top at bottom would be cut off

In this example, part of the cow’s horn is cut off when a 21:9 aspect ratio is used.

If visualising data, consider using HTML charts for improved accessibility.

Do not put charts in an aspect box as some information may be hidden at certain sizes.

For more information see our:

Formatted content

Cards are a container for a range of content.

This should be placed below the card’s main heading.

If using buttons these should be:

  • in a button group
  • at the bottom of the card

Find more information on how to use buttons in the Design System.

Horizontal layout

Images appear above the other content unless triggered to move to the left – known as a horizontal layout – by:

  • giving the card an adaptive width
  • making the card horizontal at small sizes
  • making the card always display horizontally

Adaptive width

A card placed within an element with the ds_card-container class will change to a horizontal layout when it becomes wider than 448px. This is the same width as the “small” breakpoint with allowance for 16px spacing on either side of the card.

Open this example in a new window

Sample HTML 

<div class="ds_card-container">
    <div class="ds_card  ds_card--hover">
        <div class="ds_card__media">
            <img alt="" aria-hidden="true" src="/binaries/content/gallery/designsystem/examples/category-header-design-standards-svg"/>
        </div>
        <div class="ds_card__content">
            <div class="ds_card__content-header">
                <h2 class="ds_card__title">
                    <a class="ds_card__link  ds_card__link--cover" href="#">Design Standards</a>
                </h2>
            </div>
            <div class="ds_card__content-main">
                <p>The patterns included here have been developed for use by government, public sector and third sector non-commercial organisations in Scotland</p>
            </div>
            <div class="ds_card__content-footer">
                <dl class="ds_metadata ds_metadata--inline ">
                    <div class="ds_metadata__item">
                        <dt class="ds_metadata__key">Publish date</dt>
                        <dd class="ds_metadata__value">13 August 2025</dd>
                    </div>
                </dl>
            </div>
        </div>
    </div>
</div>

Horizontal at small sizes

There may be cases where horizontal cards are also desired at small breakpoint size. This can be implemented by adding the ds_card—horizontal-small class modifier to the ds_card element.

Always horizontal

To make a card always display horizontally add the ds_card—horizontal class modifier to the ds_card element.

To make an image match the height of the horizontal card add the ds_card__media—cover modifier to the ds_card__media element and use in combination with the aspect box.

Images within a horizontal card can be set to take up less or more available width by using the following modifiers:

  • ds_card__media—narrow
  • ds_card__media—wide
Open this example in a new window

Sample HTML 

<div class="ds_card  ds_card--hover  ds_card--horizontal">
    <div class="ds_card__media  ds_card__media--cover  ds_card__media--narrow">
        <div class="ds_aspect-box">
        <img alt="" aria-hidden="true" class="ds_aspect-box__inner"src="/binaries/content/gallery/designsystem/examples/highland-cow-jpg"/>
        </div>
    </div>
    <div class="ds_card__content">
        <div class="ds_card__content-header">
            <h2 class="ds_card__title">
                <a class="ds_card__link  ds_card__link--cover" href="#">Scottish agriculture</a>
            </h2>
        </div>
        <div class="ds_card__content-main">
            <p>Ensuring a thriving agriculture sector for Scotland's farmers, crofters and growers</p>
        </div>
    </div>
</div>

Background colour

Cards can be placed on a secondary or tertiary background to improve contrast.

If using a white background, cards can instead have a background colour applied by using the ds_card—background-secondary modifier class.

Find more information on how to use colour in the Design System. 

Metadata

When using metadata like dates, anchor to the bottom of the card content area.

This ensures alignment across the grid, even if the text length varies between cards.

Cognitive load

The features within a card can help important information stand out.

But combining multiple features can create a high level of ‘noise’.

Find out more about cognitive accessibility from the W3C Web Accessibility Initiative (WAI).

The following example shows a card with most available features included.

Open this example in a new window

Sample HTML 

<div class="ds_card  ds_card--background-secondary">
    <div class="ds_card__media">
        <img alt="" aria-hidden="true" src="/binaries/content/gallery/designsystem/examples/category-header-design-standards-svg"/>
    </div>
    <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 30 40" width="30" height="40" fill="none">
                    <path d="m2.77792 35c-.75 0-1.40056-.2754-1.95167-.8262-.550833-.5512-.82625-1.2017-.82625-1.9517v-24.44418c0-.75.275417-1.40056.82625-1.95167.55111-.55083 1.20167-.82625 1.95167-.82625h24.44418c.75 0 1.4005.27542 1.9517.82625.5508.55111.8262 1.20167.8262 1.95167v24.44418c0 .75-.2754 1.4005-.8262 1.9517-.5512.5508-1.2017.8262-1.9517.8262zm5.19416-6.6387h8.75002c.3936 0 .7235-.1337.9896-.4009.2664-.2672.3995-.5982.3995-.9929 0-.395-.1331-.7244-.3995-.9883-.2661-.2639-.596-.3959-.9896-.3959h-8.75002c-.39333 0-.72319.1336-.98958.4009-.26611.2669-.39917.5979-.39917.9929s.13306.7244.39917.9883c.26639.2639.59625.3959.98958.3959zm0-6.9726h14.05582c.3933 0 .7232-.1334.9896-.4004.2661-.2672.3992-.5983.3992-.9933 0-.3947-.1331-.724-.3992-.9879-.2664-.2639-.5963-.3959-.9896-.3959h-14.05582c-.39333 0-.72319.1335-.98958.4005-.26611.2672-.39917.5983-.39917.9933 0 .3947.13306.724.39917.9879.26639.2639.59625.3958.98958.3958zm0-6.972h14.05582c.3933 0 .7232-.1336.9896-.4009.2661-.2669.3992-.5979.3992-.9929s-.1331-.7244-.3992-.9883c-.2664-.2639-.5963-.3958-.9896-.3958h-14.05582c-.39333 0-.72319.1336-.98958.4008-.26611.2672-.39917.5982-.39917.9929 0 .395.13306.7244.39917.9883.26639.2639.59625.3959.98958.3959z" />
                </svg>
                <span class="ds_notification-tag  ds_notification-tag--dot" aria-hidden="true"><span class="visually-hidden">Unread notifications</span></span>
            </span>
            <strong class="ds_tag" aria-hidden="true">New service</strong>
            <h2 class="ds_card__title">Design Standards <span class="visually-hidden">, New service with unread notifications</span></h2>
        </div>
        <div class="ds_card__content-main">
            <p>The patterns included here have been developed for use by government, public sector and third sector non-commercial organisations in Scotland.</p>
            <div class="ds_button-group  ds_button-group--wrap">
                <button class="ds_button  ds_button--secondary  ds_button--small">
                    Find a pattern
                </button>
                <a href="#">New features</a>
            </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">Publish date</dt>
                    <dd class="ds_metadata__value">13 August 2025</dd>
                </div>
            </dl>
        </div>
    </div>
</div>

Accessibility

Buttons and links in a card must each have their own focus target.

In a navigation card, the entire container acts as a single link and focus target.

But only the heading should be a link to avoid other information like descriptions and metadata being read unnecessarily by screen readers.

Notification tags and status tags should use visually hidden text where needed to explain their meaning further.

Navigation cards that include either of these tags should include their content as visually hidden text within the card’s heading or link.

Analytics

You can track interactions with a navigation card.

Within a card you can track interactions with:

  • links
  • buttons

Navigation card links get a data-navigation attribute. Its value uses the pattern card-[index] where the index is one-based.

<a class="ds_card__link  ds_card__link--cover" href="#" data-navigation="card-6">Environment and countryside</a>

Links and buttons within a non-navigation card get a data-section attribute. Its value uses the pattern card-[index] where the index is one-based.

<div class="ds_button-group  ds_button-group--wrap">
    <button class="ds_button  ds_button--secondary  ds_button--small" data-button="button-secondary-button" data-section="card-1">Secondary button</button>
    <a href="#" data-section="card-1">Text link</a>
</div>
Back to top