Style guide
Typography
Excelsior
Usage --font-heading-serif / .heading-serif-6xl .heading-serif-5xl .heading-serif-4xl .heading-serif-3xl .heading-serif-2xl .heading-serif-xl
Font family: "Excelsior", serif | Font style options: Normal | Font weight: 400
Heading serif 6xl (Desktop: Font Size: 56px / Line Height: 1.2 / Letter Spacing: -2 | Mobile: Font Size: 38px / Line Height: 1.2 / Letter Spacing: -2)The quick brown fox jumps over the lazy dog
Heading serif 5xl (Desktop: Font Size: 42px / Line Height: 1.2 / Letter Spacing: -2 | Mobile: Font Size: 32px / Line Height: 1.2 / Letter Spacing: -2)The quick brown fox jumps over the lazy dog
Heading serif 4xl (Desktop: Font Size: 32px / Line Height: 1.3 / Letter Spacing: -2 | Mobile: Font Size: 26px / Line Height: 1.3 / Letter Spacing: -2)The quick brown fox jumps over the lazy dog
Heading serif 3xl (Desktop: Font Size: 24px / Line Height: 1.3 / Letter Spacing: -2 | Mobile: Font Size: 20px / Line Height: 1.3 / Letter Spacing: -2)The quick brown fox jumps over the lazy dog
Heading serif 2xl (Desktop: Font Size: 20px / Line Height: 1.4 / Letter Spacing: -2 | Mobile: Font Size: 18px / Line Height: 1.4 / Letter Spacing: -2)The quick brown fox jumps over the lazy dog
Heading serif xl (Desktop: Font Size: 18px / Line Height: 1.4 / Letter Spacing: -2 | Mobile: Font Size: 16px / Line Height: 1.4 / Letter Spacing: -2)The quick brown fox jumps over the lazy dog
Helvetica Neue
Usage --font-heading-sans / h1 | .heading-sans-6xl h2 | .heading-sans-5xl h3 | .heading-sans-4xl h4 | .heading-sans-3xl h5 | .heading-sans-2xl h6 | .heading-sans-xl
Font family: "Helvetica Neue", sans-serif | Font style options: Normal | Font weight: 300
Heading sans 6xl (Desktop: Font Size: 56px / Line Height: 1.2 / Letter Spacing: 0 | Mobile: Font Size: 38px / Line Height: 1.2 / Letter Spacing: 0)The quick brown fox jumps over the lazy dog
Heading sans 5xl (Desktop: Font Size: 42px / Line Height: 1.2 / Letter Spacing: 0 | Mobile: Font Size: 32px / Line Height: 1.2 / Letter Spacing: 0)The quick brown fox jumps over the lazy dog
Heading sans 4xl (Desktop: Font Size: 32px / Line Height: 1.3 / Letter Spacing: 0 | Mobile: Font Size: 26px / Line Height: 1.3 / Letter Spacing: 0)The quick brown fox jumps over the lazy dog
Heading sans 3xl (Desktop: Font Size: 24px / Line Height: 1.3 / Letter Spacing: 0 | Mobile: Font Size: 20px / Line Height: 1.3 / Letter Spacing: 0)The quick brown fox jumps over the lazy dog
Heading sans 2xl (Desktop: Font Size: 20px / Line Height: 1.4 / Letter Spacing: 0 | Mobile: Font Size: 18px / Line Height: 1.4 / Letter Spacing: 0)The quick brown fox jumps over the lazy dog
Heading sans xl (Desktop: Font Size: 18px / Line Height: 1.4 / Letter Spacing: 0 | Mobile: Font Size: 16px / Line Height: 1.4 / Letter Spacing: 0)The quick brown fox jumps over the lazy dog
Body .body-lg .body-base .body-sm .body-xs .body-light .body-medium
Font family: "Helvetica Neue", sans-serif / Font style: Normal / Font weight: 400, 500, 600
.body-lg (Desktop: Font Size: 18px / Line Height: 1.6 / Letter Spacing: 0 | Mobile: Font Size: 16px / Line Height: 1.6 / Letter Spacing: 0)A paragraph (from the Greek paragraphos, “to write beside” or “written beside”) is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.
This can me made light with .body-light
This can me made medium with .body-medium.
Regular weight is default to this class
.body-base (Font Size: 16px / Line Height: 1.6 / Letter Spacing: 0)A paragraph (from the Greek paragraphos, “to write beside” or “written beside”) is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.
This can me made light with .body-light
This can me made medium with .body-medium.
Regular weight is default to this class
.body-sm (Font Size: 14px / Line Height: 1.6 / Letter Spacing: 0)A paragraph (from the Greek paragraphos, “to write beside” or “written beside”) is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.
This can me made light with .body-light
This can me made medium with .body-medium.
Regular weight is default to this class
.body-xs (Font Size: 12px / Line Height: 1.6 / Letter Spacing: 0)A paragraph (from the Greek paragraphos, “to write beside” or “written beside”) is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.
This can me made light with .body-light
This can me made medium with .body-medium.
Regular weight is default to this class
Colours
Brand colours
New Children's Range colours
Functional colours
Typography
Paragraph
A paragraph (from the Greek paragraphos, “to write beside” or “written beside”) is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.
Blockquote
A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text.
It is typically distinguished visually using indentation and a different typeface or smaller size quotation. It may or may not include a citation, usually placed at the bottom.
Said no one, ever.
Ordered List
- List Item 1
- List Item 2
- List Item 3
Unordered List
- List Item 1
- List Item 2
- List Item 3
Inline elements
Strong is used to indicate strong importance.
This text has added emphasis.
The b element is stylistically different text from normal text, without any special importance.
The i element is text that is offset from the normal text.
The u element is text with an unarticulated, though explicitly rendered, non-textual annotation.
This text is deleted and This text is inserted.
This text has a strikethrough.
Superscript®.
Subscript for things like H2O.
This small text is small for for fine print, etc.
Abbreviation: HTML
This text is a short inline quotation.
This is a citation.
The dfn element indicates a definition.
The mark element indicates a highlight.
The variable element, such as x = y.
The time element:
Horizontal rules
Tabular data
| Table Heading 1 | Table Heading 2 | Table Heading 3 | Table Heading 4 | Table Heading 5 |
|---|---|---|---|---|
| Table Footer 1 | Table Footer 2 | Table Footer 3 | Table Footer 4 | Table Footer 5 |
| Table Cell 1 | Table Cell 2 | Table Cell 3 | Table Cell 4 | Table Cell 5 |
| Table Cell 1 | Table Cell 2 | Table Cell 3 | Table Cell 4 | Table Cell 5 |
| Table Cell 1 | Table Cell 2 | Table Cell 3 | Table Cell 4 | Table Cell 5 |
| Table Cell 1 | Table Cell 2 | Table Cell 3 | Table Cell 4 | Table Cell 5 |
Form elements
Input fields
Code example
{% render 'input-field', id: 'input__text', name: 'names', type: 'text', placeholder: 'Text Input', label: 'Text Input' %}
{% render 'input-field', id: 'input__text', name: 'names', type: 'password', placeholder: 'Type your Password', label: 'Password' %}
{% render 'input-field', id: 'input__emailaddress', type: 'email', placeholder: 'name@email.com', label: 'Email Address' %}
Select menus
Module input (Select example)
Code example
{%
render 'select-group',
id: 'input_country',
name: 'name',
label: 'Select', options:
'::USA||Canada||UK'
%}
Checkboxes
Module input (checkbox example)
Code example
{%
render 'checkbox-group',
field_id: 'checkbox-group2',
name: 'name',
label: 'checkbox',
checkboxes:'::Option X|""|true||Option Y|"selected"|true||Option Z|""|disabled'
%}
Radio buttons
Module input (radio example)
Code example
{%
render 'radio-group',
field_id: 'radio-group1',
name: 'form[name]'
label: 'radio-group',
radio_options:'::Choice A|"selected"|true||Choice B|""|true||Choice C (Disabled)|""|disabled||Choice D|""|true|'
%}
Textareas
Module input (Textarea example)
Code example
{% render 'textarea-group', id: 'textarea', name: 'name', label: 'Enter your message here', placeholder: 'Enter your message here' %}
HTML5 inputs
Module inputs (HTML5 input examples)
Code example
{% render 'input-field', id: 'ic', type: 'color', label: 'Color input' %}
{% render 'input-field', id: 'in', type: 'number', label: 'Number input', min_value:'0', max_value:'10', value:'5'%}
