Card component

A card is a way to highlight and group content.

Syntax

Basic Card component

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

Output:

Basic content with some markdown

Clickable Card component

<Card href="https://www.example.com">
  Click me!
</Card>

Click me!

You can vary the padding of the card with the p attribute.

Padding of 1

Padding of 5

You can vary the maximum width of the card with the max-width attribute.

full

href
Convert the card into a clickable link
p
Padding inside the card. Must be a number between 0 and 5 inclusive.
Default to 3.
max-width
Max width of the card. Must be one of xs, md, lg, xl, or full.
Default to full