# Components Every component in [system/components.css](system/components.css), with when to use it and the HTML to copy. See them all rendered in [guide.html](guide.html#components), and in whole pages in [examples/](examples/). Part of the [SoR design system](README.md); start from [BUILD.md](BUILD.md). Edit the readable source `system/components.src.css`, then run `python3 system/build/build-css.py`. Photographs sit flat in a plain `
`; the postcard `.print` is retired ([layout.md](layout.md#material)). ## Base and type roles | Class | What | |---|---| | `.sor` | On ``. Paper ground, body type, paper grain, container for fluid sizes. | | `.gutter` | Page side padding. | | `.section` | Section vertical padding; a first-child `.label` becomes the section label. | | `.ground-white` `.ground-paper` `.ground-sun` `.night` | Section grounds (see [layout.md](layout.md)). | | `.display` | Polyamine, for inline display text. | | `.label` | Small uppercase Apfel label. Add `.muted` for grey. | | `.poem` / `.poem-strong` | Soft italic serif, light / medium. | | `.link` | The red in-text link. | ## Buttons, links, fields When: one solid button per section for the main action; outline for secondary actions; `.text-link` inside lists. ```html Save a place How to join Register

… Read the manifesto

``` Inside `.night`, buttons turn chalk automatically. ## Site header When: every page. Use `--centred` over a full-bleed photo hero. ```html
Seeds of Renaissance
``` ## Photo hero When: the one statement of a landing page, over a strong landscape photograph. Five to ten words of Polyamine. ```html
…
Gathering · Thursday 15 October

The Global Connection Call

An hour together, online, for those who sense the old world is ending and want to help seed the new.

Save a place
``` ## Split hero When: a landing page without a strong landscape photo. Statement beside a plate. ```html
…

…

…

…
…
Fig. 1…
``` ## Page title When: inner pages. Title, dedication in the poetic voice, a plate; a seed spiral behind. ```html
Manifesto

A Manifesto for Civilizational Renewal

For all the living beings…

…
``` ## Statement When: what we believe. One light paragraph, one sentence in `.poem-strong`, one red link, a sown row, a plate. ```html
What we believe

Something is ending… We are a movement… Read the manifesto

…
Fig. 1…
``` ## Pathways When: the four ways to take part. Each keeps its seed (Gather sunflower, Practise wheat, Belong bean, Seed maple key). ```html
… Gather

Connection calls

Monthly, online, open to all.

 …
``` ## Selected work (night) When: the page's one deep section: podcast, essays, art. Hover or focus a row to change the picture (`sor.js`). On phones and touch screens, where there is no hover, each row shows its own picture beside it instead (`sor.js` adds it from `data-img`). ```html
Selected work
  • PodcastSeeds of Renaissance…
    • …
…
Fig. 2…
``` ## Printed object When: the magazine or a book. ```html
Cover of magazine issue 2, Mythos
In print · Issue #2

Mythos

…

Subscribe · €35 a year
``` ## Calendar When: upcoming dates, text only. One action per row. ```html
15 OctGlobal Connection CallOnline · 19:30 UK · freeSave a place
``` ## Events When: gatherings with photographs. ```html
…
15Oct

Global Connection Call

Online, an hour, free.

``` ## Band When: one call to action across the page, on sunlight. ```html

Come to a call

…

Save a place
``` ## Interlude When: a single poetic line between sections. ```html

Life as an art. In this soil we plant the seeds of a Renaissance.

From the manifesto
``` ## Engage When: newsletter, join, support, near the end of a page. ```html

The Greenhouse

…

Subscribe

Join the movement

…

How to join

Support the work

…

Become a patron
``` ## Long reading When: articles, the manifesto. 680px measure on white. ```html

First paragraph, with a Polyamine drop cap…

A pull quote line.Another.

…

A line of verse, centred.

  1. …
  2. The last item is set large in Polyamine.
``` ## Contents When: a magazine's table of contents, or any numbered list of works. ```html
  1. EssayTitleAuthor12
``` ## Footer When: every page. Night, torn in, logo on its disc. ```html ``` ## More components Copy the markup from the example pages named. | Class | When | Example | |---|---|---| | `.actions` | A wrapping row of buttons | gatherings, magazine | | `.hero-split .flock` | A swallow flock inside a split hero | [gatherings.html](examples/web/gatherings.html) | | `.swallows` | A small inline pair of swallows above a line | gatherings | | `.table-wrap` + `.hubs` | "Where we gather" table; rows stack on phones | gatherings | | `.hero-banner` | Full-bleed photo on night, label and title set low left; follow with `.tear--bottom` | [join.html](examples/web/join.html) | | `.steps` / `.step` | Numbered ways in: seed, numeral, picture, title, text | join | | `.voices` | Three member quotes | join | | `.issue-hero` | Magazine cover beside a huge title, intro, actions and `.contents` | [magazine.html](examples/web/magazine.html) | | `.poem-block` | Centred poem lines with an optional corner seal | magazine | | `.spread` | Two plates side by side, bottoms aligned | magazine | | `.whitepaper-head`, `.whitepaper-meta`, `.whitepaper` | Paper title, byline, and two columns with a sticky numbered contents | [white-paper.html](examples/web/white-paper.html) | | `.abstract` | Abstract with a left ink rule | white paper | | `.fn` / `.notes` | Red footnote marks and the notes list | white paper |