Skip to content
🎉 Welcome to the new Aptos Docs! Click here to submit feedback!
Additional ResourcesContributeComponentsCard

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

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:

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