Components Imagery
image
Image as the slide's anchor, with optional text alongside.
Use when a visual carries meaning on its own. Modifiers control how the image fills the slide: full for edge-to-edge, contain for letterboxed, museum for a matted/framed treatment.
When to use
- The visual carries meaning. Product screenshots, architectural photographs, plots, satellite imagery — anywhere the image makes the argument and the prose is annotation. If the visual is decorative, drop it and use
contentinstead. - Pick the modifier from the asset. Photographs with subject-to-edge bleed →
full. Plots, screenshots, or assets with whitespace that should be preserved →contain. Single hero images that deserve gallery framing →museum. The default (image right) is the working pick for talking-head slides. - Caption earns its line. If the prose alongside the image just describes what the image shows, drop it — the audience can see the picture. The text slot is for the so-what: what the audience should take away from the visual.
When not to use
- Decorative stock photo. A generic photograph of 'people in a meeting' next to a content slide is filler. Use
contentand trust the prose; reserve image for visuals that argue for themselves. - Image too small to read. A diagram or screenshot small enough to fit inside a half-canvas text slot is unreadable from the back of the room. Reach for
image fullorimage contain, or move the diagram to its owndiagramslide. - Image with five paragraphs of caption. If the prose dominates and the image is a sidebar, you have a
contentslide that happens to have a photo. Either trust the image (drop the prose) or trust the prose (drop the image).
Slots
| Slot | Selector | Required | Description |
|---|---|---|---|
image | img | yes | Marp background image syntax:  or . |
heading | h2 | no | Optional heading in the text slot. |
body | p | no | Optional caption or body text. |
Anatomy
┌─────────────────────────────────────────┐
│ header │
│ │
│ Text slot on ┌──────────────────┐ │
│ the left, with │ │ │
│ optional │ [image area] │ │
│ caption. │ │ │
│ └──────────────────┘ │
│ │
│ footer 1/19 │
└─────────────────────────────────────────┘Variants
full — Full — image fills the canvas edge to edge
The image covers the entire slide. Heading and body text overlay the lower portion on a dark contrast scrim (full slide width, content padded inside). Use for high-impact opener or closer slides where the photograph is the message.
<!-- _class: image full -->
## Full bleed makes the photo the slide.
Text overlays the lower portion on a contrast scrim. Use for openers, closers, or any moment when the image deserves the whole canvas.
 contain — Contain — letterboxed for plots and screenshots
Full-bleed variant: the image preserves its aspect inside the slide and the surrounding area fills with the matte token. Text overlay uses the same bottom-scrim treatment as full. Default pick for plots, screenshots, and any non-photographic asset where every pixel of the image matters.
<!-- _class: image contain -->
## Contain preserves the asset's own framing.
Letterboxed against the slide background — useful for plots, dashboards, and screenshots where every pixel of the image matters.
 museum — Museum — matted and framed
Full-bleed variant: image inset on a --bg-alt matte (40px top/sides, 100px at the bottom) with a 1px hairline frame. Text reads on the matte at the bottom as a mono eyebrow label + body caption — editorial placard, no scrim. Use for the one hero image in a deck that deserves a wall-piece treatment.
<!-- _class: image museum -->
## Museum framing gives one image the wall.
Matte border plus a hairline frame. Reserve for case-study openers, brand moments, archival material — the image that the deck remembers.
 mirror — Mirror — text right, image left
Flips the default split: text leads from the right, image anchors from the left. Use when the surrounding deck reads right-to-left across a spread or when the page-turn lands on the image edge.
<!-- _class: image mirror -->
## Mirror lands the image on the left.
Text leads from the right; image anchors from the left. Use when the surrounding spread reads right-to-left or when the page-turn cue lands on the image side.
