Blog Grid
Present articles in a responsive grid of summaries.
Preview
Import
import { BlogGrid } from "@sigil-ui/components";Usage
<BlogGrid
columns={3}
posts={[
{ category: "Design systems", title: "Why constraints scale", excerpt: "A practical guide to keeping interface decisions coherent.", author: "Sigil", date: "6 min", href: "/docs" },
{ category: "Tokens", title: "One source of visual truth", excerpt: "How a complete token model prevents component drift.", author: "Sigil", date: "4 min", href: "/docs" },
{ category: "Workflow", title: "Designing with agents", excerpt: "Give agents enforceable constraints instead of screenshots.", author: "Sigil", date: "8 min", href: "/docs" },
]}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
posts (required) | BlogPost[] | — | Posts configuration. |
variant | "grid" | "featured" | — | Selects a supported visual treatment. |
columns | number | — | Columns configuration. |
Token integration
| CSS Variable | Purpose |
|---|---|
--s-border | Border |
--s-border-style | Border style |
--s-radius-md | Radius md |
--s-surface | Surface |
--s-duration-fast | Duration fast |
--s-duration-normal | Duration normal |
--s-background | Background |
--s-font-mono | Font mono |
--s-text | Text |
--s-text-muted | Text muted |
--s-radius-sm | Radius sm |
--s-card-padding | Card padding |