Docs
Forge
FeedCard

FeedCard

An activity feed item with avatar, headline, detail text, and relative time.

Import

import { FeedCard } from "@gumtree/ui/forge/FeedCard";

Props

Prop	Type	Default	Description
`avatarPlaceholder`	`string`	-	Initial letter for the avatar placeholder
`avatarSrc`	`string`	-	URL for the avatar image
`avatarColor`	`string`	-	Background color for the avatar placeholder
`headline`*	`ComponentChildren`	-	Primary content — supports links, badges, and inline elements
`detail`	`ComponentChildren`	-	Secondary description text
`time`	`string`	-	Relative timestamp

Examples

With Detail

A feed card showing a merge event with a badge.

carol merged PR #128 in example-app merged

BCP-47 locale matching with fallback chains

<FeedCard
  avatarPlaceholder="C"
  headline={<><strong>carol</strong> merged PR <a>#128</a> in <a>example-app</a> <FeedBadge status="merged" /></>}
  detail="BCP-47 locale matching with fallback chains"
  time="4d"
/>

Minimal

A simple feed card with just a headline.

You starred nickel-lang/nickel

Programmable configuration language — 2.4k stars

<FeedCard
  avatarPlaceholder="B"
  headline={<>You starred <a>nickel-lang/nickel</a></>}
  detail="Programmable configuration language — 2.4k stars"
  time="1d"
/>