Layout
A world-class responsive container component for consistent page layouts. Provides centered content with proper max-width constraints and responsive padding.
Choose the appropriate container size based on content type and optimal reading width.
xs (320px) - Narrow dialogs
Extra Small
sm (672px) - Forms and focused content
Small
prose (65ch) - Optimal reading width for text
Prose
md (896px) - Article content and detail views
Medium
lg (1024px) - Dashboards and data tables
Large
xl (1152px) - Default page layouts
Extra Large (default)
2xl (1280px) - Wide content areas
2XL
Use the prose size (65ch) for optimal reading width in clinical documentation.
Patient presents with mild symptoms consistent with seasonal allergies. No signs of respiratory distress. Vitals within normal range. Recommended over-the-counter antihistamines and follow-up in two weeks if symptoms persist.
Previous medical history reviewed. No known drug allergies. Current medications include daily multivitamin. Patient education provided regarding symptom management and when to seek additional care.
Add vertical padding for section spacing. Responsive padding increases at larger viewports.
paddingY="sm"
paddingY="md"
paddingY="lg"
Use Container to create consistent, centered page layouts for healthcare dashboards.
Overview of today's activity and key metrics
Use the 'as' prop to render semantic HTML elements for better accessibility and SEO.
Rendered as <main> - Main page content
Rendered as <section> - Thematic groupings
Rendered as <article> - Self-contained content
| Prop | Type | Default | Description |
|---|---|---|---|
size | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'prose' | 'full' | 'xl' | Maximum width of the container |
paddingX | 'none' | 'sm' | 'md' | 'lg' | 'xl' | — | Horizontal padding (responsive) |
paddingY | 'none' | 'sm' | 'md' | 'lg' | 'xl' | — | Vertical padding |
padding | 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'md' | Shorthand for paddingX (paddingY defaults to none) |
centered | boolean | true | Whether to center the container horizontally |
as | 'div' | 'main' | 'section' | 'article' | 'div' | Semantic HTML element to render |
id | string | — | Optional ID for the container |
size="prose" for clinical notes and documentation for optimal reading width.size="sm" or size="md" for patient intake forms.size="xl" or size="2xl" for data-heavy interfaces.as="main" for primary content area, as="article" for patient records.as values for proper document structure.<main> and <article> create landmark regions for screen readers.id prop for skip links and anchor navigation.