ArticleCard · ui.voila.dev

Why every launch deserves a dedicated freelancer

Every week, thousands of product launches ship without any dedicated design support.

July 12, 2026

<ArticleCard.Root href="/blog/my-article">
	<ArticleCard.Frame>
		<ArticleCard.Image src={cover} alt="Cover" />
		<ArticleCard.Content>
			<ArticleCard.Tags>
				<ArticleTags.Tag>Hiring</ArticleTags.Tag>
			</ArticleCard.Tags>
			<ArticleCard.Title>Why brief your freelancer…</ArticleCard.Title>
			<ArticleCard.Description>Every kickoff…</ArticleCard.Description>
			<ArticleCard.Meta>
				<ArticleCard.MetaItems>
					<ArticleCard.MetaItem><CalendarBlankIcon />July 12, 2026</ArticleCard.MetaItem>
				</ArticleCard.MetaItems>
				<ArticleCard.Arrow />
			</ArticleCard.Meta>
		</ArticleCard.Content>
	</ArticleCard.Frame>
</ArticleCard.Root>

Root is the link, so nothing inside it should be one. Posts with no cover use ArticleCard.ImageFallback, which keeps the card the same height as its neighbours in a grid.

📝

An article without a visual

The card keeps the same layout, with a flat fill in place of the image.

July 12, 2026

API

ArticleCard.Root

Prop	Type	Default
`render`	`ComponentRenderFn<HTMLProps, {}>` \| `ReactElement<unknown, string \| JSXElementConstructor<any>>`	—	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.

Plus every <a> prop. Source: landing/components/article-card/root.tsx.

ArticleCard.Arrow

Prop	Type	Default
`alt`	`string`	—
`color`	`string`	—
`mirrored`	`boolean`	—
`size`	`string \| number`	—
`weight`	`IconWeight`	—

Plus the DOM props of the element it renders. Source: landing/components/article-card/arrow.tsx.

The five undescribed props on this part are Phosphor's own, shared by every icon in the kit and not annotatable from here — see Icon, which covers what they do.

ArticleCard.Content

Plus every <div> prop. Source: landing/components/article-card/content.tsx.

ArticleCard.Description

Plus every <p> prop. Source: landing/components/article-card/description.tsx.

ArticleCard.Frame

Plus every <article> prop. Source: landing/components/article-card/frame.tsx.

ArticleCard.Image

Prop	Type	Default
`alt`	`string`	required	Required, not optional: a card image carries the article's subject.

Plus every <img> prop. Source: landing/components/article-card/image.tsx.

ArticleCard.ImageFallback

Plus every <div> prop. Source: landing/components/article-card/image-fallback.tsx.

ArticleCard.Meta

Plus every <div> prop. Source: landing/components/article-card/meta.tsx.

ArticleCard.MetaItem

Plus every <span> prop. Source: landing/components/article-card/meta-item.tsx.

ArticleCard.MetaItems

Plus every <div> prop. Source: landing/components/article-card/meta-items.tsx.

ArticleCard.Tags

Plus every <div> prop. Source: landing/components/article-card/tags.tsx.

ArticleCard.Title

Prop	Type	Default
`render`	`ComponentRenderFn<HTMLProps, {}>` \| `ReactElement<unknown, string \| JSXElementConstructor<any>>`	—	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.

Plus every <h3> prop. Source: landing/components/article-card/title.tsx.