Layouts & Components

Layouts

Choose a layout per slide with slideLayout:

slideLayout	Description
default	Standard content slide
cover	Centred title / closing slide
section	Chapter divider
two-column	Side-by-side with <Left> / <Right>
image-full	Background image with text overlay
image-left	Image on the left, text on the right
image-right	Image on the right, text on the left
code	Optimised padding for code blocks
quote	Centred blockquote
statement	Single large sentence

Plugins can add more — see Themes & Plugins.

Two columns

---
slideLayout: two-column
---
# Comparison

<Left>
### Before
Old approach
</Left>
<Right>
### After
New approach
</Right>

Image + text

---
slideLayout: image-left
---
<ImageSide src="/photo.jpg" alt="Photo" />
<TextPanel>
## Caption
Description text here.
</TextPanel>

Components

All components are available in .mdx slides without imports.

<Columns>

<Columns columns={3} gap="1.5rem">
<div>

### Option A
First option details.

</div>
<div>

### Option B
Second option details.

</div>
<div>

### Option C
Third option details.

</div>
</Columns>

Prop	Description
columns	Number of columns (detected from children if omitted)
gap	Gap between columns (CSS value, default 2rem)
align	start | center | end | stretch
widths	Custom widths, e.g. 1fr 2fr 1fr

<CodeBlock>

Wraps a code fence with a filename header and a copy button:

<CodeBlock title="src/content.config.ts">
```ts
export const collections = { decks };
```
</CodeBlock>

See Code for line highlighting.

<Math>

KaTeX, rendered at build time:

Inline: <Math formula="\frac{x^2}{2}" />

<Math formula="\sum_{i=1}^n i^2 = \frac{n(n+1)(2n+1)}{6}" display />

<YouTube>

Privacy-enhanced embed; accepts an ID or a full URL:

<YouTube id="dQw4w9WgXcQ" start={42} />

Exported slides (PDF / PPTX) can’t run the player: they show the video’s thumbnail with a play button instead, linked to the video.

Static stand-ins for your own embeds

Mark an element with data-astlide-static to show it in place of a live embed when slides are printed or exported. It is hidden everywhere else; give it its own display and position it over the embed:

<div class="map" style="position: relative">
  <iframe src="https://maps.example.com/…"></iframe>
  <a href="https://maps.example.com/…" data-astlide-static style="position: absolute; inset: 0; display: block">
    <img src="/images/map.png" alt="" style="width: 100%; height: 100%; object-fit: cover" />
  </a>
</div>

An <iframe> without one is exported by what it shows:

• a page of your own site (srcdoc, or a path in the build) is laid out inside the frame like the slides are;
• another site (YouTube, Vimeo, Figma, CodePen, or any page with oEmbed / Open Graph data) becomes its thumbnail and title, linked to it. This is looked up when you export and cached; offline, it is a card naming the page.

<Tweet>

A static, styled card — no external API calls:

<Tweet
  url="https://x.com/astrodotbuild/status/1234567890"
  text="Astro 5.0 is here! 🚀"
  author="Astro"
  handle="@astrodotbuild"
  date="Dec 3, 2024"
/>

<Fragment>, <Fragments>, <SpeakerNotes>

See Fragments and speaker notes.