Heading sizes are set according to a modular typographic scale, based on musical intervals, as described in Composing the New Canon: Music, Harmony, Proportion. There’s no need to set heading sizes, just define the $root-size and $scale and Embrace’s complex Voodoo Majic* ensures a consistent vertical rhythym.

Main page headings, like the one above, are <h1> elements, so further headings within this document scope should start with <h2>, as shown below.

Second-level heading

More than one <h2> may be used per page. Consider using an <h2> unless you need a header level of less importance, or as a sub-header to an existing <h2> element. Lorem markdownum, oris enim occupat pudorem arabat, spatium tua pinus. Icarus lacrimabile illa adversas profugus alae: cetera, non quaerens. Est et parentis, et sponte poplite corpora, comas, et spretor frondibus utroque ingeniis iacet prosunt mihi sed.

Third-level heading

The header above is an <h3> element, it should be used for any page-level header which falls below the <h2> header in the document hierarchy. Praerupit quidem robora silvis mittit capitum recondiderat terga arma quoque dictis dimittite bicorni oscula. Seductus et inde nec. Pennatis opposita. Coniuge idemque felix me fuit penates ab haeret spatium ne fluctus relecto.

Erebi qui: levare ille undas Mulciber talia Thisbe memoratis fugant; post sex magistra senior, tandem; de. Gratamque tibi. Non possem agmenque fugias ait sepulcrum his et tibi scopulum. Tumentibus ille, aure refert, enim offensaque oscula.

Fourth-level heading

The header above is an <h4> element, it should be used for any page-level header which falls below the <h3> header in the document hierarchy. Continet numen natas agresti, incumbit ipso uritur nulloque mersae ab iussa non amatam: terras. Deos detectique iuvenes me atque inplevit, quo, boves claudere et curru, praesagaque! Ambit Delphis retinere Phrygiae manu. Nepotis rurisque aper, iunctisque mecum Tectaphon Gorgone erat agmen!

Fifth-level heading.

The header above is an <h5> element, it should be used for any page-level header which falls below the <h4> header in the document hierarchy. Et iubas rectumque dictis: orbes renoventur reposco. Amplexans grave, orbes, o moverat, volvitur ad molles intellecta! Spumis innixus capillos hic esse luxque sit, spectans modo pars sospes deus deduxisse volubile. Cum adsuetudine ferro negaretur ambagibus gratia decrescunt nigrique tamen, cur gestit anus poteras.

Sixth-level heading (Nothing to see here).

The header above is an <h6> element, it should be used for any page-level header which falls below the <h5> header in the document hierarchy. Ossaque perque me tibi pete caedis comitate ilice est sortes timide nati ponat tantae, ab.

* Actually, it’s just a Sass mixin and a couple of functions.

Embrace implements sensible typographic defaults with minimal styles that target list elements directly. These defaults can be overridden by styling classes if required.

Unordered lists

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Phasellus iaculis neque
• Purus sodales ultricies
• Faucibus porta lacus fringilla vel
• Aenean sit amet erat nunc

<ul>
  <li>Lorem ipsum dolor sit amet</li>
  <li>Consectetur adipiscing elit</li>
    <ul>
      <li>Phasellus iaculis neque</li>
      <li>Purus sodales ultricies</li>
    </ul>
  </li>
  <li>Faucibus porta lacus fringilla vel</li>
  <li>Aenean sit amet erat nunc</li>
</ul>

Ordered lists

1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Integer molestie lorem at massa
4. Facilisis in pretium nisl aliquet

<ol>
  <li>Lorem ipsum dolor sit amet</li>
  <li>Consectetur adipiscing elit</li>
  <li>Integer molestie lorem at massa</li>
  <li>Facilisis in pretium nisl aliquet</li>
</ol>

Description lists

Description lists have no explicit styling, other than to normalize browser rendering, as they don’t get used very often there’s little point in defining styling classes for them. If you want to, add your own styles to assets/_sass/patterns/lists.scss.

Description lists

A description list is perfect for defining terms.

<dl>
  <dt>Description lists</dt>
  <dd>A description list is perfect for defining terms.</dd>
</dl>

Figure and figcaption element styles, documentation to follow!

Form element styles, documentation to follow!

General typographic styles, documentation to follow!

Blockquote, cite and q element styles, documentation to follow!

Inline snippets of code should be wrapped with <code>, with <kbd> being used to indicate input that is entered via keyboard. <samp> is used to define sample output from a computer program. For indicating variables use the <var> tag.

Use <pre> for multiple lines of code, escaping any angle brackets to ensure proper rendering.