Styleguide

Sample Text Elements

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

A small element

A link

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut underline element labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco italicised element laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in a link reprehenderit in voluptate velit esse cillum bold text dolore eu fugiat nulla pariatur. Excepteur span element sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  • An item
  • An item
  • An item
  • An item
  • An item
  1. Item one
  2. Item two
  3. Item three
  4. Item four
  5. Item five

Bold text

Italicised element

Underline element

A simple blockquote

Another line of code

Span element

Sample Body Copy

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean viverra viverra vestibulum. Nulla feugiat dapibus leo ac egestas. Nam luctus vel diam vel dignissim. Nam eu quam sit amet diam porttitor scelerisque. In tristique lorem orci, id consectetur libero ullamcorper non. Fusce sit amet orci turpis. Praesent faucibus sapien at dolor mattis bibendum. Maecenas risus tortor, auctor vitae purus posuere, mollis mattis mauris. Pellentesque vestibulum, turpis eu tempor auctor, odio erat blandit ipsum, id suscipit erat justo ut tellus. Nunc fermentum purus nec purus adipiscing, et volutpat erat commodo. Proin malesuada libero eget risus bibendum aliquet. Nulla sit amet congue purus.

Vivamus aliquam id nibh non molestie. Donec varius lectus mauris, euismod lacinia ante suscipit ut. Etiam et mattis tortor. Donec ornare, lorem sed gravida commodo, neque dui sodales odio, sed tempus nunc orci non urna. Sed congue dolor auctor, posuere orci in, consequat tortor.

Suspendisse potenti. Pellentesque at ligula vitae erat convallis sollicitudin. Quisque id mollis nibh. Mauris vel auctor nisi. Nulla sagittis, mi vitae egestas gravida, arcu libero rhoncus libero, ac semper metus diam et nulla.

Cras id mi at felis convallis pretium. Integer egestas est sed tincidunt vestibulum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

In Page Heading

Nulla quam ante, porttitor sed dapibus eu, pellentesque eu velit. Vivamus a magna a lectus dignissim porttitor a id elit. Vestibulum dignissim lacinia nisi, ut tempor neque tempus ac. Aliquam eu ante in libero suscipit porttitor. Morbi magna magna, convallis eu dictum eleifend, gravida sed nunc. Fusce sed libero mollis, mollis nunc quis, iaculis lorem. Etiam eu elementum lorem, eu molestie ante.

Morbi aliquam velit nec augue hendrerit viverra. Curabitur nibh ante, malesuada nec sodales et, ornare et lorem. Cras quis placerat dui. Vivamus ante dui, tempus a laoreet faucibus, rutrum ut sem. Fusce faucibus dui vel auctor mollis. Aenean sed tincidunt felis, vitae posuere justo. Duis condimentum mauris sem, vel luctus neque sollicitudin quis. Mauris at leo sit amet neque sodales malesuada vitae et ante. Integer tempus, enim vitae venenatis ullamcorper, massa mauris cursus tortor, a tempor erat neque ac nisl. Nullam eget nibh enim. Nulla ut erat eu enim pulvinar feugiat.

Maecenas adipiscing, purus ut fringilla rhoncus, nisi sem consectetur augue, non dignissim augue nulla lacinia felis. Donec tincidunt venenatis tellus, sit amet sodales nulla vulputate sit amet.

In Page Heading

Sed pharetra orci gravida, convallis ipsum sed, bibendum mauris. Maecenas molestie, augue eu sagittis vulputate, sem nunc lacinia lectus, eu semper magna erat vel tellus. Nunc sit amet lacinia turpis, sed semper ante. Ut malesuada facilisis arcu eget viverra. Nullam facilisis ante sit amet mattis sodales. Sed in ligula vehicula, commodo lorem vitae, molestie leo. Vestibulum at odio a velit consequat dictum. Sed pellentesque tellus eu neque luctus consectetur.

Nam tempor sed lorem sit amet sodales. Aliquam tempor, elit nec lobortis volutpat, nunc lectus dignissim magna, vitae porttitor massa velit dapibus lectus. Vestibulum ut orci pretium, vehicula odio ut, tempor augue. Mauris vestibulum risus nec dolor rutrum posuere. Sed posuere viverra purus, in hendrerit turpis vestibulum et. Donec eu quam ut diam lobortis pulvinar. Vestibulum dignissim libero sed libero varius molestie porttitor eu tellus. Sed at convallis ipsum, eget interdum lectus.

In Page Heading

Nulla quam ante, porttitor sed dapibus eu, pellentesque eu velit. Vivamus a magna a lectus dignissim porttitor a id elit. Vestibulum dignissim lacinia nisi, ut tempor neque tempus ac. Aliquam eu ante in libero suscipit porttitor. Morbi magna magna, convallis eu dictum eleifend, gravida sed nunc. Fusce sed libero mollis, mollis nunc quis, iaculis lorem. Etiam eu elementum lorem, eu molestie ante.

Morbi aliquam velit nec augue hendrerit viverra. Curabitur nibh ante, malesuada nec sodales et, ornare et lorem.

Cras quis placerat dui. Vivamus ante dui, tempus a laoreet faucibus, rutrum ut sem. Fusce faucibus dui vel auctor mollis. Aenean sed tincidunt felis, vitae posuere justo. Duis condimentum mauris sem, vel luctus neque sollicitudin quis. Mauris at leo sit amet neque sodales malesuada vitae et ante. Integer tempus, enim vitae venenatis ullamcorper, massa mauris cursus tortor, a tempor erat neque ac nisl.

Nullam eget nibh enim. Nulla ut erat eu enim pulvinar feugiat. Maecenas adipiscing, purus ut fringilla rhoncus, nisi sem consectetur augue, non dignissim augue nulla lacinia felis. Donec tincidunt venenatis tellus, sit amet sodales nulla vulputate sit amet.

Code Samples

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Hello world</title>
  </head>
  <body>
    <h1>Hello world</h1>
  </body>
</html>

body {
  background-color: @color-swatch1;
  margin: 0;
  padding: 0;
}

  {{widget('content', 'thisunqiuewidgetname', {content: 'This is a content widget.', lines: 'all'})|raw}}

{
  "name": "example",
  "thumbnail": "example.png",
  "pageTypes": [
    "home", "about", "contact", "gallery"
  ]
}