Post Card Components
Cards for displaying articles — standard, hero, and featured variants. Plus metadata, tags, sharing, and membership components.
PostCard — Default
PostStandard card with thumbnail left, title + meta right.
<PostCard title="..." url="..." image="..." variant="default" />
PostCard — Compact
PostSmall thumbnail, title only — for minimal lists.
<PostCard title="..." url="..." image="..." variant="compact" />
PostCard — Text Only
PostNo image, just title and meta.
<PostCard title="..." url="..." variant="text-only" />
PostCardHero
PostLarge hero-style card — full-width image with title and excerpt below.
OpenAI Announces GPT-5 with Multimodal Reasoning Capabilities
The next generation of large language models brings native image, audio, and video understanding to a single unified model.
<PostCardHero title="..." url="..." image="..." excerpt="..." />
PostCardFeatured — Column
PostVertical card with image on top. Used in grids.
<PostCardFeatured title="..." url="..." image="..." layout="column" />
PostCardFeatured — Row
PostHorizontal card with image on left, content on right.
EU AI Act Enforcement Begins: What Companies Need to Know
Compliance deadlines and penalties for high-risk AI systems take effect.
<PostCardFeatured title="..." url="..." image="..." layout="row" />
PostCardFeatured — Row Reverse
PostHorizontal card with image on right.
<PostCardFeatured layout="row-reverse" />
PostCardFeatured — Text Only
PostNo image, title and meta only.
<PostCardFeatured showImage={false} /> PostCardFeatured — Small
PostSmall size modifier.
<PostCardFeatured size="small" />
PostCardFeatured — Large
PostLarge size modifier with bigger title.
Tesla Cybertruck Production Hits 5,000 Per Week Milestone
Austin Gigafactory ramps to meet strong demand across North America.
<PostCardFeatured size="large" />
PostMeta
PostAuthor, date, and status badges (video, featured, locked).
<PostMeta author={...} date="..." dateFormatted="..." /> PostTags
PostTag list with icon prefix and accent colors.
<PostTags tags={[{ name: "Tech", url: "#", accentColor: "#3b82f6" }]} /> MembershipCta
PostPaywall / subscribe CTA for members-only content.
<MembershipCta visibility="members" />