Typography: Titles on page
- @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
- @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()
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
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
- 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
- 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 )
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.
-
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-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