Use Feature Card for entry points, integrations, and hubs.
Feature Card
Card for key destinations and integrations. Supports optional icon, subtitle, badge, metadata, and external links.
- .source-feature-card Root clickable card
- .source-feature-card-icon Optional icon container
- .source-feature-card-title Primary label
- .source-feature-card-description Supporting text
- .source-feature-card-meta Optional metadata line
States
State
Appearance
Default
Surface background, border token, title in primary text color.
Hover
Border shifts to
--source-color-border-strong for stronger affordance.
Focus
2px outline for keyboard focus on the root element.
Disabled
Uses
.source-feature-card--source-disabled with reduced opacity and no pointer interaction.
Design intent
Feature Card is a weighted entry point, heavier than a list row and lighter than a hero section. It works in overview grids where each destination deserves a brief description and an icon anchor. The disabled state communicates unavailability without removing the item from the layout.
When to use
Do
Use subtitle and meta for compact supporting context.
Keep each card focused on one clear target.
Don't
Do not force heavy data tables into card format.
Avoid narrative blocks that turn cards into mini pages.
Do not set external unless the destination is truly outside the app.
Layout variants
Feature Card can be used in dense overview grids and in single-column resource blocks. Keep one card focused on one destination or one integration.
Designer checklist
- Disabled cards explain unavailability in the subtitle or meta area.
- External links are visually marked and the card communicates the destination type.
- Icon is decorative or has a text equivalent nearby. Critical meaning is not icon-only.
Props
Prop
Type
Default
Description
title
ReactNode
required
Primary text label.
description
ReactNode
null
Main supporting sentence.
subtitle
ReactNode
null
Secondary label under the title.
meta
ReactNode
null
Small metadata line (URL, command, identifier).
badge
ReactNode
null
Small status badge next to the title.
icon
ReactNode
null
Optional icon content in the leading container.
href
string
null
If set and not disabled, renders as an anchor.
external
boolean
false
Adds
target="_blank" and external icon when href is set.
disabled
boolean
false
Forces a non-interactive root and disabled visual treatment.
palette
`neutral \| accent \| success \| warning \| danger \| info`
neutral
Color palette for hover border, focus ring, and internal badge treatment.
className
string
null
Extra class on the root element.
Usage
import '@pierredelattre/source-tokens';
import '@pierredelattre/source-react/styles';
import { FeatureCard } from '@pierredelattre/source-react';
import { GitHubLogoIcon } from '@radix-ui/react-icons';
function Demo() {
return (
<FeatureCard
href="https://github.com/pierredelattre/source-design-system"
title="GitHub"
subtitle="@pierredelattre/source-react"
description="Source code, issues, and releases."
meta="github.com/pierredelattre/source-design-system"
icon={<GitHubLogoIcon width={16} height={16} />}
palette="accent"
external
/>
);
}Component tokens
Tokens are defined on .source-feature-card. Override on a parent selector for local variants.
.resource-list .source-feature-card {
--source-feature-card-border-color-hover: var(--source-color-info);
--source-feature-card-title-color: var(--source-color-text);
}
Token
Default
--source-feature-card-bg--source-color-surface
--source-feature-card-bg-icon--source-color-surface-raised
--source-feature-card-border-color--source-color-border
--source-feature-card-border-color-hover--source-color-border-strong
--source-feature-card-title-color--source-color-text
--source-feature-card-subtitle-color--source-color-text-secondary
--source-feature-card-description-color--source-color-text-secondary
--source-feature-card-meta-color--source-color-text-disabled
--source-feature-card-icon-color--source-color-text-secondary
--source-feature-card-badge-bg--source-color-surface-raised
--source-feature-card-badge-color--source-color-text-secondary
--source-feature-card-padding--source-spacing-5
--source-feature-card-gap--source-spacing-3
--source-feature-card-icon-size32px
Semantics
Behavior
Details
Interactive root
Renders as
<a> only when href is provided and disabled is false.
External destination
When
external is true, the link gets target="_blank" and rel="noopener noreferrer".
Decorative icons
Leading icon and external icon are marked
aria-hidden="true".
Disabled state
Disabled cards are non-interactive and expose
aria-disabled="true" on the root element.