Loading...
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
- 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
- Item rte 1
- Item rte 2
- 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();
Examples with using links in the text
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. It is link etiam eu turpis molestie, dictum est a, mattis tellus.
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
Components: Simple form example
Login form example: