Card

[bameyrick]

Use this place to discuss the card component in the ONS Design System

[dudelmeister]

This is just a suggestion - Currently the cards are a container of a link with a description - I can't help but feel as if the click area should be the entire card itself... How much research have we done on this component? I'm assuming it's tested ok?

[jrbarnes9]

Cards broken on iOS 10 and under:

[jrbarnes9]

The h3 font size on cards is too large for long titles

[jrbarnes9]

I suspect the aria-labelledBy and aria-describedBy attributes are not valid/required on the div because it's not an interactive element. Perhaps a hangover from the original implementation which was changed after DAC audit #1321 ?

[jrbarnes9]

To be reviewed by DAC in May2022 audit.

[Al-Davies]

Card - UR Findings:

• Descriptive text needs to be clear on what is contained within the links
• If it missing vital information, then users may ignore the link as the link title and description don't appear to be what they need.
• Headings need to be clear i.e. Cause of death is clear, but Population characteristics is vague.
• Help page on Census had a card titled 'How to complete the census' it held much more than this, like how to help others, when to complete it, moving house etc.
• Users scan pages looking for words, so any help text needs to be as wide-covering as possible to help explain the content that is available

[AtinDESNEZ]

I was wondering if card background (Card set with Headline figures) i.e. grey color has been approved for accessibility when grey being foreground on default white color pages. I was planning to use it for our service and is not sure from accessibility perspective.

[MagdalenaLarge]

Hello @AtinDESNEZ thank you for contacting us.
We recently conducted an accessibility review that included this specific component. While the light grey on white does have low contrast, it is considered acceptable for decorative grouping purposes—as long as it’s not used to convey information independently. All other content within that box meets accessibility standards. I hope this clarifies things. Please don’t hesitate to reach out if you have any further questions.
Thanks.

[AtinDESNEZ]

Thanks for the quick response. Appreciate it!

[AtinDESNEZ]

What's the correct command (npm install ons-design-system) to import ONS design system components.

[rmccar]

All the documentation to get started using the DS with npm should be here

[AtinDESNEZ]

[like] Gupta, Atin (Energy Security) reacted to your message:

…

________________________________ From: MagdalenaLarge ***@***.***> Sent: Wednesday, July 2, 2025 11:13:28 AM To: ONSdigital/design-system ***@***.***> Cc: Gupta, Atin (Energy Security) ***@***.***>; Mention ***@***.***> Subject: Re: [ONSdigital/design-system] Card (Discussion #48) Hello @AtinDESNEZ<https://github.com/AtinDESNEZ> thank you for contacting us. We recently conducted an accessibility review that included this specific component. While the light grey on white does have low contrast, it is considered acceptable for decorative grouping purposes—as long as it’s not used to convey information independently. All other content within that box meets accessibility standards. I hope this clarifies things. Please don’t hesitate to reach out if you have any further questions. Thanks. — Reply to this email directly, view it on GitHub<#48 (reply in thread)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/BTAROHJWVYAXNXSDXN4ZKIL3GO5FRAVCNFSM6AAAAACATQWQS2VHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTGNRTHE3TQMI>. You are receiving this because you were mentioned.Message ID: ***@***.***>

[AtinDESNEZ]

Have you had a chance to test the card in a disabled form like button so that user knows what's coming up or will get activated once they have done the requested task.

[MagdalenaLarge]

Hello @AtinDESNEZ ,
Card component was designed to display specific data in a dashboard format. You can read more about how this component is intended to be used within ONS: https://service-manual.ons.gov.uk/content/content-types/statistical-articles#headline-facts-and-figures-optional-
We didn’t intend for it to have any functionality beyond what it currently offers.

@rmccar - are you able to advise if the behaviour explained above is possible using card component?

[AtinDESNEZ]

Appreciate the clarity. Thanks.

@rmccar Please do let me know if its possible to implement the disabled feature (as happens in button) on these cards. THanks.

[rmccar]

Hi, the card component wasn't designed with it being used in disabled forms in mind. Usually it would be an input/button element that in some cases you would want to disable in a form. The card component just includes some information and a link. Is it the link you would want to disable? I'd need more details on your use case

[AtinDESNEZ]

Thanks. I hav 2-3 sections which I want user to edit & update in a sequential way. They are dependent on completion stage of each other, so wanted to show the cards in a disabled state till they complete prev one. That way user would always know what;s coming up.

[rmccar]

I think I might need you to take me through your use case. From that it sounds like you would want to use a new page per section to me as that is a pattern we have used in the past with questionnaires in eQ. Then you would use the summary component to show them how many sections they had completed and redirect to the summary page after each section. The card component isn't really designed for this use. But happy to have a chat