Badge
Inline label badge with five variants: ink, accent, cta, ghost, and parchment. Suited for tags, status labels, and category markers.
<Badge variant="accent">Editorial</Badge><Badge variant="ink">Default</Badge>
<Badge variant="accent">Editorial</Badge>
<Badge variant="cta">New</Badge>
<Badge variant="ghost">Archived</Badge>
<Badge variant="parchment">Draft</Badge>
import { cn } from '@/lib/utils'
type BadgeVariant = 'ink' | 'accent' | 'cta' | 'ghost' | 'parchment'
interface BadgeProps {
variant?: BadgeVariant
className?: string
children: React.ReactNode
}
export function Badge({
variant = 'ink',
className,
children,
}: BadgeProps): React.JSX.Element {
return (
<span className={cn('folio-badge', `folio-badge-${variant}`, className)}>
{children}
</span>
)
}
Button
Multi-variant button with primary, secondary, and ghost styles in three sizes. Renders as a Next.js Link when an href is provided.
Card
Composable card container with sharp zero-radius corners in the FOLIO aesthetic. Pairs with folio-card-header, folio-card-body, and folio-card-footer CSS classes.
Calendar
Interactive month-view calendar with previous/next navigation and day selection. Highlights today in forest green and the selected day in cognac.
DateBlock
Magazine-style date display that renders month, day number, and weekday name in an editorial dateline layout. Server component.
Pullquote
Editorial blockquote with ruled top and bottom borders and an optional attribution citation. Suited for testimonials and highlighted copy.
Text
Polymorphic text primitive with body, caption, label, and code variants. Renders as any inline or block HTML tag via the `as` prop.
Hero
Three-column editorial hero with a 44px spine, a full-width copy column, and a 380px table-of-contents sidebar. Includes a scrolling ticker strip and collapses to a single column on mobile.
Features
Ledger-row feature list using a 56px index gutter, feature title, description, and a right-aligned tag. Roman numeral indexes reinforce the editorial aesthetic.
About
Two-column about section with forest green background, a pullquote, and body copy. Pairs a narrative text column with a supporting details column.