Skip to content
TYPO3Soul Design System

Directives

The directives this theme adds to what an author can write, and the document field. The extension registers them, so a project with the theme can use them at once. There is nothing to add to guides.xml and no template to copy.

Actions

The call to action, a button and a row of buttons.

Reference

Facts, directory trees, diagrams, swatches and registers.

Text roles

Badges, states, anchors and ids in a line of text.

The shape of a page
Written What it is for Draws
layout a field, not a directive: which of the two shapes the page takes —
hero, hero-figure the opening claim of a page, its press, and one image or what stands beside it sds-hero
band a full-bleed section of a landing page, and everything after it .sds-band
split two of anything, side by side until there is no room for two .sds-split
half one side of a split, where that side is several blocks .sds-stack
grid a set read side by side, reflowed by its own minimum width sds-grid
Actions
Written What it is for Draws
cta the one thing a reader can do next: what they get, and the press sds-cta
button one press, and where it goes sds-button
button-bar the presses of a page, in one row .sds-actions
Content blocks
Written What it is for Draws
card a way into something: a title that goes somewhere, and what is behind it sds-card
stat one number as a fact sds-stat
surface one filled plane, with a statement in place sds-surface
quote a sentence from somewhere else, with its source sds-quote
byline who wrote the page, and when sds-byline
figure a picture with its caption, in a frame or plain sds-figure
checks a list whose items each carry a check sds-checks
logos, logo a wall of marks, each in the ink of the page sds-logos
Instructions and questions
Written What it is for Draws
steps, step an instruction read from the top, numbered down one rail sds-steps
accordion, accordion-item questions with their answers folded behind them sds-accordion
Reference
Written What it is for Draws
facts a block of facts, scanned down the terms sds-facts
table a table with a title, and a role for each column sds-table
directory-tree a directory, in the shape it has on disk sds-tree
diagram a drawing, written as the text that describes it sds-diagram
swatch one colour of a palette: the chip, its name, its value sds-swatch
register, entry a list a reader cites: numbered, addressed, and the work it asks for sds-register
Text roles
Written What it is for Draws
badge a short state in a line sds-badge
state a state as a glyph, for a cell of a matrix sds-icon
anchor an address in a line, for a word in a table cell an id
Papers and decks
Written What it is for Draws
part where a part of a paper begins what the paper reads
outline the short name the outline gives the next section what the paper reads
decision, answer the question a concept puts, and the answers it can take sds-decision
slide one frame of a deck, in the text of a paper sds-slide
The manual's own tools
Written What it is for Draws
codemode markup that stands in the page as its author wrote it what it holds
example a piece of markup and, under it, what it renders as sds-code in .sds-example
specimen a rendered card, at the size of its measurement sds-embed

Each of them draws an element of this system and takes that element's own options, spelt the way the element spells them. So href links and src takes a file here as everywhere else, and what a component gains, the directive gains with it. Every section of these pages names the element it draws, and Components is that element's reference.

Every example in these pages stands once: the block is the body that drew the thing under it, which is what example is for.