--- title: "Directives" description: "The directives this theme adds to what an author can write, and the document field." canonical: index.html navigation-title: "Directives" --- # 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. **[The shape of a page](page-shape.md)** Bands, the hero, splits, grids and the page field. **[Actions](actions.md)** The call to action, a button and a row of buttons. **[Content blocks](content.md)** Cards, figures, quotes, logos and lists with checks. **[Instructions and questions](instructions.md)** Numbered steps, and answers behind a fold. **[Reference](reference.md)** Facts, directory trees, diagrams, swatches and registers. **[Text roles](text-roles.md)** Badges, states, anchors and ids in a line of text. **[Papers and decks](papers.md)** The parts of a paper, its decisions and its slides. **[The manual's own tools](tools.md)** Raw markup, examples that print themselves, and rendered cards. The shape of a page | Written | What it is for | Draws | | --- | --- | --- | | [layout](page-shape.md#directive-layout) | a field, not a directive: which of the two shapes the page takes | — | | [hero](page-shape.md#directive-hero), [hero-figure](page-shape.md#directive-hero-figure) | the opening claim of a page, its press, and one image or what stands beside it | `sds-hero` | | [band](page-shape.md#directive-band) | a full-bleed section of a landing page, and everything after it | `.sds-band` | | [split](page-shape.md#directive-split) | two of anything, side by side until there is no room for two | `.sds-split` | | [half](page-shape.md#directive-half) | one side of a split, where that side is several blocks | `.sds-stack` | | [grid](page-shape.md#directive-grid) | a set read side by side, reflowed by its own minimum width | `sds-grid` | Actions | Written | What it is for | Draws | | --- | --- | --- | | [cta](actions.md#directive-cta) | the one thing a reader can do next: what they get, and the press | `sds-cta` | | [button](actions.md#directive-button) | one press, and where it goes | `sds-button` | | [button-bar](actions.md#directive-button-bar) | the presses of a page, in one row | `.sds-actions` | Content blocks | Written | What it is for | Draws | | --- | --- | --- | | [card](content.md#directive-card) | a way into something: a title that goes somewhere, and what is behind it | `sds-card` | | [stat](content.md#directive-stat) | one number as a fact | `sds-stat` | | [surface](content.md#directive-surface) | one filled plane, with a statement in place | `sds-surface` | | [quote](content.md#directive-quote) | a sentence from somewhere else, with its source | `sds-quote` | | [byline](content.md#directive-byline) | who wrote the page, and when | `sds-byline` | | [figure](../markup.md) | a picture with its caption, in a frame or plain | `sds-figure` | | [checks](content.md#directive-checks) | a list whose items each carry a check | `sds-checks` | | [logos](content.md#directive-logos), [logo](content.md#directive-logo) | a wall of marks, each in the ink of the page | `sds-logos` | Instructions and questions | Written | What it is for | Draws | | --- | --- | --- | | [steps](instructions.md#directive-steps), [step](instructions.md#directive-step) | an instruction read from the top, numbered down one rail | `sds-steps` | | [accordion](instructions.md#directive-accordion), [accordion-item](instructions.md#directive-accordion-item) | questions with their answers folded behind them | `sds-accordion` | Reference | Written | What it is for | Draws | | --- | --- | --- | | [facts](reference.md#directive-facts) | a block of facts, scanned down the terms | `sds-facts` | | [table](../markup.md) | a table with a title, and a role for each column | `sds-table` | | [directory-tree](reference.md#directive-directory-tree) | a directory, in the shape it has on disk | `sds-tree` | | [diagram](reference.md#directive-diagram) | a drawing, written as the text that describes it | `sds-diagram` | | [swatch](reference.md#directive-swatch) | one colour of a palette: the chip, its name, its value | `sds-swatch` | | [register](reference.md#directive-register), [entry](reference.md#directive-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](text-roles.md#directive-badge) | a short state in a line | `sds-badge` | | [state](text-roles.md#directive-state) | a state as a glyph, for a cell of a matrix | `sds-icon` | | [anchor](text-roles.md#directive-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](papers.md#directive-part) | where a part of a paper begins | what the paper reads | | [outline](papers.md#directive-outline) | the short name the outline gives the next section | what the paper reads | | [decision](papers.md#directive-decision), [answer](papers.md#directive-answer) | the question a concept puts, and the answers it can take | `sds-decision` | | [slide](papers.md#directive-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](tools.md#directive-codemode) | markup that stands in the page as its author wrote it | what it holds | | [example](tools.md#directive-example) | a piece of markup and, under it, what it renders as | `sds-code` in `.sds-example` | | [specimen](tools.md#directive-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](../../frontend/components/index.md) 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.