Typography: Titles on page
- @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
- @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
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
- @include button();
- @include button-cream();
- @include button-light-blue();
- @include button-inverse();
- @include button-light-almond();
Components: Text links
- 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
<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