A set of information and actions related to a single topic.
url prop will make the root element of the Card an anchor element.
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.
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
thumbnailprop 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 the
forceThumbnailprop, as demonstrated below. The third item has no thumbnail and display a placeholder icon instead.
Nearby PagesGolden 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: 350m
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
|If provided, the Card will be a link to this URL.|
|Icon displayed at the start of the Card.|
|Thumbnail image data for the Card.|
|Option to force a thumbnail layout.|
When set to
This is useful when displaying groups of Cards when some of the cards have thumbnail images but some do not.
Note that this prop is not needed to display a thumbnail image: if the
|Optional custom icon for the placeholder shown when |
Defaults to the default placeholder icon set in the Thumbnail component.
|supporting-text||Short supporting text|
To make the entire Card a link, use an
<a> element and include the class
To add an image, add the following markup:
<span>with the classes
- Inside of that
<span>, add an empty
<span>element with the class
cdx-thumbnail__image, plus a custom CSS class that you can use to add a
background-imagerule (alternately, you can add the
background-imagerule via a
styleattribute on this
See the CSS-only Thumbnail documentation for more examples.
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.
See the documentation above for UX guidelines.
Nearby PagesGolden 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