Patterns

Guide card

A get-started / guide card for onboarding and entry points like the Dashboard Home. A swappable media slot on top, a title with a leading icon + a description below, and a single low-emphasis action in a bordered footer. Optional outline badges (Get started, Developers) tag the card at the top.

Updated Jul 24, 2026 by Juan Pablo Turina

Anatomy

A Card with a tag row, a media slot, and a title + description block, over a bordered footer with a low-emphasis outline action. The media slot ships as a dashed placeholder you swap for your own image or illustration. Hover lifts the card (primary border + shadow-xl).

Get startedDevelopers

Image (swap it with your content)

Title

This is a card description.

1
Tag badges
Outline Badges at the top (e.g. Get started, Developers). Pass an empty array to hide the row.
2
Media slot
A swappable surface above the title. Defaults to a dashed placeholder; pass your own image or illustration via the media prop.
3
Title + icon
CardTitle with a leading Phosphor icon (Info by default). Pass null to the icon prop to drop it.
4
Description
A muted-foreground line under the title.
5
Footer action
A single low-emphasis outline Button (e.g. Learn more) in a bordered footer.

States

Default

Badges + media slot + title + description + a Learn more action. The canonical get-started card on Home.

Get startedDevelopers

Image (swap it with your content)

Title

This is a card description.

<GuideCard
  badges={["Get started", "Developers"]}
  title="Title"
  description="This is a card description."
  actionLabel="Learn more"
  onAction={openGuide}
/>

Without badges

Pass an empty badges array for a plain onboarding card, e.g. an empty-state prompt to add a first connection.

Image (swap it with your content)

Add your first connection

Link a payment provider to start accepting payments.

<GuideCard
  badges={[]}
  title="Add your first connection"
  description="Link a payment provider to start accepting payments."
  actionLabel="Get started"
/>

Import

Copy this import line at the top of the file where you compose this molecule.

A molecule composed of Card + Badge + Button + a swappable media slot. Drop it in with defaults, or drive it with props.

import { GuideCard } from "@/components/patterns/guide-card";

Props

Everything else is forwarded to the underlying elements via ...props.

Prop	Type	Default	Description
badges	string[]	['Get started', 'Developers']	Outline badges shown at the top. Pass [] to hide the row.
media	ReactNode	dashed placeholder	Media slot above the title. Swap the default 'Image (swap it with your content)' placeholder for your own image or illustration.
icon	ReactNode	<Info /> (Phosphor light)	Icon shown left of the title. Pass null to hide it.
title	string	'Title'	Card title (semibold), next to the icon.
description	string	'This is a card description.'	Description line under the title.
actionLabel	string	'Learn more'	Label of the low-emphasis outline button in the footer.
onAction	() => void	—	Footer action handler.
className	string	—	Extra classes merged onto the Card.

Cross-links to the atoms this molecule composes and sibling patterns.

Connection cardThe sibling product card for the Connections screen.
CardThe atom this molecule is built on.
BadgeThe outline tag badges at the top.