Elements

All the independent design elements that are used to build the components and modules on the Louder Than Ten site.

These elements are designed for the context of the browser, but they can also work as inspiration for other mediums like print.

Headings


Default headings

Primary heading

Secondary heading

Third heading

Fourth heading

Fifth heading
Sixth heading

Linked headings

Primary heading

Secondary heading

Third heading

Fourth heading

Fifth heading
Sixth heading

Alternate headings

Alternate title heading

Alternate secondary heading

Alternate third heading


Linked alternate headings

Alternate title heading

Alternate secondary heading

Alternate third heading

Dual headings

Primary Sub heading


Secondary Sub heading


Tertiary Sub heading

Heading groups


Subhead

Primary


Subhead

Secondary


Subhead

Tertiary


Markup examples

<!-- Dual headings -->
<h1>Primary<small> Sub heading</small></h1>

<!-- Heading groups -->
<div class="hgroup">
  <h2>Primary page heading</h2>
  <h1>Primary page heading</h1>
</div>

Paragraphs


This is a lead paragraph. It is emphasised to bring readers into an article. Let’s add a sexy & character. Sed posuere consectetur est at lobortis. Vestibulum id ligula porta felis euismod semper. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit. Donec sed odio dui.

Here are some paragraphs. This is the meat of our content and where we most of our typographic decisions live. Look inside the following paragraphs for examples of links, bold text, and italics. Here is a foonote reference*

Donec id elit HTML non mi porta gravida at eget metus. Nulla vitae elit libero, a pharetra augue. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras mattis consectetur purus sit amet fermentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Sed posuere consectetur est at lobortis. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.


* Here is some fine print. It can be used for the little stuff, like this footnote.


Primary heading

Donec id elit HTML non mi porta gravida at eget metus. Nulla vitae elit libero, a pharetra augue. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras mattis consectetur purus sit amet fermentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Secondary heading

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

Third heading

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Fourth heading

Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Sed posuere consectetur est at lobortis. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Fifth heading

Donec id elit HTML non mi porta gravida at eget metus. Nulla vitae elit libero, a pharetra augue. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras mattis consectetur purus sit amet fermentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Sixth heading

Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Sed posuere consectetur est at lobortis. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.


Article paragraphs

This is a lead paragraph. It is emphasised to bring readers into an article. Let’s add a sexy & character. Sed posuere consectetur est at lobortis. Vestibulum id ligula porta felis euismod semper. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit. Donec sed odio dui.

Here are some paragraphs. This is the meat of our content and where we most of our typographic decisions live. Look inside the following paragraphs for examples of links, bold text, and italics. Here is a foonote reference*

Donec id elit HTML non mi porta gravida at eget metus. Nulla vitae elit libero, a pharetra augue. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras mattis consectetur purus sit amet fermentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Sed posuere consectetur est at lobortis. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.


* Here is some fine print. It can be used for the little stuff, like this footnote.


Primary heading

Donec id elit HTML non mi porta gravida at eget metus. Nulla vitae elit libero, a pharetra augue. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras mattis consectetur purus sit amet fermentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Secondary heading

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

Third heading

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Fourth heading

Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Sed posuere consectetur est at lobortis. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Fifth heading

Donec id elit HTML non mi porta gravida at eget metus. Nulla vitae elit libero, a pharetra augue. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras mattis consectetur purus sit amet fermentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Sixth heading

Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Sed posuere consectetur est at lobortis. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Lists


  • Unordered list item
  • Unordered list item
  • Unordered list item
  • Unordered list item
    • Unordered list item
    • Unordered list item
    • Unordered list item
  • Unordered list item
  • Unordered list item
  • Unordered list item
  1. Ordered list item
  2. Ordered list item
  3. Ordered list item
  4. Ordered list item
  5. Ordered list item
  6. Ordered list item
  7. Ordered list item
Definition title
Definition description. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec sed odio dui. Donec id elit non mi porta gravida at eget metus.
Definition title
Definition description. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec sed odio dui. Donec id elit non mi porta gravida at eget metus.
Definition title
Definition description. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec sed odio dui. Donec id elit non mi porta gravida at eget metus.

Quotes


This is some text with an inline quote inside of it.

This is a blockquote. We use this when quoting others or displaying testimonials.

This is a pull quote. It is designed to highlight passages of text within an article.

This is a testimonial. We use this when quoting others or displaying testimonials.

Source name Organization

Text elements


Timestamp


Prices

$100.00

$100.00


More links

Read more

Coloured text

Attention

Negative

Caution

Positive


VCard

Company name 123 West Chester Street Vancouver, BC V7B 0B4 Canada

Phone 1 (888) 555-5555

Borders


Thick


Black


Grey


Light


White


Square


Red


Dashed


Dotted


Form fields


Text Inputs


HTML5 Special fields

Checks & Radios

Checkboxes

Radios

Selects

File uploads

Controls


Checkbox option buttons

Markup example:

<div class="field option-buttons js-options">
   <label for="cb1"><input type="checkbox" name="check-button" value="1" id="cb1" />Item 1</label>
   <label for="cb2"><input type="checkbox" name="check-button" value="2" id="cb2" />Item 2</label>
   <label for="cb3"><input type="checkbox" name="check-button" value="3" id="cb3" />Item 3</label>
</div>

Radio option buttons

Markup example:

<div class="field option-buttons js-options">
   <label for="rb1"><input type="radio" name="radio-button" value="1" id="rb1" />Item 1</label>
   <label for="rb2"><input type="radio" name="radio-button" value="2" id="rb2" />Item 2</label>
   <label for="rb3"><input type="radio" name="radio-button" value="3" id="rb3" />Item 3</label>
</div>

Checkbox pill buttons

Markup example:

<div class="field pill-buttons js-options">
   <label for="cp1"><input type="checkbox" name="check-button" value="1" id="cp1" />Item 1</label>
   <label for="cp2"><input type="checkbox" name="check-button" value="2" id="cp2" />Item 2</label>
   <label for="cp3"><input type="checkbox" name="check-button" value="3" id="cp3" />Item 3</label>
</div>

Radio pill buttons

Markup example:

<div class="field pill-buttons js-options">
   <label for="rp1"><input type="radio" name="radio-button" value="1" id="rp1" />Item 1</label>
   <label for="rp2"><input type="radio" name="radio-button" value="2" id="rp2" />Item 2</label>
   <label for="rp3"><input type="radio" name="radio-button" value="3" id="rp3" />Item 3</label>
</div>

Switch

Markup example:

<div class="field switch">
   <input id="x" name="switch-x" type="radio" checked />
   <label for="x">Off</label>
   <input id="y" name="switch-x" type="radio" />
   <label for="y">On</label>
</div>