Typography: Titles on page

Use follow mixins for styles titles:
  • @include title-h1()
  • @include title-h2()
  • @include title-h3()
  • @include title-h4()
  • @include title-h5()
  • @include title-h6()

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: Text and titles for text

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

Use follow mixin for styles text (normal size - 14px):

  • @include text-content()

Use follow mixin for styles text (small size - 12px):

  • @include text-content-sm()
Title 1 for text Title 2 for text Title 3 for text Title 4 for text

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.

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 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

We have 2 type for buttons.
  • Use for button 1 - @include button-transparent();
  • Use for button 2 - @include button();

Button disable - disabled state for button 1 and button 2

Components: Text links

We have 2 type for links.
  • Use for link 1 - @include link-text();
  • Use for link 2 - @include link-sm(); ( Include mixin link-base(12px) - font size = 12px )
  • Use for link 3 - @include link(); ( Include mixin link-base(14px) - font size = 14px )

Components: Forms

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

            < span >
              Text similar to placeholder
            < /span >
          < /label >
        

Use the following mixins to style elements form:

  • @include form-field ();
  • @include form-control-checkbox ();
  • @include form-control-radio ();

*All mixines are called in the '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