Compositions
Article Card
Cover image, category, headline, excerpt, author and reading time.
Today
CitiesWhy new towers are getting thinner, and tallerCheaper steel and stricter zoning push developers up instead of out. What it changes for the street below.
S
Sam OkaforSep 24 · 6 min read
TravelAbove the clouds: a week on the Haute Route
L
Lena MoreauSep 21 · 9 min read
Article Card is designed for a vertical feed: each card takes the full width of the list, one article per row. There is no width to set.
Installation
npx axiom add article-cardpnpm dlx axiom add article-cardyarn dlx axiom add article-cardbun x axiom add article-cardAlso copies: card, avatar, title, text and their dependencies. The file lands in components/compositions/article-card.tsx. It brings no tokens of its own.
Usage
import { ArticleCard } from "@/components/compositions/article-card";
<ArticleCard
title={article.title}
image={{ uri: article.cover }}
category="Cities"
excerpt={article.summary}
author={{ name: article.author.name, avatar: { uri: article.author.photo } }}
meta={`${formatDate(article.publishedAt)} · ${article.readingTime} min read`}
onPress={() => router.push(`/articles/${article.slug}`)}
/>;meta is one line of text: the card doesn’t format dates or reading times, so it follows your app’s locale.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | — | The headline, up to three lines. |
image | ImageSourcePropType | — | The cover, in 16:9 at the top of the card. |
category | string | — | Above the headline, in capitals and in the link color: "Design", "World". |
excerpt | string | — | Up to two lines under the headline. |
author | ArticleAuthor | — | { name, avatar? }. A small Avatar and the name, in the byline. |
meta | string | — | Already formatted, under the author: "Sep 24 · 6 min read". |
onPress | () => void | — | Makes the whole card pressable, to open the article. Its label reads the category, headline and author. |
style | StyleProp<ViewStyle> | — | Extra styles for the card container, for example a margin. |
Built with
- Card: the elevated surface, its media and header.
- Title: the headline.
- Text: the category, the excerpt and the byline.
- Avatar: the author, or their initials.
Used in
No block uses Article Card yet.