Cards | Fern

Cards are container components that group related content and actions together. They provide a flexible way to present information with optional elements like icons, titles, and links in a visually distinct box.

Properties

Property	Type	Description
`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

Basic

Python

The icon field references a Font Awesome icon.

Custom icon

Python

Pass in an image tag to use a custom icon.

Icon position

Location

You can set the icon position as left or top. Default is top.

1	<Card
2	title="Python"
3	icon="brands python"
4	href="https://github.com/fern-api/fern/tree/main/generators/python"
5	>
6	View Fern's Python SDK generator.
7	</Card>