Writing contentComponents

Card

The <Card> component groups related content and actions in a visually distinct box. Optional elements include icons, titles, and links.

You can use individual cards or arrange multiple cards in a responsive grid layout using the <CardGroup> component. Card groups are useful for organizing feature lists, navigation options, or step-by-step guides.

Usage

Watering guide

The icon field references a Font Awesome icon.

Markdown
1<Card 
2    title="Watering guide" 
3    icon="regular droplet" 
4    href="/learn/docs/writing-content/components/cards"
5>
6    The icon field references a Font Awesome icon.
7</Card>

Variants

Group of cards

Watering

Learn how to water your plants

Sunlight

Understand sunlight requirements for different plants

Soil

Choose the right soil for optimal plant growth

Fertilizer

Apply fertilizer to keep your plants healthy

Markdown
1<CardGroup cols={2}>
2  <Card 
3    title="Watering" 
4    icon="regular droplet" 
5    href="/learn/docs/writing-content/components/cards"
6  >
7    Learn how to water your plants
8  </Card>
9  <Card 
10    title="Sunlight" 
11    icon="regular sun" 
12    href="/learn/docs/writing-content/components/cards"
13  >
14    Understand sunlight requirements for different plants
15  </Card>
16  <Card 
17    title="Soil" 
18    icon="regular seedling" 
19    href="/learn/docs/writing-content/components/cards"
20  >
21    Choose the right soil for optimal plant growth
22  </Card>
23  <Card 
24    title="Fertilizer" 
25    icon="regular flask" 
26    href="/learn/docs/writing-content/components/cards"
27  >
28    Apply fertilizer to keep your plants healthy
29  </Card>
30</CardGroup>

Custom icon

Plant icon
Plant care

Pass in an image tag to use a custom icon.

Markdown
1<Card 
2    title="Plant care" 
3    icon={<img src="https://images.unsplash.com/photo-1466781783364-36c955e42a7f?w=100" alt="Plant icon"/>} 
4    href="/learn/docs/writing-content/components/cards"
5>
6    Pass in an image tag to use a custom icon.
7</Card>

Custom icon position

Location

You can set the icon position as left or top.

Markdown
1<Card 
2    title="Location" 
3    icon="regular globe" 
4    iconPosition="left"
5>
6    You can set the icon position as `left` or `top`.
7</Card>

Images

Cards support displaying images alongside content. The image automatically resizes to fit the card dimensions, so you typically don’t need to specify imageWidth or imageHeight unless you want to override the default behavior.

Plant care guide
Plant care guide

Display an image alongside your card content. The image automatically scales to fit the card.

Markdown
1<Card 
2    title="Plant care guide" 
3    src="https://images.unsplash.com/photo-1466781783364-36c955e42a7f"
4    imagePosition="left"
5>
6    Display an image alongside your card content. The image automatically scales to fit the card.
7</Card>
Getting started with plants
Getting started with plants

Position the image at the top of the card for a banner-style layout.

Markdown
1<Card
2    title="Getting started with plants" 
3    src="https://images.unsplash.com/photo-1459411552884-841db9b3cc2a"
4    imagePosition="top"
5>
6    Position the image at the top of the card for a banner-style layout.
7</Card>

Properties

<CardGroup> properties

cols
numberDefaults to 2

The number of columns to display in the grid

<Card> properties

title
string

The title text to display in the card

icon
string | img

Either a Font Awesome icon class (e.g. ‘brands python’) or a custom image

href
string

Optional URL that makes the entire card clickable

iconPosition
'top' | 'left'Defaults to top

The position of icon relative to the text.

color
string

Hex color value for the icon (e.g. #FF0F00). Ignored if lightModeColor and darkModeColor are both set

darkModeColor
string

Hex color value for the icon in dark mode (e.g. #FF0F00)

lightModeColor
string

Hex color value for the icon in light mode (e.g. #FF0F00)

src
string

URL of the image to display in the card. When set, the card displays the image alongside the content.

imagePosition
'top' | 'left' | 'right' | 'bottom'Defaults to top

Position of the image relative to the card content. Use imagePosition to control the layout.

imageWidth
string

Width of the image (e.g. 200px, 50%). Only use if you need to override the default sizing. The image automatically resizes to fit the card by default.

imageHeight
string

Height of the image (e.g. 150px, 100%). Only use if you need to override the default sizing. The image automatically resizes to fit the card by default.