Figures
A figure slide shows a picture: a drawing, a screenshot, a matrix. The
picture stands in the figure region, <sds-image slot="figure"> or a
drawing inline, and takes the room its layout leaves. src and alt
are the short form. It grows or shrinks whole into that room. A picture
scales as a picture does. Text
does not: what stands between the tags keeps its register, and only
shrinks when it does not fit.
The head and the foot stand where a content slide has them. Only the
picture takes more room: nearly the whole frame under full, and the
edges of the frame under bleed. Under full nobody sees the head,
and the lockup goes. The count stays at its place, on a plate.
A drawing in a row can carry a caption: what it shows, in a line or
two under it. The caption is text in the page's small register. It reads
at the size of every other small line and never shrinks with the picture.
With framed each drawing stands on a plane with a hairline, its caption
inside. That is for a sketch of an interface, which has no edge of its own.
A drawing's key can stand in the head. legend sets it at the
right of the title, on its line: ■ MVP | □ First version | ID later.
The drawing then leaves its own legend out, and the room under the head
is the drawing's.
The drawings of a row share one scale. Each drawing from a text takes the room the densest of the row needs. So a label is one size across the row, and the keys under the frames line up.
widefullheadedrow × 2drawings.
The room is each one'srow × 3framed draws the planestext-startbleed| Layout | Room | Ratio | For |
|---|---|---|---|
wide | 877 × 354 | 2.5 : 1 | A drawing under the head and its note. The default |
full | 925 × 505 | 1.83 : 1 | A view that needs the whole frame: an interface, an architecture. Only the count shows, and the head stays for a reader who hears it |
headed | 877 × 354 | 2.5 : 1 | A view that needs the frame, under a short head and a rule. The eyebrow takes the accent in the dark, and the quiet accent ink on paper. The foot is the count alone |
row × 2 | 422 × 313 | 1.35 : 1 | Two pictures side by side, each under its word, in drawings.
The room is each one's |
row × 3 | 238 × 240 | 1 : 1 | Three sketches side by side, each on its plane with its caption
under it. framed draws the planes |
text-start | 519 × 401 | 1.29 : 1 | A column of text at the start and the picture beside it. The text stands in the middle of the column under the title, a step larger |
bleed | 559 × 538 | 1.04 : 1 | Beside the text, a screenshot that fills its column to the edges of the frame. It keeps its top left corner, and the rest runs over |
The room is the format. It is in the frame's own pixels, 960 × 540, and the slide draws at twice that. The figures hold for a title of one line. A note of one line under it takes 32 from the height, and so does a second line of the title. A picture of that ratio fills its room. A narrower one leaves the sides empty, and a flatter one the top and the bottom.
Regions#
What a slide shows goes between its tags, into named regions. What sets it up stays an attribute: its kind, its layout, its ground, its count.
Every kind takes the lines of its head as regions: eyebrow,
heading, lead and note. A line in its region keeps its markup,
an <em> or a <code>, and wins over the attribute of its name. The
attribute stays as the short form for a line of plain text.
<sds-slide kind="figure" layout="text-start">
<span slot="eyebrow">02 · What it consists of</span>
<h2 slot="heading">One key for <em>two</em> languages</h2>
<p>The German call fills the slot.</p>
<svg slot="figure" viewBox="0 0 877 354">…</svg>
</sds-slide>
html
<sds-slide kind="figure" layout="text-start">
<span slot="eyebrow">02 · What it consists of</span>
<h2 slot="heading">One key for <em>two</em> languages</h2>
<p>The German call fills the slot.</p>
<svg slot="figure" viewBox="0 0 877 354">…</svg>
</sds-slide>contenttext, the one a child without a slot goes tofigure, wide, full and headedfigurefigure, rowfigure, once for each drawingfigure, text-starttext and figurespeakertext and portrait| Layout | Regions |
|---|---|
content | text, the one a child without a slot goes to |
figure, wide, full and headed | figure |
figure, row | figure, once for each drawing |
figure, text-start | text and figure |
speaker | text and portrait |
The figure region takes any markup. A drawing inline reads the
page's tokens and faces, so it keeps the system's type and turns with the
mode. A drawing alone in the region fills the room as a picture does.
Other markup shrinks until it fits. <figure slot="figure"> brings its
word as data-label and what it shows as its <figcaption>. A static
render takes the same through the drawings property, with content
in place of src.
Take an element before you draw. Most figures of a paper are one of a few kinds, and the system has an element for each. Such a figure is markup between the tags of the slide, in the system's type, and a reader can copy its words:
sds-table with an sds-icon and its label in each cell,
under sds-td-sign. The legend is the captionsds-stat in sds-gridsds-card or sds-surface in sds-gridrow, each drawn at its own room. Never one
drawing with three panels in itfull| The figure | What it is on a slide |
|---|---|
| Things against criteria, a sign in every cell | sds-table with an sds-icon and its label in each cell,
under sds-td-sign. The legend is the caption |
| Figures, each with its sentence | sds-stat in sds-grid |
| Boxes that each say a thing, in no order | sds-card or sds-surface in sds-grid |
| Three screens or sketches side by side | Three drawings in row, each drawn at its own room. Never one
drawing with three panels in it |
| One screen, whole | One drawing under full |
Only what has lines between its parts is a drawing: a flow with branches, an architecture, a sketch of an interface.
A drawing for a slide is its own file:
- No head and no foot of its own. The slide's title is its title. The note under it is optional, and says the finding where the drawing does not. A drawing for a page carries both, and on a slide says them twice. A fragment of the file cannot cut them off: an image shows the whole file.
- No margin of its own. The slide's margin is its margin, so it starts at the edge the title starts at.
- Each part says what it is. A drawing in parts gives each part a plane. Over what the part shows stand its heading and a line of context, and its consequence stands under it.
- Drawn at its room, in the frame's pixels: its canvas is the room in
the table above,
viewBox="0 0 877 354"forwide. A label at 13 there is 13 in the frame and 26 on the room's screen. A canvas 1200 wide shrinks with the room. In a row of three, nobody in a room reads its labels. - One claim. A drawing that needs more than its room has more than one claim, and is two slides.
<sds-slide kind="figure">
<span slot="eyebrow">03 · How to build a slide</span>
<h2 slot="heading">One key for two languages</h2>
<sds-diagram slot="figure" name="slide-lookup"># Two calls, one slot: the lookup for a wide figure slide. flow slide=877,354 columns=340,370 gap=167,16 title "Two calls, one slot" description "A German call writes the slot of a key. An English call for the same key reads the slot and answers in German. The path of the English call is the one accent." de `resolve('answer.empty', 'de')` ink at=0,0 en `resolve('answer.empty', 'en')` ink at=0,2 group "cache[]" empty `answer.empty` value="Nothing found (de)" at=1,0 none `answer.none` value="—" at=1,1 tool `label.tool` value="Tool (de)" at=1,2 de -> empty "writes" en => empty "answers in de" via=h bend=0.85</sds-diagram>
</sds-slide>
Figure, as a deck holds it
html
<sds-slide kind="figure">
<span slot="eyebrow">03 · How to build a slide</span>
<h2 slot="heading">One key for two languages</h2>
<sds-diagram slot="figure" name="slide-lookup"># Two calls, one slot: the lookup for a wide figure slide. flow slide=877,354 columns=340,370 gap=167,16 title "Two calls, one slot" description "A German call writes the slot of a key. An English call for the same key reads the slot and answers in German. The path of the English call is the one accent." de `resolve('answer.empty', 'de')` ink at=0,0 en `resolve('answer.empty', 'en')` ink at=0,2 group "cache[]" empty `answer.empty` value="Nothing found (de)" at=1,0 none `answer.none` value="—" at=1,1 tool `label.tool` value="Tool (de)" at=1,2 de -> empty "writes" en => empty "answers in de" via=h bend=0.85</sds-diagram>
</sds-slide>
<sds-slide kind="figure" layout="full">
<span slot="eyebrow">03 · How to build a slide</span>
<h2 slot="heading">A page of the manual</h2>
<p slot="note">A view that needs the whole frame shows only the count.</p>
<sds-image slot="figure" src="assets/screenshots/documentation.png" alt="A page of the manual at the width of a desk. The bar, the column of pages, the page and its contents."></sds-image>
</sds-slide>
Figure, full, as a deck holds it
html
<sds-slide kind="figure" layout="full">
<span slot="eyebrow">03 · How to build a slide</span>
<h2 slot="heading">A page of the manual</h2>
<p slot="note">A view that needs the whole frame shows only the count.</p>
<sds-image slot="figure" src="assets/screenshots/documentation.png" alt="A page of the manual at the width of a desk. The bar, the column of pages, the page and its contents."></sds-image>
</sds-slide>
<sds-slide kind="figure" layout="row">
<span slot="eyebrow">03 · How to build a slide</span>
<h2 slot="heading">Now and before</h2>
<figure slot="figure" data-label="Status">
<sds-image src="assets/screenshots/status-sources.png" alt="The status page of dev-companion at the table of six sources. Each row names a source, its state as a badge, when it was last checked, and an Open button."></sds-image>
</figure>
<figure slot="figure" data-label="Source">
<sds-image src="assets/screenshots/source-reads.png" alt="The page of the source docs.typo3.org at its lower half. An overview, then two folded rows under Earlier reads, then a note: this is a source, not a service."></sds-image>
</figure>
</sds-slide>
Figure, pair, as a deck holds it
html
<sds-slide kind="figure" layout="row">
<span slot="eyebrow">03 · How to build a slide</span>
<h2 slot="heading">Now and before</h2>
<figure slot="figure" data-label="Status">
<sds-image src="assets/screenshots/status-sources.png" alt="The status page of dev-companion at the table of six sources. Each row names a source, its state as a badge, when it was last checked, and an Open button."></sds-image>
</figure>
<figure slot="figure" data-label="Source">
<sds-image src="assets/screenshots/source-reads.png" alt="The page of the source docs.typo3.org at its lower half. An overview, then two folded rows under Earlier reads, then a note: this is a source, not a service."></sds-image>
</figure>
</sds-slide>
<sds-slide kind="figure" layout="row" framed>
<span slot="eyebrow">03 · How to build a slide</span>
<h2 slot="heading">Three pages at hand</h2>
<figure slot="figure" data-label="Search">
<sds-image src="assets/screenshots/search-phone.png" alt="The search page on a phone. The results for label, the filters by kind, and the first hit."></sds-image>
<figcaption>The filters count the hits, and the first one names where it comes from.</figcaption>
</figure>
<figure slot="figure" data-label="Glyph">
<sds-image src="assets/screenshots/glyph-phone.png" alt="The page of the glyph actions-document-edit on a phone. Its name, what it means, and the versions it is in."></sds-image>
<figcaption>The name at the top, and the versions that carry it under the sentence.</figcaption>
</figure>
<figure slot="figure" data-label="Checkout">
<sds-image src="assets/screenshots/checkout-phone.png" alt="The page of the checkout 14.3-dev on a phone. The actions, and a warning that the build is two commits behind."></sds-image>
<figcaption>The one thing to do next is the only orange button.</figcaption>
</figure>
</sds-slide>
Figure, row, as a deck holds it
html
<sds-slide kind="figure" layout="row" framed>
<span slot="eyebrow">03 · How to build a slide</span>
<h2 slot="heading">Three pages at hand</h2>
<figure slot="figure" data-label="Search">
<sds-image src="assets/screenshots/search-phone.png" alt="The search page on a phone. The results for label, the filters by kind, and the first hit."></sds-image>
<figcaption>The filters count the hits, and the first one names where it comes from.</figcaption>
</figure>
<figure slot="figure" data-label="Glyph">
<sds-image src="assets/screenshots/glyph-phone.png" alt="The page of the glyph actions-document-edit on a phone. Its name, what it means, and the versions it is in."></sds-image>
<figcaption>The name at the top, and the versions that carry it under the sentence.</figcaption>
</figure>
<figure slot="figure" data-label="Checkout">
<sds-image src="assets/screenshots/checkout-phone.png" alt="The page of the checkout 14.3-dev on a phone. The actions, and a warning that the build is two commits behind."></sds-image>
<figcaption>The one thing to do next is the only orange button.</figcaption>
</figure>
</sds-slide>
<sds-slide kind="figure" layout="row" framed>
<span slot="eyebrow">03 · How to build a slide</span>
<h2 slot="heading">Navigation</h2>
<figure slot="figure" data-label="Pages">
<svg viewBox="0 0 320 220" role="img" aria-label="Pages open: Summer shop, Home, Offers, Contact">
<rect x="1" y="1" width="104" height="30" rx="4" fill="var(--surface-sunken, #F5F5F5)" stroke="var(--text-primary, #18181B)"></rect>
<text x="53" y="21" text-anchor="middle" font-size="13" font-weight="600" fill="var(--text-primary, #18181B)">Pages</text>
<rect x="107" y="1" width="104" height="30" rx="4" fill="none" stroke="var(--border-subtle, #E4E4E7)"></rect>
<text x="159" y="21" text-anchor="middle" font-size="13" font-weight="400" fill="var(--text-primary, #18181B)">Structure</text>
<rect x="213" y="1" width="104" height="30" rx="4" fill="none" stroke="var(--border-subtle, #E4E4E7)"></rect>
<text x="265" y="21" text-anchor="middle" font-size="13" font-weight="400" fill="var(--text-primary, #18181B)">Library</text>
<rect x="1" y="46" width="318" height="28" rx="4" fill="none"></rect>
<text x="14" y="65" font-size="13" fill="var(--text-secondary, #52525B)">Summer shop</text>
<rect x="1" y="80" width="318" height="28" rx="4" fill="none"></rect>
<text x="14" y="99" font-size="13" fill="var(--text-secondary, #52525B)">Home</text>
<rect x="1" y="114" width="318" height="28" rx="4" fill="var(--surface-sunken, #F5F5F5)"></rect>
<text x="14" y="133" font-size="13" fill="var(--text-secondary, #52525B)">Offers</text>
<rect x="1" y="148" width="318" height="28" rx="4" fill="none"></rect>
<text x="14" y="167" font-size="13" fill="var(--text-secondary, #52525B)">Contact</text>
</svg>
<figcaption>A press opens the page in the visual view.</figcaption>
</figure>
<figure slot="figure" data-label="Structure">
<svg viewBox="0 0 320 220" role="img" aria-label="Structure open: Hero, Grid, 2 columns, Text, Image">
<rect x="1" y="1" width="104" height="30" rx="4" fill="none" stroke="var(--border-subtle, #E4E4E7)"></rect>
<text x="53" y="21" text-anchor="middle" font-size="13" font-weight="400" fill="var(--text-primary, #18181B)">Pages</text>
<rect x="107" y="1" width="104" height="30" rx="4" fill="var(--surface-sunken, #F5F5F5)" stroke="var(--text-primary, #18181B)"></rect>
<text x="159" y="21" text-anchor="middle" font-size="13" font-weight="600" fill="var(--text-primary, #18181B)">Structure</text>
<rect x="213" y="1" width="104" height="30" rx="4" fill="none" stroke="var(--border-subtle, #E4E4E7)"></rect>
<text x="265" y="21" text-anchor="middle" font-size="13" font-weight="400" fill="var(--text-primary, #18181B)">Library</text>
<rect x="1" y="46" width="318" height="28" rx="4" fill="var(--surface-sunken, #F5F5F5)"></rect>
<text x="14" y="65" font-size="13" fill="var(--text-secondary, #52525B)">Hero</text>
<rect x="1" y="80" width="318" height="28" rx="4" fill="none"></rect>
<text x="14" y="99" font-size="13" fill="var(--text-secondary, #52525B)">Grid, 2 columns</text>
<rect x="1" y="114" width="318" height="28" rx="4" fill="none"></rect>
<text x="14" y="133" font-size="13" fill="var(--text-secondary, #52525B)">Text</text>
<rect x="1" y="148" width="318" height="28" rx="4" fill="none"></rect>
<text x="14" y="167" font-size="13" fill="var(--text-secondary, #52525B)">Image</text>
</svg>
<figcaption>A choice here selects in the page, and back.</figcaption>
</figure>
<figure slot="figure" data-label="Library">
<svg viewBox="0 0 320 220" role="img" aria-label="Library open: Text, Teaser, Contact, Offer block">
<rect x="1" y="1" width="104" height="30" rx="4" fill="none" stroke="var(--border-subtle, #E4E4E7)"></rect>
<text x="53" y="21" text-anchor="middle" font-size="13" font-weight="400" fill="var(--text-primary, #18181B)">Pages</text>
<rect x="107" y="1" width="104" height="30" rx="4" fill="none" stroke="var(--border-subtle, #E4E4E7)"></rect>
<text x="159" y="21" text-anchor="middle" font-size="13" font-weight="400" fill="var(--text-primary, #18181B)">Structure</text>
<rect x="213" y="1" width="104" height="30" rx="4" fill="var(--surface-sunken, #F5F5F5)" stroke="var(--text-primary, #18181B)"></rect>
<text x="265" y="21" text-anchor="middle" font-size="13" font-weight="600" fill="var(--text-primary, #18181B)">Library</text>
<rect x="1" y="46" width="318" height="28" rx="4" fill="none"></rect>
<text x="14" y="65" font-size="13" fill="var(--text-secondary, #52525B)">Text</text>
<rect x="1" y="80" width="318" height="28" rx="4" fill="var(--surface-sunken, #F5F5F5)"></rect>
<text x="14" y="99" font-size="13" fill="var(--text-secondary, #52525B)">Teaser</text>
<rect x="1" y="114" width="318" height="28" rx="4" fill="none"></rect>
<text x="14" y="133" font-size="13" fill="var(--text-secondary, #52525B)">Contact</text>
<rect x="1" y="148" width="318" height="28" rx="4" fill="none"></rect>
<text x="14" y="167" font-size="13" fill="var(--text-secondary, #52525B)">Offer block</text>
</svg>
<figcaption>A drag inserts at the selection.</figcaption>
</figure>
</sds-slide>
Figure, slots, as a deck holds it
html
<sds-slide kind="figure" layout="row" framed>
<span slot="eyebrow">03 · How to build a slide</span>
<h2 slot="heading">Navigation</h2>
<figure slot="figure" data-label="Pages">
<svg viewBox="0 0 320 220" role="img" aria-label="Pages open: Summer shop, Home, Offers, Contact">
<rect x="1" y="1" width="104" height="30" rx="4" fill="var(--surface-sunken, #F5F5F5)" stroke="var(--text-primary, #18181B)"></rect>
<text x="53" y="21" text-anchor="middle" font-size="13" font-weight="600" fill="var(--text-primary, #18181B)">Pages</text>
<rect x="107" y="1" width="104" height="30" rx="4" fill="none" stroke="var(--border-subtle, #E4E4E7)"></rect>
<text x="159" y="21" text-anchor="middle" font-size="13" font-weight="400" fill="var(--text-primary, #18181B)">Structure</text>
<rect x="213" y="1" width="104" height="30" rx="4" fill="none" stroke="var(--border-subtle, #E4E4E7)"></rect>
<text x="265" y="21" text-anchor="middle" font-size="13" font-weight="400" fill="var(--text-primary, #18181B)">Library</text>
<rect x="1" y="46" width="318" height="28" rx="4" fill="none"></rect>
<text x="14" y="65" font-size="13" fill="var(--text-secondary, #52525B)">Summer shop</text>
<rect x="1" y="80" width="318" height="28" rx="4" fill="none"></rect>
<text x="14" y="99" font-size="13" fill="var(--text-secondary, #52525B)">Home</text>
<rect x="1" y="114" width="318" height="28" rx="4" fill="var(--surface-sunken, #F5F5F5)"></rect>
<text x="14" y="133" font-size="13" fill="var(--text-secondary, #52525B)">Offers</text>
<rect x="1" y="148" width="318" height="28" rx="4" fill="none"></rect>
<text x="14" y="167" font-size="13" fill="var(--text-secondary, #52525B)">Contact</text>
</svg>
<figcaption>A press opens the page in the visual view.</figcaption>
</figure>
<figure slot="figure" data-label="Structure">
<svg viewBox="0 0 320 220" role="img" aria-label="Structure open: Hero, Grid, 2 columns, Text, Image">
<rect x="1" y="1" width="104" height="30" rx="4" fill="none" stroke="var(--border-subtle, #E4E4E7)"></rect>
<text x="53" y="21" text-anchor="middle" font-size="13" font-weight="400" fill="var(--text-primary, #18181B)">Pages</text>
<rect x="107" y="1" width="104" height="30" rx="4" fill="var(--surface-sunken, #F5F5F5)" stroke="var(--text-primary, #18181B)"></rect>
<text x="159" y="21" text-anchor="middle" font-size="13" font-weight="600" fill="var(--text-primary, #18181B)">Structure</text>
<rect x="213" y="1" width="104" height="30" rx="4" fill="none" stroke="var(--border-subtle, #E4E4E7)"></rect>
<text x="265" y="21" text-anchor="middle" font-size="13" font-weight="400" fill="var(--text-primary, #18181B)">Library</text>
<rect x="1" y="46" width="318" height="28" rx="4" fill="var(--surface-sunken, #F5F5F5)"></rect>
<text x="14" y="65" font-size="13" fill="var(--text-secondary, #52525B)">Hero</text>
<rect x="1" y="80" width="318" height="28" rx="4" fill="none"></rect>
<text x="14" y="99" font-size="13" fill="var(--text-secondary, #52525B)">Grid, 2 columns</text>
<rect x="1" y="114" width="318" height="28" rx="4" fill="none"></rect>
<text x="14" y="133" font-size="13" fill="var(--text-secondary, #52525B)">Text</text>
<rect x="1" y="148" width="318" height="28" rx="4" fill="none"></rect>
<text x="14" y="167" font-size="13" fill="var(--text-secondary, #52525B)">Image</text>
</svg>
<figcaption>A choice here selects in the page, and back.</figcaption>
</figure>
<figure slot="figure" data-label="Library">
<svg viewBox="0 0 320 220" role="img" aria-label="Library open: Text, Teaser, Contact, Offer block">
<rect x="1" y="1" width="104" height="30" rx="4" fill="none" stroke="var(--border-subtle, #E4E4E7)"></rect>
<text x="53" y="21" text-anchor="middle" font-size="13" font-weight="400" fill="var(--text-primary, #18181B)">Pages</text>
<rect x="107" y="1" width="104" height="30" rx="4" fill="none" stroke="var(--border-subtle, #E4E4E7)"></rect>
<text x="159" y="21" text-anchor="middle" font-size="13" font-weight="400" fill="var(--text-primary, #18181B)">Structure</text>
<rect x="213" y="1" width="104" height="30" rx="4" fill="var(--surface-sunken, #F5F5F5)" stroke="var(--text-primary, #18181B)"></rect>
<text x="265" y="21" text-anchor="middle" font-size="13" font-weight="600" fill="var(--text-primary, #18181B)">Library</text>
<rect x="1" y="46" width="318" height="28" rx="4" fill="none"></rect>
<text x="14" y="65" font-size="13" fill="var(--text-secondary, #52525B)">Text</text>
<rect x="1" y="80" width="318" height="28" rx="4" fill="var(--surface-sunken, #F5F5F5)"></rect>
<text x="14" y="99" font-size="13" fill="var(--text-secondary, #52525B)">Teaser</text>
<rect x="1" y="114" width="318" height="28" rx="4" fill="none"></rect>
<text x="14" y="133" font-size="13" fill="var(--text-secondary, #52525B)">Contact</text>
<rect x="1" y="148" width="318" height="28" rx="4" fill="none"></rect>
<text x="14" y="167" font-size="13" fill="var(--text-secondary, #52525B)">Offer block</text>
</svg>
<figcaption>A drag inserts at the selection.</figcaption>
</figure>
</sds-slide>
<sds-slide kind="figure" layout="text-start">
<span slot="eyebrow">03 · How to build a slide</span>
<h2 slot="heading">Five sources</h2>
<p>Each source needs a part of the machine before it answers.</p>
<ul class="sds-list">
<li>Bundled knowledge and the checkout need nothing.</li>
<li>Packages need files on disk.</li>
<li>The installation needs a booted site.</li>
</ul>
<sds-diagram slot="figure" name="slide-sources"># The sources against the machine, in the room of a slide. bars slide 519,401 bands "nothing running,files on disk,a booted site,network reach" title "Five sources against the machine" description "Each source is a bar across what the machine has to run: bundled knowledge and the checkout need nothing, packages need files on disk, the installation a booted site, the network outbound reach. Bundled knowledge is the one accent." row `knowledge` sub "bundled, versioned" segments 4 emphasis row `checkout` sub "this repository" segments 4 row `packages` sub "files, never run" segments absent=1 3 row `installation` sub "the booted site" segments absent=2 2 row `network` sub "official services" segments absent=3 1 legend ink "available" absent "what it still needs"</sds-diagram>
</sds-slide>
Figure, text, as a deck holds it
html
<sds-slide kind="figure" layout="text-start">
<span slot="eyebrow">03 · How to build a slide</span>
<h2 slot="heading">Five sources</h2>
<p>Each source needs a part of the machine before it answers.</p>
<ul class="sds-list">
<li>Bundled knowledge and the checkout need nothing.</li>
<li>Packages need files on disk.</li>
<li>The installation needs a booted site.</li>
</ul>
<sds-diagram slot="figure" name="slide-sources"># The sources against the machine, in the room of a slide. bars slide 519,401 bands "nothing running,files on disk,a booted site,network reach" title "Five sources against the machine" description "Each source is a bar across what the machine has to run: bundled knowledge and the checkout need nothing, packages need files on disk, the installation a booted site, the network outbound reach. Bundled knowledge is the one accent." row `knowledge` sub "bundled, versioned" segments 4 emphasis row `checkout` sub "this repository" segments 4 row `packages` sub "files, never run" segments absent=1 3 row `installation` sub "the booted site" segments absent=2 2 row `network` sub "official services" segments absent=3 1 legend ink "available" absent "what it still needs"</sds-diagram>
</sds-slide>
<sds-slide kind="figure" layout="text-start" bleed>
<span slot="eyebrow">03 · How to build a slide</span>
<h2 slot="heading">The status page</h2>
<sds-facts>
<dt>Row</dt>
<dd>one source</dd>
<dt>Badge</dt>
<dd>what it does now</dd>
<dt>Checked</dt>
<dd>when it last answered</dd>
</sds-facts>
<sds-image slot="figure" src="assets/screenshots/status-sources.png" alt="The status page of dev-companion at the table of six sources. Each row names a source, its state as a badge, when it was last checked, and an Open button."></sds-image>
</sds-slide>
Figure, bleed, as a deck holds it
html
<sds-slide kind="figure" layout="text-start" bleed>
<span slot="eyebrow">03 · How to build a slide</span>
<h2 slot="heading">The status page</h2>
<sds-facts>
<dt>Row</dt>
<dd>one source</dd>
<dt>Badge</dt>
<dd>what it does now</dd>
<dt>Checked</dt>
<dd>when it last answered</dd>
</sds-facts>
<sds-image slot="figure" src="assets/screenshots/status-sources.png" alt="The status page of dev-companion at the table of six sources. Each row names a source, its state as a badge, when it was last checked, and an Open button."></sds-image>
</sds-slide>