Components

Cards

Cards are versatile containers used to group related content and actions. They provide visual hierarchy and organize information into digestible sections.

Cards are surface containers that hold content and actions about a single subject. They're used throughout the application for feature highlights, testimonials, and FAQs. All card components live under packages/components/Card and are built on top of the shared Card base component, ensuring consistent styling and easy theming.

Basic card

The base Card component provides a simple container with consistent styling for any content.

Card Title

This is a basic card with default styling. Cards provide a consistent container for grouping related content.

Another Card

Cards can contain any type of content including text, images, forms, buttons, and more.

Card variants

The base Card can be styled for different contexts and hierarchy levels by overriding its style prop.

Elevated (default)

Standard elevation with shadow for primary content.

Outlined

No shadow, border-only for secondary content.

Flat

Subtle background, no shadow for nested content.

Feature card

Feature cards highlight product capabilities with icons, hover effects, and optional "coming soon" states.

Lightning Fast

Built for speed with optimized performance and instant response times.

Learn more

Enterprise Security

Bank-grade security with end-to-end encryption and compliance.

Learn more

AI Automation

Intelligent workflows that learn and adapt to your business.

March 2026

Testimonial card

Testimonial cards display customer quotes with star ratings and author information.

Sales Sync completely transformed how we manage leads. The integration was seamless and support has been incredible.

Finally a platform that doesn't lock us in. We can export our data anytime, and the pricing is refreshingly transparent.

Accordion card

Accordion cards are expandable cards, useful for FAQ-style question-and-answer content.

You have three options: stay on Sales Sync ($30/mo), export and self-host (~$5–20/mo), or hand your code to any agency.

Yes! Your code and data are always yours. Export with one click, no fees, no questions asked.

The $3,000 setup includes everything: website build, CMS, CRM, integrations, and first year of support.

API

See the documentation below for a complete reference to all of the props available to the Card components.

Card Props

Prop	Type	Default	Description
`hoverable`	`boolean`	`true`	If true, applies the default hover lift/shadow/border treatment.
`style`	`CSSProperties`	—	Override or extend the base card styles.

CardIcon Props

Prop	Type	Default	Description
`background`	`string`	—	Background (color or gradient) applied to the icon container.

CardBadge Props

Prop	Type	Default	Description
`value`	`number`	—	Numeric value shown in the badge (e.g. 1 renders as "01").

FeatureCard Props

Prop	Type	Default	Description
`icon`	`ReactNode`	—	Icon displayed at the top of the card.
`title`	`string`	—	The card title.
`description`	`string`	—	Supporting description text.
`comingSoon`	`boolean`	`false`	If true, renders the muted "coming soon" state.
`comingDate`	`string`	—	Date badge shown instead of the "Learn more" link.

TestimonialCard Props

Prop	Type	Default	Description
`text`	`string`	—	The testimonial quote.
`name`	`string`	—	The author name.
`role`	`string`	—	The author's role or company.
`initials`	`string`	—	Initials shown in the author avatar.

AccordionCard Props

Prop	Type	Default	Description
`question`	`string`	—	The question text shown in the header.
`answer`	`string`	—	The answer text shown when expanded.
`isOpen`	`boolean`	—	Whether the accordion is expanded.
`onToggle`	`() => void`	—	Called when the header is clicked.