Cards are a specific form of data visualization focused mainly on displaying images.

installyarn add @clayui/card
versionNPM Version
useimport ClayCard from '@clayui/card';

Example

Card title

Some quick example text to build on the card title and make up the bulk of the card’s content.

Go somewhere

Snippet

Content Types

Cards support a wide variety of content, including images, text, list groups, links, and more. Below are examples of what’s supported.

Body

The building block of a card is the .card-body. Use it whenever you need a padded section within a card.

This is some text within a card body.

Snippet

Captions

Card titles are used by adding .card-title to a <h*> tag. In the same way, links are added and placed next to each other by adding .card-link to an <a> tag.

Subtitles are used by adding a .card-subtitle to a <h*> tag. If the .card-title and the .card-subtitle items are placed in a .card-body item, the card title and subtitle are aligned nicely.

Card title
Card subtitle

Some quick example text to build on the card title and make up the bulk of the card’s content.

Card linkAnother link

Snippet

Images

Use classes card-item-first and card-item-last on elements that appear at the beginning or ending of your card. It styles the border-radius to match the card’s border-radius. These classes work similar to Bootstrap 4’s .card-img-top and .card-img-bottom but also covers left and right.

thumbnail

Joe Bloggs

Administrator

Wings eu, pumpkin spice robusta, kopi-luwak mocha caffeine froth grounds.

Space Program

Because you live life on the edge of space.

Snippet

Add an optional header and/or footer within a card.

Featured
Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

Snippet

Card headers can be styled by adding .card-header to <h*> elements.

Featured
Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

Snippet

Dividers

Use <div className="card-divider"></div> to create a horizontal division between content inside a card.

autofit-col-expand

Title

autofit-col-expand

Snippet

Variations

Image Card

Just add image-card class on the same element that card class have being added.

Snippet

File Card

DOC

deliverable.doc

Stevie Ray Vaughn

Approved

Snippet

User Card

thumbnail

User Name

Latest Action

User Name

Latest Action

Snippet

Horizontal Card

Snippet

Interactive Card

Default

Widget Page

Build a page by adding widgets and content.

Blog

Snippet

Horizontal

Content Page
Link to a Page of This Site

Snippet

States

Hover

Snippet

Active

Just add active class on the element where card class was placed.

Widget Page

Build a page by adding widgets and content.

Snippet

Empty

By default, when adding image-card class and inside the element that contains image-card, exists a aspect-ratio class. A transparent background will be setted.

PNG

Snippet

Helpers

Checkbox

To make the whole card clickable just wrap the checkbox and card in:

Snippet

Aldcott Gage George Polwarth-Kitchener

empty.jpg

Approved

Snippet

Radio

To make the whole card clickable just wrap the radio input and card in:

Snippet

Snippet

Horizontal Card with autofit-col-*

Use card-row with autofit-col-expand and autofit-col to create a number of custom horizontal cards. autofit-col-expand fills the remaining space and autofit-col is only as wide as its content inside.

Fills remaining space.

Snippet

Two .autofit-col’s no .autofit-col-expand.

Only as wide as this text.

Snippet

Two .autofit-col-expand’s no .autofit-col.

This will split the space in half.

Snippet

Padded Horizontal Cards

Nest card-row in card-body on to add some spacing around a horizontal card.

thumbnail

So ristretto cappuccino

Wings eu, pumpkin spice robusta.

Snippet

Truncating Text Inside Card

Add class text-truncate on whatever text you want to be truncated.

thumbnail

So ristretto cappuccino

Wings eu, pumpkin spice robusta, kopi-luwak mocha caffeine froth grounds.

Snippet

Card Row Content Alignment Helpers

Vertically align content by setting justify-content to flex-start, center, or flex-end on autofit-col.

Horizontally align content by setting text-align to left, center, or right on autofit-col.

You can also use the Bootstrap 4’s helper classes justify-content-start, justify-content-center, or justify-content-end on card-row to align content in all columns inside the row.

top
middle
bottom

Snippet

Add gutters to a specific card card column by using the class autofit-col-gutters.

thumbnail

So ristretto cappuccino

Wings eu, pumpkin spice robusta.

Snippet

Rounded

Use classes rounded, rounded-circle, or rounded-0 on the card to quickly shape the borders.

autofit-col-expand
autofit-col-expand
thumbnail
autofit-col-expand
autofit-col-expand
autofit-col-expand

Snippet

Card Page

A component to help layout cards in equally spaced columns similar to Bootstrap’s grid system. Card Page uses semantic class names for columns, card-page-item, which makes it easier to target with CSS. You can define the width of each column at each breakpoint through your own custom modifier class.

The example below adds the custom modifier class my-custom-grid to card-page. There are custom gutters and column widths set. Column widths are set using flex-basis and max-width.

Snippet

Snippet

Card Page Equal Height

The modifier class card-page-equal-height forces all cards in a row to maintain the same height.

Snippet

Card Page with Bootstrap’s Grid System

card-page works with Bootstrap’s row and col-{breakpoint}-# classes.

Card Page is compatible with Bootstrap’s Grid System, just add row to card-page and the column utilities you want on card-page-item.

Snippet

Card Page Item Asset

A predefined card-page column used in Liferay Portal’s card view layouts, generally used for vertical cards.

Snippet

Card Page Item Directory

A predefined card-page column used in Liferay Portal’s card view layouts, generally used for horizontal cards.

Snippet

Edit this page on GitHub

Contributors

Matuzalém Teles

Last edited May 12, 2025 at 7:56:02 PM