Card component

A <Card> is a way to highlight and group content. They can be used effectively with Grids to layout blocks of information.

<Card>
  Basic content with some **markdown**
</Card>

Attributes

You can customize the <Card> component using the following attributes.

Clickable cards

You can turn the whole card into a clickable link by specifying the href=".." attribute.

// [!code word:href:1]
<Card href="https://www.example.com">
  Click me!
</Card>

Padding

The pad attribute sets the padding around the content within the callout. It accepts values from 0 to 5, where 0 indicates no padding, and 5 indicates the highest padding level. The default padding is 3.

// [!code word:pad:1]
<Card pad="5">
    This is a card with a lot of padding.
</Card>

Max width

You can vary the maximum width of the card with the max_width=".." attribute.

The width must be xs , md , lg , xl , or full (default).

// [!code word:max_width:1]
<Card max_width="md">
  Card with `md` max width
</Card>