FeatureCard

Present one capability with a recognizable icon, short explanation and an optional next step.

FeatureCard

View source ยท API reference

A feature with a next step

The actions slot gives readers a clear continuation.

Native

AUTHORING

Readable by design

Keep content and components close together in MDX.

Use the same primitives in documentation and product UI.

Add browser state 
<FeatureCard
  eyebrow="AUTHORING"
  title="Readable by design"
  summary="Keep content and components close together in MDX."
  badge="Native"
  icon="lucide:check"
  tone="accent"
>
  <p>Use the same primitives in documentation and product UI.</p>
  <template #actions>
    <BtnLink href="/components/runtime/regor-app/" tone="accent" variant="outline">
      Add browser state
    </BtnLink>
  </template>
</FeatureCard>

A coherent feature set

Cards share a theme but can express distinct intent.

Content first

Ship readable pages with native HTML.

State when needed

Mount focused browser apps for interaction.

<Grid columns="1" columnsSm="2">
  <FeatureCard
    title="Content first"
    summary="Ship readable pages with native HTML."
    tone="info"
    variant="outline"
  />
  <FeatureCard
    title="State when needed"
    summary="Mount focused browser apps for interaction."
    tone="success"
    variant="surface"
  />
</Grid>

Behavior and accessibility

The generated title is h3. Place feature cards under an h2 section heading, and keep summaries comparable in length. An icon and a badge support the title; they should not carry the only explanation.

API reference

FeatureCard contract

Props below are the public template API. RefOrValue accepts a literal or a reactive ref; bind refs with a colon-prefixed attribute. Native attributes and events can be passed through the component root.

eyebrow

RefOrValue<string>
Default
not set

Short context above the heading, such as a category or release label.

title

RefOrValue<string>
Default
not set

Visible heading. Choose a short title that identifies the content or task.

summary

RefOrValue<string>
Default
not set

A concise explanation beneath the heading.

badge

RefOrValue<string>
Default
not set

Optional compact label rendered with Badge.

icon

RefOrValue<string>
Default
not set

Registered SVG icon name. In browser apps, include the icon in the resolver passed to defineIconComponents.

tone

RefOrValue<SemanticTone>
Default
inherited

Semantic intent: neutral, accent, secondary, info, success, warning, danger, feature, custom or ghost. The active skin supplies the colors.

variant

RefOrValue<ComponentVariant>
Default
surface

Visual treatment. Accepts solid, surface, surfaceAlt, spotlight, glass, flat, flatAlt, flatSolid, outlineFill, outline, subtle, subtleBtn, link, sheen, underline, rail, bracket or none.

Composition

Default slot: extra content after the summary. actions: links or buttons at the bottom. Register defineFeatureCardComponent with Panel, Flex, Icon, IconFrame and Badge.