FORMA Docs

Blog grid

A blog index with a featured post, category filter, post cards, pagination and an in-place reader.

import { BlogGrid } from "@/forma/arc/blocks/blog-grid/blog-grid";
Base

In FORMA

  • Liegt in kit/arc/blocks/blog-grid und ist über @/forma/arc/blocks/blog-grid/blog-grid erreichbar.
  • Farbe, Ecken, Höhen, Abstände, Tiefe, Schrift und Tempo kommen aus der Richtung (core/arc-bridge.ts); Arc behält Verhalten, Tastatur und Federn.

When to use

  • A marketing site blog or journal index.
  • Resource hubs with a few categories and a featured story.

When not to use

  • Use changelog-page for release notes with versions.
  • Use a data table for large archives that need sorting and search.

Usage

import { BlogGrid } from "@/forma/arc/blocks/blog-grid/blog-grid";

export function BlogIndex({ posts }: { posts: BlogPost[] }) {
  return (
    <BlogGrid
      posts={posts}
      categories={["Product", "Design", "Engineering", "Company"]}
      getHref={post => `/blog/${post.id}`}
    />
  );
}

API reference

BlogGrid

A blog index: title, category filter with a gliding highlight, a large featured post, a responsive card grid and pagination. Without getHref, cards open an in-place reader whose image morphs out of the card.

PropTypeDefaultDescription
postsBlogPost[]sample postsPosts to list. Sorted newest first by date.
categoriesstring[]–Filter labels in order. "All" is added in front.
titlestring"Journal"Section heading.
descriptionstring–Line under the heading. Pass an empty string to hide it.
categorystring–Active category, or "All" (controlled).
defaultCategorystring"All"Initial category when uncontrolled.
onCategoryChange(category: string) => void–Called when a filter is picked. The page resets to 1.
pagenumber–One based page (controlled).
defaultPagenumber1Initial page when uncontrolled.
onPageChange(page: number) => void–Called from the page numbers and the previous and next buttons.
pageSizenumber6Cards per page below the featured post.
showFeaturedbooleantrueShows the post marked featured (or the newest) of the current filter as a large card on page one.
getHref(post: BlogPost) => string–Link for each post. When set, cards are plain links and the in-place reader is off.
onPostOpen(post: BlogPost) => void–Called when a post opens, for analytics or routing.
classNamestring–Extra class on the section.

BlogPost

One post.

PropTypeDefaultDescription
id (required)string–Stable id, also the fallback hash link.
title (required)string–Card and reader title.
excerpt (required)string–Two line summary on cards, the lead paragraph in the reader.
category (required)string–Must match one of categories to be filterable.
date (required)string–ISO date (YYYY-MM-DD).
readTime (required)number–Minutes to read.
author (required){ name: string; avatar?: string; role?: string }–Byline.
image{ src: string; alt: string }–Cover image. Cards crop it to 3:2.
bodystring[]–Paragraphs for the in-place reader.
featuredboolean–Prefer this post for the featured slot.

Keyboard interactions

KeysAction
TabMoves through filters, cards, and pagination.
EnterOpens the focused post, or picks the focused filter or page.
SpacePicks the focused filter or page.

Accessibility

  • Filters are buttons with aria-pressed; pagination is a nav with aria-current on the active page.
  • Each card is one link with the title, excerpt and byline as its content, so screen readers announce it once.
  • The reader moves focus to its back button, and closing returns focus to the card you opened.
  • Images carry real alt text; author avatars are decorative.

Motion

  • The filter and page highlights glide on the morph spring.
  • Filtering crossfades the grid with a short rise; paging slides it in the direction of travel.
  • Opening a post morphs the card image into the reader hero, and back on close.
  • Card images zoom 3% on hover (fine pointers only).
  • Reduced motion swaps travel and morphs for plain fades.

Responsive behavior

  • Three columns above 900px, two to 540px, then one.
  • The featured post stacks its image above the text below 680px.
  • Filters scroll sideways on phones; Previous and Next collapse to arrows.

Performance

  • Only one page of cards renders at a time; images below the fold load lazily.
  • Transitions animate transform and opacity only.

Notes for AI

  • Choose this for a blog, journal, news or resources index.
  • Pass getHref for real article routes; leave it out for a self-contained demo or a small site that reads posts in place.
  • Drive category and page from the URL with the controlled props so the index is linkable.

Guidance for AI tools

Blocks are complete, self-contained screens with sample data. Replace the sample data and connect the callbacks described above. Follow the declared prop types and do not invent props. Keep keyboard access, reduced motion support, and both light and dark themes intact when adapting it.

Full library index: https://uiarc.dev/llms.txt

ZurückContact sectionWeiterComparison table

Komponente und Text: Arc UI (MIT, uiarc.dev), angepasst für FORMA.