PostCard and HighlightCard

PostCard is the default card for one post in a grid or row list, and HighlightCard is the full-bleed card for a lead post. PostsList renders both for you; use them directly when you lay posts out yourself, for example a single featured post in a sidebar.

PostCard

Design

Designing with tokens from day one

Mira Kovač•September 14, 2026

How a small team keeps a large site consistent without slowing its editors down.

import { PostCard, type PostView } from '@systhemaui/next'

const post: PostView = {
  id: 1,
  title: 'Designing with tokens from day one',
  label: 'Design',
  href: '#',
  excerpt: 'How a small team keeps a large site consistent without slowing its editors down.',
  tags: [],
  postType: 'article',
  author: { name: 'Mira Kovač', avatar: { url: '/demo-assets/avatar-1.webp' } },
  publishedAt: '2026-09-14T09:00:00.000Z',
  media: { url: '/demo-assets/mountains.webp', alt: '', width: 1920, height: 1080 },
  layout: 'grid3',
  doc: null,
}

export default function Demo() {
  return (
    <div className="w-full max-w-sm">
      <PostCard post={post} />
    </div>
  )
}

ImportLink to this section

import { HighlightCard, PostCard } from '@systhemaui/next'

In a React app without Next.js, import them from @systhemaui/react. Both take a PostView as post.

PostCardLink to this section

A vertical stack of media, label, title, byline (author and date) and excerpt, with an optional "read more". The React card is presentational: it renders no link and fetches nothing. The Next.js card links the whole card to post.href (see Next.js).

Default parts per layoutLink to this section

post.layout (grid2, grid3, grid4 or row) decides the media aspect ratio and which parts show by default. PostsList sets it from its view; set it yourself when you render a card on its own.

Media, label, title, author and date are on in every layout. On small screens every layout is stacked, media first. From md the row card becomes a two-column grid (1fr 2fr) with the text top-aligned.

import { PostCard, type PostView } from '@systhemaui/next'

const post: PostView = {
  id: 1,
  title: 'Shipping a multilingual site in a week',
  label: 'Engineering',
  href: '#',
  tags: [],
  postType: 'article',
  author: { name: 'Jonas Weber' },
  publishedAt: '2026-09-02T09:00:00.000Z',
  media: { url: '/demo-assets/city.webp', alt: '', width: 1920, height: 1080 },
  layout: 'row',
  doc: null,
}

export default function Demo() {
  return (
    <div className="w-full">
      <PostCard post={post} />
    </div>
  )
}

PartsLink to this section

config.show turns parts on or off and config.classNames overrides a part's classes. An override is merged with tailwind-merge, so aspect-square replaces the default aspect-[4/3] while non-conflicting classes are added.

PostCard's config also takes four presentation values, applied as inline styles so any value works without a Tailwind build: aspectRatio (CSS aspect-ratio of the media, such as '1/1'), mediaGap (the gap between media and text, such as 'var(--gap-md)'), and for the row layout from md up mediaWidth (grid-template-columns, default '1fr 2fr') and bodyAlign (align-self of the text).

Square media, no excerpt, a read-more link

Design

A field guide to spacing

Mira Kovač•August 28, 2026

Read the guide

import { PostCard, type PostView } from '@systhemaui/next'

const post: PostView = {
  id: 1,
  title: 'A field guide to spacing',
  label: 'Design',
  href: '#',
  excerpt: 'Why the rich-text rhythm beats hand-tuned margins.',
  tags: [],
  postType: 'article',
  author: { name: 'Mira Kovač' },
  publishedAt: '2026-08-28T09:00:00.000Z',
  media: { url: '/demo-assets/coast.webp', alt: '', width: 1800, height: 1200 },
  layout: 'grid3',
  doc: null,
}

export default function Demo() {
  return (
    <div className="w-full max-w-xs">
      <PostCard
        post={post}
        config={{ show: { excerpt: false, readMore: true }, aspectRatio: '1/1' }}
        readMoreLabel="Read the guide"
      />
    </div>
  )
}

A post without media renders an empty placeholder box of the same aspect ratio, so a grid stays aligned.

HighlightCardLink to this section

