Headings


.heading-1

.heading-2

.heading-3

.heading-4

.heading-5




Body Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam varius nibh vel erat semper, et finibus urna commodo. Duis convallis odio nec nisl egestas, eget pellentesque lorem varius. Nunc vel lacus urna. Curabitur nec leo enim. Nunc tristique mollis ipsum nec ullamcorper. Phasellus lorem ipsum, ornare eget tortor eget, rutrum gravida risus.





.small

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam varius nibh vel erat semper, et finibus urna commodo. Duis convallis odio nec nisl egestas, eget pellentesque lorem varius. Nunc vel lacus urna. Curabitur nec leo enim. Nunc tristique mollis ipsum nec ullamcorper. Phasellus lorem ipsum, ornare eget tortor eget, rutrum gravida risus.





Label Tag





.cta

CTA



.cta & .small

Small CTA



.text-input

VALUE:

PLACEHOLDER:



.select in a .select-wrapper





type="checkbox" in a .checkbox-wrapper





.input-quanity and btn-dec & btn-inc in a .quantity-selector-wrapper





.btn .btn--primary



.btn .btn--primary disabled



.btn .btn--secondary



.btn .btn--secondary disabled



.btn .btn--tertiary



.btn .btn--tertiary disabled



.btn .btn--quaternary



.btn .btn--quaternary disabled



.btn .btn--outline



.btn .btn--outline disabled



.alert-success

.alert-info

.alert-error



Animations

data-anim class="anim-fade-in"
data-anim class="anim-fade-in anim-delay anim-delay-333"
data-anim class="anim-fade-in anim-delay anim-delay-666"
data-anim class="anim-slide-in-left"
data-anim class="anim-slide-in-left anim-delay anim-delay-333"
data-anim class="anim-slide-in-left anim-delay anim-delay-666"