CARDS & DECORATION

FeatureCard

Compact 280px feature/highlight card with a primary-tinted Memphis shadow. Use to surface product features on landing pages or in feature grids.

Import

import { FeatureCard, BoltIcon } from 'damo-ui'

Live preview

Memphis chrome

2px borders, primary-colored shadows, gentle hover lift on every action.

LEVEL 02
1<FeatureCard
2  title="Memphis chrome"
3  desc="2px borders, primary-colored shadows, gentle hover lift on every action."
4  meta="LEVEL 02"
5  icon={<BoltIcon size={18} />}
6/>

Props

FeatureCard props
PropTypeDefaultDescription
title*string—Display-font title.
desc*string—Body description.
metastring—Optional mono uppercase footer label.
iconReactNode—Optional icon rendered next to the meta.

Accessibility

  • Composes <Card variant="featured"> — same a11y contract as Card: a presentational <div> that forwards role / aria-* for landmarks. The title renders as <h4>.
  • When the whole card is clickable, wrap it in a real <button> or <a> rather than attaching onClick to the wrapper — neither the <div> nor the inner <h4> is a focus target.
← UserCardArticleCard →