We are working on something new! Check it out here!

Headings

Headings for use within articles and more. Please always set the id attribute on headings to enable anchor-linking.

Modifiers

  • .text-highlight - Will highlight any heading in the current theme color
  • .underline - Underlines the heading

Example

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
<h1 id="anchor-1">Heading 1</h1>
<h2 id="anchor-2">Heading 2</h2>
<h3 id="anchor-3">Heading 3</h3>
<h4 id="anchor-4">Heading 4</h4>
<h5 id="anchor-5">Heading 5</h5>
<h6 id="anchor-6">Heading 6</h6>
Source file: ~/source/sass/elements/_headings.scss

Sub heading

Subheading element to combine with a ordinary heading

Example

I love cake
<div class="sub-heading">I love cake</div>
Source file: ~/source/sass/elements/_headings.scss

Blockquote

Example

Jujubes jelly beans marshmallow danish brownie lollipop pudding. Apple pie wafer donut cake soufflé bonbon. Powder icing pastry carrot cake gummies tart tiramisu.

<blockquote>
    <p>Jujubes jelly beans <strong>marshmallow</strong> danish brownie lollipop pudding. Apple pie wafer donut <strong>cake soufflé</strong> bonbon. Powder icing pastry carrot cake gummies tart tiramisu.</p>
</blockquote>
Source file: ~/source/sass/elements/_quotes.scss

Text alignment

Aligns text.

Example

Left aligned text
Center aligned text
Right aligned text
Justified text
<div class="text-left">Left aligned text</div>
<div class="text-center">Center aligned text</div>
<div class="text-right">Right aligned text</div>
<div class="text-justify">Justified text</div>
Source file: ~/source/sass/utility/_text.scss

Front size

Font size

Modifiers

  • .text-sm - Small
  • .text-md - Medium (default)
  • .text-lg - Large
  • .text-xl - Extra Large

Example

Left aligned text
<div class="text-left">Left aligned text</div>
Source file: ~/source/sass/utility/_text.scss

Highlight

Highlights text.

Example

Highlighted
<span class="text-highlight">Highlighted</span>
Source file: ~/source/sass/utility/_text.scss

Text color

Modifiers to set the text color

Modifiers

  • .text-dark-gray - Dark gray text color

Example

Dark gray
<span class="text-dark-gray">Dark gray</span>
Source file: ~/source/sass/utility/_text.scss

Underline

Underlines text.

Example

Underlined
<span class="text-underline">Underlined</span>
Source file: ~/source/sass/utility/_text.scss

Text transform

Transforms text

Example

Underlined Underlined Underlined
<span class="text-uppercase">Underlined</span>
<span class="text-lowercase">Underlined</span>
<span class="text-capitalize">Underlined</span>
Source file: ~/source/sass/utility/_text.scss

Mark

Mark text to make it stand out.

Modifiers

  • .mark-yellow - Mark with yellow color
  • .mark-blue - Mark with blue color
  • .mark-green - Mark with green color
  • .mark-red - Mark with red color
  • .mark-purple - Mark with purple color

Example

One of the words in this sentence is marked.
One of the words in this sentence is marked.
One of the words in this sentence is marked.
One of the words in this sentence is marked.
One of the words in this sentence is marked.
One of the words in this sentence is marked.
One of the words in this sentence is <mark>marked</mark>.<br>
One of the words in this sentence is <mark class="mark-yellow">marked</mark>.<br>
One of the words in this sentence is <mark class="mark-blue">marked</mark>.<br>
One of the words in this sentence is <mark class="mark-green">marked</mark>.<br>
One of the words in this sentence is <mark class="mark-red">marked</mark>.<br>
One of the words in this sentence is <mark class="mark-purple">marked</mark>.
Source file: ~/source/sass/utility/_text.scss

Small

Small text. Can be used with the <small> element or by applying the .small class to any element.

Example

This is a small text
&lt;small&gt;This is a small text&lt;/small&gt;
Source file: ~/source/sass/utility/_text.scss

Truncate

Forces a string to not break into multiple rows, truncates it with ellipsis (…). Overflow shows on hover.

Example

This is a long text that hopefully will be forced into one line and truncated with ellipsis. Hover it to show the overflowing part.
&lt;span class="truncate"&gt;This is a long text that hopefully will be forced into one line and truncated with ellipsis. Hover it to show the overflowing part.&lt;/span&gt;
Source file: ~/source/sass/utility/_text.scss

Weight

Set fontweight

Example

Weight 300 Weight 400 Weight 500 Weight 700 Weight 900
&lt;span class="weight-300"&gt;Weight 300&lt;/span&gt;
&lt;span class="weight-400"&gt;Weight 400&lt;/span&gt;
&lt;span class="weight-500"&gt;Weight 500&lt;/span&gt;
&lt;span class="weight-700"&gt;Weight 700&lt;/span&gt;
&lt;span class="weight-900"&gt;Weight 900&lt;/span&gt;
Source file: ~/source/sass/utility/_text.scss

Article

A full article with heading, lead and body text

Example

Candy tootsie roll cookie

Dragée I love macaroon jelly-o I love. Soufflé I love I love I love. Cotton candy sugar plum caramels. Soufflé halvah sweet. Wafer jujubes dessert tart donut cookie chupa chups croissant. Jelly jujubes fruitcake tart danish sesame snaps pie dessert.

