Card

Use Prosefly’s MDX component editor to edit documentation cards and links while keeping the syntax used by your Astro, Starlight, Fumadocs, or Prosefly site.

Supported profiles

The same editor supports the Astro, Starlight, Fumadocs, and Prosefly profiles. Select the profile that matches your site to see the component syntax and controls available for that integration.

Edit in Visual

Edit a card’s title and body in the component. Use its controls for supported links and icons. A card group lets you work with multiple cards; each card remains an editable item within the group.

Link controls change the stored destination rather than navigating away from the editor. Check the URL in Source before publishing.

card.mdx

StarlightFumadocsProsefly

VisualSource

Reset example

Loading editor…

An interactive example. Changes stay on this page.

Source example

import { Card, CardGrid } from '@astrojs/starlight/components';

<CardGrid>
  <Card title="Connect your site" href="/docs/connect-github/" icon="lucide:folder">
    Start with the repository that already powers your documentation site.
  </Card>
  <Card title="Review changes" href="/docs/publishing/" icon="lucide:git-pull-request">
    Publish reviewed content without changing your existing build.
  </Card>
</CardGrid>

Profile differences

Starlight supports Card, LinkCard, and CardGrid; LinkCard stores its summary differently from a Card body. Fumadocs uses its Cards and Card syntax. Prosefly uses CardGrid and Card, including supported link properties on Card.

Use the controls available to that card type. Custom layout properties and expressions may require Source, and the website determines the final grid layout.

Related MDX guides

Read next: Callout · Tabs · Link Button.