Layouts
Use built-in layout components to structure your DexCode slides with columns and centered content.
Layout System
DexCode slides support layout options through frontmatter slide types and layout components.
Slide Types via Frontmatter
Set the slide type in your frontmatter:
mdx
---
type: cover
---Available Slide Types
| Type | Description |
|---|---|
content | Standard single-column slide (default) |
cover | Full-bleed cover slide with centered content |
section | Section divider slide |
comparison | Side-by-side comparison layout |
stats | Statistics and metrics display |
timeline | Timeline visualization |
image-left | Image on left, text on right |
image-right | Text on left, image on right |
image-full | Full-bleed image slide |
quote | Quotation slide |
agenda | Agenda/table of contents |
ending | Thank you / closing slide |
Columns Component
For custom column layouts, use the Columns and Column components:
mdx
<Columns widths="40,60">
<Column>
Left content takes 40% width.
</Column>
<Column>
Right content takes 60% width.
</Column>
</Columns>Three Columns
mdx
<Columns widths="33,34,33">
<Column>
**Column 1**
First item details
</Column>
<Column>
**Column 2**
Second item details
</Column>
<Column>
**Column 3**
Third item details
</Column>
</Columns>Center Component
Center content vertically and horizontally within a slide:
mdx
<Center>
# Big Announcement
This text is centered on the slide.
</Center>Card Component
Display styled content cards:
mdx
<Columns widths="33,34,33">
<Column>
<Card title="Feature A">
Description of feature A with supporting details.
</Card>
</Column>
<Column>
<Card title="Feature B">
Description of feature B with supporting details.
</Card>
</Column>
<Column>
<Card title="Feature C">
Description of feature C with supporting details.
</Card>
</Column>
</Columns>Image + Text Layouts
Use the image-left or image-right slide types for split layouts:
mdx
---
type: image-left
---
# Product Screenshot
This is our latest dashboard interface showing
real-time metrics and user activity.