Full Width Layout
Full width content isBlock spanning the entire row
Two Columns Layout (50/50)
Left Column
Right Column
Three Columns Layout (33/33/33)
Column 1
Column 2
Column 3
Sidebar Layout (25/75)
Sidebar
Main Content Area
Asymmetric Layout (67/33)
Main Content (2/3)
Side Panel (1/3)
Four Columns Layout (25/25/25/25)
Col 1
Col 2
Col 3
Col 4
Mixed Pattern (1-2-1-2-1)
Full Width Header
Half Left
Half Right
Full Width Middle
Half Left
Half Right
Full Width Footer
Complex Nested Layout
Nested 1
Nested 2
Nested Full
Sidebar Content
Card Layout Patterns
Various arrangements of cards using responsive grid layouts.
Full Width Card
Full Width Card
This card spans the entire width of the container.
Two Column Cards (50/50)
Left Card
Half width card on the left side.
Right Card
Half width card on the right side.
Three Column Cards (33/33/33)
Card 1
First of three equal cards.
Card 2
Second of three equal cards.
Card 3
Third of three equal cards.
Sidebar + Main Cards (25/75)
Sidebar Card
Narrow sidebar card for navigation or quick info.
Main Content Card
Wide main content card taking up most of the space.
Four Column Cards (25/25/25/25)
Card A
Quarter width card.
Card B
Quarter width card.
Card C
Quarter width card.
Card D
Quarter width card.
Asymmetric Cards (67/33)
Main Content Card
Larger card taking up 2/3 of the space for main content.
Side Panel Card
Smaller card for supplementary content.
Code Examples
Common Layout Patterns
<!-- Two Column (50/50) --> <Grid> <Column size="100" md="50">Left</Column> <Column size="100" md="50">Right</Column> </Grid> <!-- Three Column (33/33/33) --> <Grid> <Column size="100" md="1-3">Col 1</Column> <Column size="100" md="1-3">Col 2</Column> <Column size="100" md="1-3">Col 3</Column> </Grid> <!-- Sidebar Layout (25/75) --> <Grid> <Column size="100" md="25">Sidebar</Column> <Column size="100" md="75">Main</Column> </Grid>
Cards in Grid
<!-- Same height cards in grid -->
<Grid sameHeight>
<Column size="100" md="1-3">
<Card titleText="Card 1">
<p>Short content</p>
</Card>
</Column>
<Column size="100" md="1-3">
<Card titleText="Card 2">
<p>Longer content stretches,
and sibling cards match height.</p>
</Card>
</Column>
<Column size="100" md="1-3">
<Card titleText="Card 3">
<p>Also matches height</p>
</Card>
</Column>
</Grid>Nested Grids
<!-- Nested layout with sidebar -->
<Grid>
<Column size="100" md="2-3">
<!-- Nested grid inside main area -->
<Grid>
<Column size="100" md="50">Nested Left</Column>
<Column size="100" md="50">Nested Right</Column>
</Grid>
</Column>
<Column size="100" md="1-3">
<Card titleText="Sidebar">Content</Card>
</Column>
</Grid>