The components topic covers every visual building block shipped with the theme — from base document components and design-system primitives through navigation, UI elements, forms, and search. Each component follows the ownership model, consumes semantic design tokens, and is validated by the lint and accessibility pipeline.
Who this is for
- Implementors — assembling pages from the available component library and understanding which components are CORE-OWNED versus SITE-OWNED.
- Developers — building new components or extending existing ones while staying within the token contract and accessibility requirements.
- AI agents — generating markup that uses the correct component APIs, slot patterns, and semantic token references.
Key concepts
- Layered component tiers — components are organized from low-level base elements (Head, BaseLayout) through primitives (buttons, links, badges) up to composite patterns (header, footer, search, forms). Higher-tier components compose lower-tier ones.
- Semantic token consumption — all components reference
--st-*tokens for color, never raw values or primitive tokens. This is enforced by the token linter. - Slot-based composition — Astro’s named slots allow pages to inject content into component regions without modifying component source files.
- Accessibility by default — components ship with ARIA attributes, keyboard interaction patterns, and focus management. The a11y gate validates every variant.
In This Topic
- ArticleCard — Card component for article listing and paginated archive pages.
- Base Components — Document-level SEO and shell utilities — SEO, Analytics, Favicon, SkipLink, ConsentBanner, and ConsentReset.
- CallToAction — Standalone call-to-action block with stacked and split layout variants, optional media, and built-in analytics tracking.
- Drawer — Slide-in overlay primitive with focus trapping, scroll lock, ESC close, and reduced-motion support.
- FeatureGrid — Card grid section with optional icons, powered by SectionCard, for showcasing features or capabilities.
- Footer Navigation — Reference for Footer, UtilityNav, and SocialLinks components, including C4 layout composition and configuration-driven behavior.
- Forms & Submission — Form primitives, contact form, newsletter signup, server-side submission pipeline, CAPTCHA, and spam protection.
- Header & Navigation — Site header shell, desktop and mobile navigation, theme switcher, search trigger, site logo, and the Drawer overlay primitive.
- Hero — Full-width hero section with dual-mode rendering — compact page-title band or full hero with image and actions.
- InfoCards — Card grid section powered by SectionCard for displaying structured content items with media, badges, and action links.
- Image Lightbox — Full-screen image lightbox overlay with gallery navigation, keyboard/touch support, and progressive enhancement — covers Lightbox (overlay) and LightboxImage (trigger) components.
- Interactive Components — Reference for Accordion, Tabs, Tooltip, CopyButton, PostShare, Sticky TOC, Scroll-to-Top, YouTubeEmbed, and Embed.
- SurfaceBox — Lightweight styled box primitive with background variants and overflow clipping for constrained surfaces.
- Primitive Components — Low-level UI building blocks — icons, buttons, links, headings, badges, dates, sections, dropdowns, and list boxes.
- Search — Pagefind search integration, global search modal, dedicated search page, and search event stubs.
- SectionCard — Shared card primitive used by InfoCards and FeatureGrid section components.
- Table of Contents — Three-component TOC architecture — shared link list, sticky sidebar with active-link tracking, and collapsible inline display.
- Testimonials — Quote card section with grid and centered layout variants, supporting avatars, attribution links, and card background surfaces.
- UI Components — Breadcrumbs, EmptyState, Pagination, PrevNextNav, and RelatedContent component reference.
- Separator — Styled horizontal rule or vertical divider with visual variants for content separation.
- ButtonGroup — Flex wrapper for grouping multiple Button components with configurable direction, alignment, and gap.
- Pullquote — Decorative pull quote with citation, visually distinct from standard prose blockquotes.
- TimeToRead — Presentational reading time display with icon, consuming the remark-reading-time plugin output.
- Columns — Generic N-column CSS grid layout with responsive collapse and three column patterns.
- MediaText — Content-level split layout with image and text, reversible order and configurable split ratios.
- Table — Responsive styled table wrapper with horizontal scroll and stacked mobile layout options.
- Gallery — Image grid layout composing LightboxImage with configurable columns and lightbox group integration.
- Cover — Background image with overlay and positioned content for hero-style blocks and feature highlights.
- MasonryGallery — CSS columns-based masonry layout for images with lightbox integration.
- Timeline — Vertical timeline for project histories, about pages, and changelogs with date markers.