Card
A Card is used to group information and actions related to a single topic.
Cards can be clickable and offer a way to navigate to the content they represent (e.g. Wikipedia articles).
Guidelines
Using cards
Use the Card component when you need to present individual pieces of information such as articles. Use them to create lists, grids or as standalone elements in the page.
Avoid using cards when you have to display extensive content, multiple elements, or group unrelated topics together. In such cases, consider using a different component or layout.
Use short titles and descriptions along with visual reinforcements, such as thumbnails or icons, to ensure that the card's content is concise and easy to scan.
Specifications
Cards include the following items:
- Visual element (optional)
Cards may include a thumbnail or an icon as a visual representation of the card’s content. - Title
A concise and descriptive title provides a brief description of the card content. - Description
A subtle text below the title provides more information about the element represented by the card. - Supporting text (optional)
An optional subtle text (with an optional icon) could be included to provide additional information about the card’s content. - Links (optional)
The description and/or the supporting text may contain links to either the element the Cards represent (e.g. Wikipedia articles), or to related content.
Refer to the Card component in Codex Figma.
Types
Depending on the visual content presented within the card, there are three distinct variations:
- Card with thumbnail
This variation includes a thumbnail image as the primary visual element. You can use this card variation when you intend to showcase articles and their associated images. - Card with icon
In this version, an icon serves as the primary visual element, enhancing recognition. Icons help users quickly identify and associate cards with specific actions or topics. - Card with only text
This variation lacks any visual elements and relies solely on text and content for information. This option simplifies the card's design, focusing on textual information and content.
Interaction states
Cards have the following visually separate states:
- Default
- Hover
- Focus
- Loading
Demos
Default
Name | Value |
---|---|
View | |
Reading direction |
With link
Adding the url
prop will make the root element of the Card an anchor element.
Media
A Card can have either an icon or a thumbnail. Card text will be aligned to the top of the media, unless there is only a title, which will be aligned to the center of the media.
With icon
With thumbnail
Title only
Card groups
Cards will often be displayed in groups. There are two considerations for Card groups:
- Layout: Layout styles for groups of Cards, e.g. margins or grid layout, must be added by the application. The example below adds some simple layout styles to a group of Cards.
- Media consistency: As shown above, adding a
thumbnail
prop will display the thumbnail. For groups of Cards, you may want to display a thumbnail for each Card if available, and otherwise display a placeholder. To enable this behavior, add theforceThumbnail
prop, as demonstrated below. The third item has no thumbnail and display a placeholder icon instead.
Nearby Pages
Golden Gate National Recreation AreaU.S. National Recreation Area surrounding San Francisco Bay Area Distance: 170mInternet ArchiveAmerican non-profit organization providing archives of digital media since 1996 Distance: 300mGreen Apple Books & MusicBookstore in San Francisco Distance: 350mMaximum example
The example below contains a title, a description, a thumbnail image, and some "supporting text" (which contains an Icon as well as text content).
Note: When using an Icon component inside the Card's supporting-text
slot, it is recommended to set the Icon size
property to small
.
Vue usage
Props
Prop name | Description | Type | Default |
---|---|---|---|
url | If provided, the Card will be a link to this URL. | string | '' |
icon | Icon displayed at the start of the Card. | Icon | '' |
thumbnail | Thumbnail image data for the Card. | Thumbnail|null | null |
forceThumbnail | Option to force a thumbnail layout. When set to true , the Card will display a Thumbnail. If a thumbnail prop was also provided, the thumbnail image will display. Otherwise, a placeholder icon will display.This is useful when displaying groups of Cards when some of the cards have thumbnail images but some do not. forceThumbnail will provide a consistent layout for that group.Note that this prop is not needed to display a thumbnail image: if the thumbnail prop is provided, it will display. This prop is only needed to enable the display of the thumbnail placeholder icon when the thumbnail prop is not provided. | boolean | false |
customPlaceholderIcon | Optional custom icon for the placeholder shown when forceThumbnail is true but no thumbnail is provided.Defaults to the default placeholder icon set in the Thumbnail component. | Icon | undefined |
Slots
Name | Description | Bindings |
---|---|---|
title | Card title | |
description | Card description | |
supporting-text | Short supporting text |
CSS-only version
Markup structure
With link
To make the entire Card a link, use an <a>
element and include the class cdx-card--is-link
.
With media
Image
To add an image, add the following markup:
- A
<span>
with the classescdx-card--thumbnail
andcdx-thumbnail
- Inside of that
<span>
, add an empty<span>
element with the classcdx-thumbnail__image
, plus a custom CSS class that you can use to add abackground-image
rule (alternately, you can add thebackground-image
rule via astyle
attribute on this<span>
)
See the CSS-only Thumbnail documentation for more examples.
Icon
To add an icon, add a <span>
element with the class cdx-card__icon
, plus a custom class that you can use to add a CSS-only icon.
Card groups
See the documentation above for UX guidelines.
Nearby Pages
Golden Gate National Recreation AreaU.S. National Recreation Area surrounding San Francisco Bay Area Distance: 170m Internet ArchiveAmerican non-profit organization providing archives of digital media since 1996 Distance: 300m Green Apple Books & MusicBookstore in San Francisco Distance: 350m