Skip to content
{% slide %}
AutoXXS (320px)XS (375px)SM (640px)MD (768px)LG (1024px)XL (1280px)XXL (1536px)
SketchMaterialiOSTamagui
DataInjectionKeyPatternsServiceTransactionProcessResearchProductQualityPerformanceSpecDomainFunctionTechnologyArchitectureConfigMiddlewareDataDatabaseDrizzleMigrationModelop-sqliteSchemaSQLState ManagementDraftKeystoneMergePatchPatchesPersistenceReactiveRedoStoreUndoTestingDeviceFactoryIsolationTypeScriptZodTopicsCommunicationBidsNVCDesignDesign ImplicationsEducationPedagogyFoundationsPsychologyAttachmentFloodingRelatingAuthentic RelatingUIEditorReact Native

{% slide %}

Attributes

Parameter Type Required Description
label string β€” Label shown on the slide tab or navigation indicator β€” omit for unlabelled slides

Valid Parent Contexts

This tag is valid inside: {% carousel %}

Rules

Rule Force Realm Reference Description
slide-parent-carousel must global β€” must be a direct child of . Placement outside a carousel is not valid.
structure
slide-supported-content must global β€” Slides support prose (headings, paragraphs, lists, bold/italic, code), , and tags. Atoms, footnotes, citations, and nested carousels are not supported within slides.
structureauthoring

\{% slide %\} must be a direct child of \{% carousel %\}.

Rendering

CarouselSlide.astro renders the slide’s body content. The label is passed to the parent carousel for use as a tab or dot-indicator label. When label is omitted, the indicator shows a numeric position instead.

Labelled slide with callout inside
tagslidecarouselcallout slide-tag-with-label
{% slide label="Noticing" %}
### The Noticing Game
One player shares observations about the other using the sentence stem:
*"Being in your presence, I notice..."*
{% callout color="blue" %}
Report your *experience of* the other, not your *interpretation* of them.
{% /callout %}
{% /slide %}
Unlabelled slide β€” numeric indicator shown
tagslidecarousel slide-tag-unlabelled
{% slide %}
An unlabelled slide β€” no tab text shown. Indicator shows a numeric position instead.
{% /slide %}