Typography

Details on the full capabilities of Spectre.css can be found in the Official Spectre Documentation

Headings

H1 Heading 40px

H2 Heading 32px

H3 Heading 28px

H4 Heading 24px

H5 Heading 20px
H6 Heading 16px

Paragraphs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.

Climb leg rub face on everything give attitude nap all day for under the bed. Chase mice attack feet but rub face on everything hopped up on goofballs.

Dropcaps are great to tell a story. Once upon a time, lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec risus neque, eget sagittis est. Nulla eget libero ligula, ac scelerisque sapien. Donec sit amet sapien purus, sit amet tristique nisi.
You have also available emphasis classes like warning text, error text and information text. You can also use emphasised text, strong text, abbreviations, deleted text and obviously links.

Code

Cum sociis natoque penatibus et magnis dis code element montes, nascetur ridiculus mus.

// Example can be run directly in your JavaScript console

// Create a function that takes two arguments and returns the sum of those arguments
var adder = new Function("a", "b", "return a + b");

// Call the function
adder(2, 6);
// > 8

Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa.

Markdown Semantic Text Elements

Bold **Bold**

Italic _Italic_

Deleted ~~Deleted~~

Inline Code `Inline Code`

HTML Semantic Text Elements

I18N <abbr>

Citation <cite>

Ctrl + S <kbd>

TextSuperscripted <sup>

TextSubscxripted <sub>

Underlined <u>

Highlighted <mark>

<time>

x = y + 2 <var>

Blockquote

The advance of technology is based on making it fit in so that you don’t really even notice it, so it’s part of everyday life.

- Bill Gates

Unordered List

  • list item 1
  • list item 2
    • list item 2.1
    • list item 2.2
    • list item 2.3
  • list item 3

Ordered List

  1. list item 1
  2. list item 2
    1. list item 2.1
    2. list item 2.2
    3. list item 2.3
  3. list item 3

Table

Name Genre Release date
The Shawshank Redemption Crime, Drama 14 October 1994
The Godfather Crime, Drama 24 March 1972
Schindler’s List Biography, Drama, History 4 February 1994
Se7en Crime, Drama, Mystery 22 September 1995

Notices

The notices styles are actually provided by the Quarkyll plugin (module ??) but are useful enough to include here:

This is a default notification

This is a success notification

This is a warning notification

This is an error notification