Layout Components
Layout components help organize and structure your applications. Use them to create proper spacing, grouping, and visual hierarchy.
Available Layout Components
Container
Content wrappers for grouping and organizing components.
- • Content grouping
- • Background styling
- • Padding and margins
- • Responsive behavior
Separator
Visual dividers to separate content sections.
- • Horizontal and vertical lines
- • Custom styling
- • Spacing control
- • Visual hierarchy
Tabs
Tabbed content organization for better space utilization.
- • Multiple content panels
- • Tab navigation
- • Custom tab styling
- • Dynamic content
Dialog
Modal windows for focused interactions and information display.
- • Modal overlays
- • Focus management
- • Custom content
- • Close actions
Heading
Title hierarchy for organizing content structure.
- • H1-H6 heading levels
- • Semantic structure
- • Custom styling
- • Accessibility support
Layout Principles
Visual Hierarchy
Use layout components to create clear visual hierarchy and guide users through your content:
Use headings to create content structure
Group related content with containers
Separate sections with dividers
Use tabs for organized content
Spacing and Alignment
Consistent Spacing
- • Use containers for padding
- • Apply consistent margins
- • Create breathing room
- • Maintain visual balance
Content Alignment
- • Align related elements
- • Use grid systems
- • Maintain consistency
- • Create visual flow
Component Properties
Container Properties
Layout Properties
- • Width and height
- • Padding and margins
- • Background color
- • Border styling
Responsive Properties
- • Mobile breakpoints
- • Tablet adjustments
- • Desktop optimization
- • Flexible sizing
Tabs Properties
Tab Configuration
- • Tab labels
- • Tab content
- • Default active tab
- • Tab icons
Styling Options
- • Tab appearance
- • Active state styling
- • Content area styling
- • Animation effects
Common Layout Patterns
Dashboard Layout
Create organized dashboards with proper structure:
Main heading for page title
Containers for different sections
Separators between sections
Tabs for different views
Form Layout
Organize forms with proper structure and spacing:
Form heading and description
Container for form fields
Separators between form sections
Dialog for confirmation messages
Responsive Design
Mobile-First Approach
Layout components automatically adapt to different screen sizes:
Mobile
- • Single column layout
- • Stacked containers
- • Touch-friendly tabs
- • Full-width dialogs
Tablet
- • Two-column layout
- • Side-by-side containers
- • Optimized tab spacing
- • Centered dialogs
Desktop
- • Multi-column layout
- • Flexible containers
- • Horizontal tabs
- • Modal dialogs
Responsive Testing
Always test your layouts on different screen sizes to ensure they work well across all devices. Use the viewport controls in the app builder to preview different screen sizes.
Best Practices
Content Organization
Use containers to group related content and create logical sections. This improves readability and user experience.
Visual Hierarchy
Use headings to create clear content structure and guide users through your application. Maintain consistent heading levels.
Spacing Consistency
Apply consistent spacing throughout your application. Use containers and separators to create visual breathing room.