CARDS & DECORATION

ArticleCard

Neutral content card capped at 420px wide. Memphis frame, optional eyebrow label, display-font title, and a relaxed-leading body.

Import

import { ArticleCard } from 'damo-ui'

Live preview

REGOLA

Use semantic tokens, not raw scales

Always reach for bg-card rather than bg-paper-100 in product code.

Raw scales are private and can change between releases.

1<ArticleCard label="REGOLA" title="Use semantic tokens, not raw scales">
2  <p>Always reach for <code>bg-card</code> rather than <code>bg-paper-100</code> in product code.</p>
3  <p>Raw scales are private and can change between releases.</p>
4</ArticleCard>

Props

ArticleCard props
PropTypeDefaultDescription
labelstring—Optional mono uppercase eyebrow.
title*string—Display-font headline.
children*ReactNode—Body content. Multi-paragraph allowed.

Accessibility

  • Renders as a <div>; wrap with <article> or set role="article" when used as a standalone reading unit. All standard aria-* props pass through.
  • The eyebrow label is decorative. If it adds semantic context (e.g. "BREAKING"), promote it to a heading or set aria-label on the article.
← FeatureCardMemphisShape →