image
ImageryCanvasProse
Image as the slide's anchor, with optional text alongside — composition adapts to the asset and the deck.
CompositionSideCard placementCard backingCard inkCard sizeCard densityCard shape
Use when a visual carries meaning on its own. You hand it any rectangle; the layout reads the asset's aspect at build time and, with the deck orientation, RESOLVES the composition for you — no modifier needed. The default is clean (a floated card shaped to the photo, ≈ zero crop); extreme aspects auto-pick split (shown whole) or spotlight (full-bleed cover). Name a composition to override: clean · split · spotlight · gallery (contain-on-matte, for diagrams) · statement (full-bleed + scrim + title). mirror flips the image side. On spotlight and statement, the text card takes placement (at-*), backing (card-solid/soft/sheer/clear, or any 5% step such as card-o65), ink (ink-light/dark), size (card-sm/md/lg), shape (band stretches the card across the top or bottom edge) and compact; the deck front-matter image-card: sets them for every image slide in one line. Legacy full/contain/museum still work (→ spotlight/gallery/gallery).
visualshowcasepitch
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. - Let the layout resolve it — override only with intent. Drop in any aspect and the layout reads it: a moderate photo gets the
cleanfloated card, a tall/wide one getssplit(shown whole), a canvas-matching one getsspotlight(full-bleed). Override only when you mean it:image galleryto contain a diagram zero-crop,image statementfor a scrim-and-title hero,image spotlightto force a full-bleed cover (accepting the crop). - 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 gallery(contains it whole) orimage spotlight, 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).
Common mistakes
- Writing plain image syntax
instead of Marp background syntax. Theimageslot renders the asset as a CSS background on.lattice-bg(no<img>) — withoutbgin the alt text the picture never becomes the section's background, and no composition can resolve around it. - Naming a composition class (
image spotlight,image gallery, …) reflexively instead of leaving it unset. The composition RESOLVES from the photo's own aspect ratio plus the deck orientation — an explicit class always wins over the resolver, so naming one out of habit can force a crop (e.g.spotlight's full-bleed cover) that the auto-pickedclean/splitcomposition would have avoided. - Adding a card control (
at-*,card-*,ink-*) to aclean,splitorgalleryslide. Those compositions set the text beside the photo, not over it, so there is no card to move. The card controls act only onspotlightandstatement— name one of those first:image spotlight at-tr card-sm.
Authoring
<!-- _class: image -->
## Text leads; the image earns its place.
Swap the bg image below for your own asset — any aspect. The layout reads its shape and resolves the composition for you (a floated card, a full-height column, a full-bleed cover). Name a composition (`image spotlight`, `image gallery`, …) only to override.
Slots
| Slot | Selector | Required | Description |
|---|---|---|---|
image | .lattice-bg | yes | Marp background image syntax:  or  — rendered as a CSS background-image on the .lattice-bg panel (no <img>). To try a composition before you have the photo, use a sample: , or photo-tall, photo-pano and photo-square (the full set is in lib/samples/README.md). |
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 │
└─────────────────────────────────────────┘Variant decision rule
clean— The photo has a moderate, unremarkable aspect — the safe default; leave the class off and let the resolver land here for near-zero crop.split— The photo has an extreme aspect — a tall portrait or a full panorama — and must be shown whole, uncropped, in its own column or band.spotlight— The photo already matches the canvas's own aspect and can carry the whole slide full-bleed, with a solid text card guaranteeing legibility over it.gallery— The asset is a diagram or screenshot where whitespace and containment are the point — mats it whole on a matte with a placard, zero crop.statement— You want an editorial scrim-and-title hero treatment — a deliberate full-bleed gamble rather than the safe legible default.mirror— The composition is right but the deck's rhythm wants the image on the left instead of the right — flips the side without changing the composition.at-tl— Onspotlightorstatement, the photo's subject sits where the card would land — move the card to the quiet part of the frame with one ofat-tl·at-top·at-tr·at-center·at-bl·at-bottom·at-br.card-soft— Onspotlightorstatement, the backing hides too much photo — thin it withcard-soft(80%) orcard-sheer(55%), set an exact level with a 5% step (card-o65is 65%; the deck line writes65%), or drop it withcard-clearwhen the photo is calm where the words land. A thin spotlight card (under 60%) needs a matchingink-lightorink-dark, or the theme's own ink is read against the photo; lint warns (thin-card-no-ink), and in the Studio the Card backing slider picks one from the photo for you.ink-dark— Onspotlightorstatement, the photo is bright where the words land —ink-darksets dark words on a light backing;ink-lightsets white words on a dark one.card-sm— Onspotlightorstatement, the card competes with the photo —card-smshrinks the card and its type so the photo carries the slide;card-lgdoes the opposite. Addcompactto tighten the card's padding and pull it closer to the slide edge at any size.band— Onspotlightorstatement, the card covers something you want to see above or below it — addbandtoat-toporat-bottomto stretch the card across the slide in one short strip (heading left, text right) and leave the middle of the photo clear, with a hairline in the gap between the two columns. On a corner or center placementbanddoes nothing;card-floatsteps one slide out of a deck-wideband.
Variants
clean — clean
Drops the caption chrome.
<!-- _class: image clean -->
## clean drops the caption chrome.
Two-thirds of trials that reach the first generated report convert; the ones that stall almost never do.
split — split
A portrait gets its full column.
<!-- _class: image split -->
## split gives a portrait its full column.
A portrait photo wants its full height. We give it a column and let the argument run alongside.
spotlight — spotlight
A panorama owns the frame.
<!-- _class: image spotlight -->
## spotlight lets a panorama own the frame.
When the photo already matches the canvas, let it carry the slide — the message rides in a solid card so it never fights the image.
gallery — gallery
The exhibit on a matte with a placard.
<!-- _class: image gallery -->
## gallery mats the exhibit with a placard.
The whole asset on a matte with a placard. For diagrams and screenshots where the whitespace is the point.
statement — statement
The title rides the photo on a scrim.
<!-- _class: image statement -->
## statement rides the title on a scrim.
The title rides the photo on a scrim — a deliberate, editorial choice.
mirror — mirror
The image lands on the left.
<!-- _class: image mirror -->
## mirror lands the image on the left.
Text leads from the right; image anchors from the left.
at-tl — Top left
The text card sits in the top-left corner.
<!-- _class: image spotlight at-tl -->
## at-tl lifts the card to the top left.
Move the card to wherever the photo is quiet, so the subject keeps the frame.
at-top — Top center
The text card sits centered along the top.
<!-- _class: image statement at-top -->
## at-top centers the title up high.
The scrim follows the words to the top edge.
at-tr — Top right
The text card sits in the top-right corner.
<!-- _class: image spotlight at-tr -->
## at-tr parks the card top right.
The subject sits low and left, so the words take the open sky.
at-center — Center
The text card sits in the middle of the slide.
<!-- _class: image statement at-center -->
## at-center puts the title dead center.
A radial scrim darkens only the middle.
at-bl — Bottom left
The text card sits in the bottom-left corner — the default.
<!-- _class: image spotlight at-bl -->
## at-bl is the default corner.
Name it to return a slide to bottom left inside a deck that moved it.
at-bottom — Bottom center
The text card sits centered along the bottom.
<!-- _class: image spotlight at-bottom -->
## at-bottom centers the card low.
A caption band under the subject, centered on the slide.
at-br — Bottom right
The text card sits in the bottom-right corner.
<!-- _class: image statement at-br -->
## at-br anchors the title bottom right.
The scrim flips to darken the right side.
card-solid — Solid backing
The card or scrim at full strength — the default.
<!-- _class: image spotlight card-solid -->
## card-solid keeps the card opaque.
Full legibility over any photo. This is the default.
card-soft — Soft backing
The card or scrim at 80%, so the photo glows through.
<!-- _class: image spotlight card-soft -->
## card-soft lets the photo glow through.
The panel drops to 80% and loses its lift shadow.
card-sheer — Sheer backing
The card or scrim at 55%, a tint more than a panel.
<!-- _class: image spotlight card-sheer ink-light -->
## card-sheer turns the card into a tint.
At 55% the photo reads through; pair it with an ink that suits the photo.
card-clear — Clear backing
No card and no scrim: the words ride the photo.
<!-- _class: image statement card-clear -->
## card-clear drops the scrim.
Only for a photo with a calm, dark patch where the words land.
ink-light — Light ink
White words on a dark backing.
<!-- _class: image spotlight ink-light -->
## ink-light sets white words on a dark card.
The card turns dark to match, whatever the deck palette.
ink-dark — Dark ink
Near-black words on a light backing.
<!-- _class: image statement ink-dark -->
## ink-dark sets dark words on a light scrim.
For a bright photo: the scrim turns light and the title goes dark.
card-sm — Small card
A narrower card with smaller type, so the photo breathes.
<!-- _class: image spotlight card-sm at-tr -->
## card-sm keeps the card discreet.
Smaller type and a narrower card leave the photo the slide.
card-md — Medium card
The default card width and type.
<!-- _class: image spotlight card-md -->
## card-md is the default size.
Name it to return a slide to the default inside a deck that resized it.
card-lg — Large card
A wider card with larger type, for a message that leads.
<!-- _class: image spotlight card-lg -->
## card-lg lets the message lead.
Wider card, bigger heading, room for a longer line.
card-regular — Regular density
The default card spacing, so one slide can step out of a deck-wide compact.
<!-- _class: image spotlight card-regular -->
## card-regular keeps the default spacing.
In a deck that sets `image-card: compact`, this slide keeps the roomier card.
band — Full-width band
Stretches the card across the slide along the top or bottom edge, so the middle of the photo stays clear.
<!-- _class: image spotlight at-bottom band -->
## band keeps the middle of the photo clear.
The heading takes the left column and the text the right, in one short strip along the edge.
card-float — Floating card
The default floating card, so one slide can step out of a deck-wide band.
<!-- _class: image spotlight at-bottom card-float -->
## card-float keeps the card a card.
In a deck that sets `image-card: bottom band`, this slide keeps the floating card.