Dessert dessert I love powder sweet fruitcake soufflé bonbon. I love jelly beans carrot cake chupa chups lemon drops croissant lemon drops. I love cheesecake brownie oat cake topping candy canes caramels. Lemon drops bonbon gingerbread pastry I love dessert jujubes caramels ice cream. Topping sugar plum cookie tiramisu I love I love powder. Tiramisu bear claw candy cotton candy croissant macaroon bear claw. Chocolate bar cupcake halvah gummi bears I love.

Sesame snaps bonbon fruitcake dragée pastry. Caramels icing cake lollipop donut liquorice. Sweet roll pudding gingerbread apple pie cheesecake I love caramels chocolate bar. Cheesecake apple pie muffin cake toffee lemon drops apple pie. Danish oat cake pastry sugar plum jelly chocolate bar pastry pudding. Sesame snaps jujubes soufflé liquorice cake.

Cupcake marzipan biscuit cupcake chocolate cake. I love muffin sweet. Cake sweet roll donut dragée sesame snaps I love.

&lt;article&gt;
     &lt;h1&gt;Candy tootsie roll cookie&lt;/h1&gt;
     &lt;p class="lead"&gt;Dragée I love macaroon jelly-o I love. Soufflé I love I love I love. Cotton candy sugar plum caramels. Soufflé halvah sweet. Wafer jujubes dessert tart donut cookie chupa chups croissant. Jelly jujubes fruitcake tart danish sesame snaps pie dessert.&lt;/p&gt;
     &lt;p&gt;Dessert dessert I love powder sweet fruitcake soufflé bonbon. I love jelly beans carrot cake chupa chups lemon drops croissant lemon drops. I love cheesecake brownie oat cake topping candy canes caramels. Lemon drops bonbon gingerbread pastry I love dessert jujubes caramels ice cream. Topping sugar plum cookie tiramisu I love I love powder. Tiramisu bear claw candy cotton candy croissant macaroon bear claw. Chocolate bar cupcake halvah gummi bears I love.&lt;/p&gt;
     &lt;p&gt;Sesame snaps bonbon fruitcake dragée pastry. Caramels icing cake lollipop donut liquorice. Sweet roll pudding gingerbread apple pie cheesecake I love caramels chocolate bar. Cheesecake apple pie muffin cake toffee lemon drops apple pie. Danish oat cake pastry sugar plum jelly chocolate bar pastry pudding. Sesame snaps jujubes soufflé liquorice cake.&lt;/p&gt;
     &lt;p&gt;Cupcake marzipan biscuit cupcake chocolate cake. I love muffin sweet. Cake sweet roll donut dragée sesame snaps I love.&lt;/p&gt;
&lt;/article&gt;
Source file: ~/source/sass/objects/typography/_article.scss

Label

Label a text with a filled background

Modifiers

  • .label-tag - Adds arrow shape to label end
  • .label-sm - Smaller label
  • .label-lg - Larger label
  • .label-theme - Uses the current theme color
  • .label-red-1 - First color in red stripe (color 1-5 available)
  • .label-blue-1 - First color in blue stripe (color 1-5 available)
  • .label-green-1 - First color in green stripe (color 1-5 available)
  • .label-purple-1 - First color in purple stripe (color 1-5 available)

Example

I love tiramisu I love. Topping I love cake carrot cake fruitcake topping.
I love tiramisu I love. Topping I love cake &lt;span class="label label-red-2"&gt;carrot cake&lt;/span&gt; fruitcake topping.
Source file: ~/source/sass/objects/typography/_label.scss

Lead

A large paragraph to use as article lead.

Example

Dragée I love macaroon jelly-o I love. Soufflé I love I love I love. Cotton candy sugar plum caramels. Soufflé halvah sweet. Wafer jujubes dessert tart donut cookie chupa chups croissant. Jelly jujubes fruitcake tart danish sesame snaps pie dessert.

&lt;p class="lead"&gt;Dragée I love macaroon jelly-o I love. Soufflé I love I love I love. Cotton candy sugar plum caramels. Soufflé halvah sweet. Wafer jujubes dessert tart donut cookie chupa chups croissant. Jelly jujubes fruitcake tart danish sesame snaps pie dessert.&lt;/p&gt;
Source file: ~/source/sass/objects/typography/_lead.scss

Unordered list

Stanrdard unordered list.

Modifiers

  • .unordered-list - Applies the style to lists used outside article. There's no need to apply this class when using ul inside an article

Example

  • Cupcake
  • Brownie
  • Gingerbread
&lt;ul class="unordered-list"&gt;
    &lt;li&gt;Cupcake&lt;/li&gt;
    &lt;li&gt;Brownie&lt;/li&gt;
    &lt;li&gt;Gingerbread&lt;/li&gt;
&lt;/ul&gt;
Source file: ~/source/sass/objects/typography/_list.scss

Ordered list

Stanrdard ordered list.

Example

  1. Cupcake
  2. Brownie
  3. Gingerbread
&lt;ol class="ordered-list"&gt;
    &lt;li&gt;Cupcake&lt;/li&gt;
    &lt;li&gt;Brownie&lt;/li&gt;
    &lt;li&gt;Gingerbread&lt;/li&gt;
&lt;/ol&gt;
Source file: ~/source/sass/objects/typography/_list.scss