Blog Header
Introduce an article with its title, metadata, and description.
Preview
Import
import { BlogHeader } from "@sigil-ui/components";Usage
<BlogHeader
title="Notes on"
accent="designed software"
subtitle="Research, field notes, and practical guidance from the Sigil team."
categories={["All", "Tokens", "Components", "Workflow"]}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
title (required) | string | — | Heading displayed in the component. |
accent | string | — | Accent configuration. |
subtitle | string | — | Subtitle configuration. |
categories | string[] | — | Categories configuration. |
activeCategory | string | — | Active Category configuration. |
onCategoryChange | (category: string) => void | — | On Category Change configuration. |
icon | ReactNode | — | Icon configuration. |
Token integration
| CSS Variable | Purpose |
|---|---|
--s-font-display | Font display |
--s-text | Text |
--s-primary | Primary |
--s-text-muted | Text muted |
--s-border | Border |
--s-border-style | Border style |
--s-font-mono | Font mono |
--s-surface-elevated | Surface elevated |
--s-duration-fast | Duration fast |