Typography: Titles on page

Use follow mixins for styles titles:
  • @include header-1()
  • @include header-2()
  • @include header-3()
  • @include header-4()
  • @include header-4()
  • @include header-6()

This is a heading h1.

This is a heading h1.

This is a heading h2.

This is a heading h3.

This is a heading h4.

This is a heading h5.
This is a heading h6.

Typography: Plain Text

Use follow mixins for styles titles:
  • @include content()

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu turpis molestie, dictum est a, mattis tellus. Sed dignissim, metus nec fringilla accumsan, risus sem sollicitudin lacus, ut interdum tellus elit sed risus. Maecenas eget condimentum velit, sit amet feugiat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent auctor purus luctus enim egestas, ac scelerisque ante pulvinar. Donec ut rhoncus ex. Suspendisse ac rhoncus nisl, eu tempor urna. Curabitur vel bibendum lorem. Morbi convallis convallis diam sit amet lacinia. Aliquam in elementum tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu turpis molestie, dictum est a, mattis tellus. Sed dignissim, metus nec fringilla accumsan, risus sem sollicitudin lacus, ut interdum tellus elit sed risus. Maecenas eget condimentum velit, sit amet feugiat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent auctor purus luctus enim egestas, ac scelerisque ante pulvinar. Donec ut rhoncus ex.

Typography: Styles for rte

Use class "rte" on text container. "Rte" has the following styles for tags:

RTE tag h1

RTE tag h2

RTE tag h3

RTE tag h4

RTE tag h5
RTE tag h6

Example text content on rte (tag p)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu turpis molestie, dictum est a, mattis tellus. Sed dignissim, metus nec fringilla accumsan, risus sem sollicitudin lacus, ut interdum tellus elit sed risus. Maecenas eget condimentum velit, sit amet feugiat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent auctor purus luctus enim egestas, ac scelerisque ante pulvinar. Donec ut rhoncus ex. Suspendisse ac rhoncus nisl, eu tempor urna. Curabitur vel bibendum lorem. Morbi convallis convallis diam sit amet lacinia. Aliquam in elementum tellus. Examle link in rte Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu turpis molestie, dictum est a, mattis tellus. Sed dignissim, metus nec fringilla accumsan, risus sem sollicitudin lacus, ut interdum tellus elit sed risus. Maecenas eget condimentum velit, sit amet feugiat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent auctor purus luctus enim egestas, ac scelerisque ante pulvinar. Donec ut rhoncus ex.

Example unnumbered list on rte (tag ul)
  • Item rte 1
  • Item rte 2
  • Item rte 3
Example nested unnumbered list on rte (ul > ul > ul)
  • Item rte 1
  • Item rte 2
  • Item rte 3
    • Subitem rte 1
    • Subitem rte 2
    • Subitem rte 3
      • Subsubitem rte 1
      • Subsubitem rte 2
      • Subsubitem rte 3
Example numbered list on rte (tag ol)
  1. Item rte 1
  2. Item rte 2
  3. Item rte 3

Components: Buttons

Buttons examples:
  • @include button();
  • @include button-cream();
  • @include button-light-blue();
  • @include button-inverse();
  • @include button-light-almond();

Components: Text links

We have 1 link type.
  • link type 1 - @include new-link();

Components: Forms

Form elements have a specific structure:
          
<‌label
  data-control
  data-required-error=''
  data-validation-styles
>
          
  <‌input
    type=""
    placeholder=""
    name=""
    data-field
  >
          
  <‌span>Text similar to placeholder<‌/span>
<‌/label>
        

Use the mixin `@include form-field();` to style form label tag

Text field

Regualar state

Error state

Success state

Disabled state

Readonly state

Select field with default meaning

Regualar state

Error state

Success state

Disabled state

Select field without default meaning

Regualar state

Error state

Success state

Disabled state

Textarea field

Regualar state

Error state

Success state

Disabled state

Readonly state

Checkbox field

Radio field

Components: Simple form example

Login form example:
Lost your password?