Layout Components

Page structure and layout components for building consistent interfaces. These components handle spacing, grids, headers, and common page patterns.

Installation

npm install @happyvertical/smrt-svelte

import { Container, Grid, EmptyState } from '@happyvertical/smrt-svelte';

Centered max-width container with responsive padding.

Responsive grid layout with configurable columns and gaps.

Placeholder for empty lists or content areas with icon and CTA.

Site header with navigation slots.

Site footer with links and content slots.

Hero section for page headers with title and subtitle.

Page title with breadcrumbs and actions.

Compact info card for dashboards and metrics.

Common layout patterns using these components:

Header + Container + Footer for consistent page structure.

Grid of SummaryCards with EmptyState fallback.

Masthead + Container with PageHeader for long-form content.

Container with Grid of cards or EmptyState when empty.