Government of Spain Dintel Standardized Design of Electronic Procedures Start First steps Foundations Components Modules Templates Tokens Support
Components Card

Cards

A card or card component is a user interface element that is used to present information in an attractive and organized manner in a rectangular block format.

Preview

Figma
preview image card

Uses

All the cards can contain illustrations of the system or an image that the designer can include or exclude from the information of the cards, in addition this image can go in blood or with an internal margin inside the card.

When to use

To present information in an attractive and organized manner: Cards are a great way to present information in an attractive and concise way. To create a content gallery: Cards can be used to create a content gallery, such as news, services, or events. To provide access to more content: Cards often have interactions, such as hover or click, that allow the user to access more information or content.

When not to use

When the information is not important or attractive enough: Cards should be used to present important or attractive information in a concise manner. If the information does not meet these criteria, it may not be appropriate to use a card. When a more detailed presentation format is required. Cards are usually short and concise, so they may not be suitable for presenting detailed or complex information. When there is not enough space: Cards take up limited space on the screen, so they may not be suitable if there is not enough space available.

Behaviour

Sizes

In both interactive and informative cards, we find four sizes:

100%, occupying the maximum width of the container where it is placed. 1/2, 1/3 and 1/4, these measures occupy half, a third or a quarter of the width of the desktop screen.

Remember that the cards as well as all the components of the system, have their responsive version, both on mobile and tablet.

Typologies

Interactive card component image
Interactive
information card component image
Informative

Contents

Display of the card component with illustration
Illustration
Display of the component card with image
Image
Display of the card component only text
Text only

Orientation

Display of the vertical card component
Vertical
Display of the horizontal card component
Horizontal

Version

Display of the horizontal card component for desktop
Desktop
Display of the horizontal card component for mobile
Mobile

Responsive

Display of the card component for tablet
Tablet
Display of the card component for mobile
Mobile

Accessibility

This component has been validated to meet the accessibility requirements of UNE-EN 301549:2022, which includes the criteria of WCAG 2.1 (AA), however, changes in content and styles can affect accessibility compliance. We must make sure to review and follow the guidelines in this section when you update or add new content or style to this component.

To give the card the header, slot="title" is used in the label with the corresponding level header. If you want to add content to the card, slot="content" is used in the corresponding tag. For the correct accessibility of assistive technologies, if this content is text, the label must always be a paragraph.
NextGenerationEU European Union Funding Logo Transformation and Resiuliency Recovery Plan Logo Spain digital logo Support Accesibility Sitemap Privacy Policy Cookie Policy

This website uses own and third party cookies to provide a better service. If you continue browsing we consider that you accept its use.