Component Library

Fern | Use the Card component to display content in a box

The Card component is used when you want to display content in a rectangular box.

Card Prop:

  • title: string
  • icon: Font Awesome Icon
  • href: string — a link to another page

Note: it is helpful to put <br /> after each card to make sure they are not too close to each other. We’re tracking the issue here.

Single card

Node.js/TypeScript
single-card.mdx
1    <Card
2    title="Node.js/TypeScript"
3    icon="fa-brands fa-node"
4    href="https://github.com/fern-api/fern/tree/main/generators/typescript"
5    />

Multiple cards

Node.js/TypeScript
Python
Java

multiple-cards.mdx
1    <Cards>
2    <Card
3        title="Node.js/TypeScript"
4        icon="fa-brands fa-node"
5        href="https://github.com/fern-api/fern/tree/main/generators/typescript"
6    />
7    <Card
8        title="Python"
9        icon="fa-brands fa-python"
10        href="https://github.com/fern-api/fern/tree/main/generators/python"
11    />
12    <Card
13        title="Java"
14        icon="fa-brands fa-java"
15        href="https://github.com/fern-api/fern/tree/main/generators/java"
16    />
17    </Cards>
Built with