Layout Components
Flexible layout patterns for structuring content across different screen sizes and devices.
Container Layouts
Responsive containers that adapt to different screen sizes with proper padding and max-widths.
Full Width Container
Full width container stretches edge to edge
Constrained Container
Max-width container with responsive padding
Narrow Container
Narrow container for focused content like articles
Grid Layouts
Flexible grid systems for organizing content in columns and rows.
Responsive Grid
Asymmetric Grid
Card Grid
Card 1
Card content goes here
Card 2
Card content goes here
Card 3
Card content goes here
Card 4
Card content goes here
Card 5
Card content goes here
Card 6
Card content goes here
Split Layouts
Two-column layouts with various split ratios and responsive behavior.
Main Content
Primary content area that takes up most of the space
Stack Layouts
Vertical stacking patterns with consistent spacing.
Basic Stack
Stack with Dividers
Centered Stack
Welcome
Centered content for onboarding
Hero Layouts
Full-width hero sections for landing pages and marketing content.
Fresh from Local Farms
Connect with local growers and enjoy the freshest produce in your community
Split Hero
Grow Your Business
Join our marketplace and reach more customers in your community.
Feature Sections
Common layout patterns for showcasing features and benefits.
Features Grid
Fresh Produce
Harvested at peak freshness and delivered same day
Local Delivery
Supporting local farmers and reducing food miles
Sustainable
Environmentally friendly farming practices
Alternating Features
Shop Local Markets
Browse fresh produce from multiple local farms in one convenient marketplace.
Support Local Farmers
Your purchases directly support small family farms in your community.
Responsive Utilities
Helper classes for controlling layout behavior at different breakpoints.