A full-bleed card: the media fills the card, a dark scrim covers it, and the label, title, byline and excerpt sit bottom left in white, at most half the card's width from md. It is 4:5 on small screens and 16:9 from md. Every part is on by default except readMore; turn the scrim off with config.show.overlay: false.

import { HighlightCard, type PostView } from '@systhemaui/next'

const post: PostView = {
  id: 1,
  title: 'Designing with tokens from day one',
  label: 'Design',
  href: '#',
  excerpt: 'How a small team keeps a large site consistent without slowing its editors down.',
  tags: [],
  postType: 'article',
  author: { name: 'Mira Kovač', avatar: { url: '/demo-assets/avatar-1.webp' } },
  publishedAt: '2026-09-14T09:00:00.000Z',
  media: { url: '/demo-assets/city.webp', alt: '', width: 1920, height: 1080 },
  doc: null,
}

export default function Demo() {
  return (
    <div className="w-full">
      <HighlightCard post={post} />
    </div>
  )
}

ColorLink to this section

PostCard follows the active color system like Heading and Paragraph: the title carries color-heading, the excerpt color-body, and the card root sets its color from --color-typography-body so the label and byline mute against the right base. Put a card on a themed Section and its text follows that theme, or pass theme to set data-theme on the card itself. A text color in classNames.title or classNames.excerpt still wins, because utilities beat the component layer. HighlightCard is always white on its scrim.

PropsLink to this section

PostCard propsLink to this section

renderImage(media) replaces the default <img> (the Next.js card passes next/image). disableAnimation turns off the card's scroll reveal; by default it carries packages.react.animationClasses from your config.

HighlightCard propsLink to this section

HTML and CSSLink to this section

The .post-card* and .post-highlight* hooks come from the posts CSS layer. A grid card's markup is on PostsList; a highlight card looks like this:

<article class="post-highlight relative aspect-[4/5] overflow-hidden rounded-xl md:aspect-video">
  <div class="post-highlight-media absolute inset-0">
    <img src="/media/mountains.webp" alt="" class="size-full object-cover" />
  </div>
  <div class="post-highlight-scrim absolute inset-0" aria-hidden="true"></div>
  <div
    class="post-highlight-overlay absolute inset-0 flex flex-col justify-end gap-4 p-7 text-white md:max-w-[50%]"
  >
    <span class="post-highlight-label text-label">Design</span>
    <h2 class="post-highlight-title text-h4">Designing with tokens from day one</h2>
    <div class="post-meta post-highlight-meta text-small flex flex-wrap items-center gap-x-2">
      <span class="post-meta-author">Mira Kovač</span>
      <span class="post-meta-separator" aria-hidden="true">•</span>
      <time class="post-meta-date" datetime="2026-09-14">September 14, 2026</time>
    </div>
    <p class="post-highlight-excerpt text-body">How a small team…</p>
  </div>
</article>

The scrim gradient is .post-highlight-scrim in the posts layer.

Next.jsLink to this section

PostCard in Next.jsLink to this section

When linked (default true) is on and the post has an href, the whole card is wrapped in next/link, and the media renders through next/image (fill, objectFit="cover") with a sizes hint from sizesForLayout(post.layout). With no href, or linked={false}, it renders the React card. It takes the React props except renderImage, plus linked.

import { PostCard } from '@systhemaui/next'

;<PostCard post={postView} linked={false} />

HighlightCard in Next.jsLink to this section

The media renders through next/image with fill, sizes="100vw" and priority, so it loads eagerly as the likely LCP image, and the card links through next/link. Use one highlight card per page, above the fold. It takes the React props except renderImage, plus linked.

AccessibilityLink to this section

• The card is an <article> with a real heading: <h3> for PostCard (headingLevel 2 to 4) and <h2> for HighlightCard (headingLevel 1 to 3).
• The date is a <time datetime> with the ISO date.
• The "read more" text is aria-hidden, because the whole card is the link; it does not repeat in the link's name.
• The scrim is aria-hidden. Featured media is usually decorative next to the title, so an empty alt is fine; give media.alt a value when the image carries information the title does not.

RelatedLink to this section

• PostsList
• PostMeta
• Posts view model and helpers
• Customizing the presentation