Card

<Card /> components are typically structured with a title, description, and a link that references another part of the docs. They enable you to highlight areas where readers may want to learn more and are often used for things like links for quickstart / summary pages.

Usage

Suppose you want to mimic the following <Card /> layout.

Plain Card

Organize Files →

How file-based routing works with Nextra.

Organize Files (Advanced) →

How to customize file routing, use _meta.tsx files, hide routes, and more

To do so you can do the following:

index.mdx

import { Card, Cards } from '@components/index'
 
...
 
<Cards>
  <Card href="./../setup/organize-files">
    <Card.Title>Organize Files</Card.Title>
    <Card.Description>How file-based routing works with Nextra.</Card.Description>
  </Card>
  <Card href="./../setup/organize-files-advanced">
    <Card.Title>Organize Files (Advanced)</Card.Title>
    <Card.Description>How to customize file routing, use `_meta.tsx` files, hide routes, and more</Card.Description>
  </Card>
</Cards>

Image with Card

Suppose you want to add an image to your card. Like so:

Typescript SDK →

Aptos Typescript SDK (V2)

To accomplish this you can do the following:

index.mdx

import { Card, Cards } from '@components/index'
 
...
 
<Cards className="xl:grid-cols-2">
  <Card className="flex flex-row gap-4">
    <Card.Image src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4c/Typescript_logo_2020.svg/2048px-Typescript_logo_2020.svg.png" />
    <div className="flex flex-col gap-2">
      <Card.Title>Typescript SDK</Card.Title>
      <Card.Description>Aptos Typescript SDK (V2)</Card.Description>
    </div>
  </Card>
</Cards>

API

The Card component takes the following props:

`href`

The href of the Card.

Type: string

The Card.Title component takes the following props:

`linkType`

The linkType of the Card. By default it is set to linkType="internal".

linkType="internal" will render →.

linkType="external" will render ↗.

linkType={null} will render nothing.

Type: external | internal | null | undefined

Callout Filetree