Stylesheet

Typography

Headings

The class with the heading element name is useful for keeping semantically correct but appearing like the design

Heading 1 (h1, .h1) Heading 2 (h1, .h2) Heading 3 (h3, .h3) Heading 4 (h4, .h4) Heading 5 (h5, .h5) Heading 6 (h6, .h6)

Other

Small (small, .small) Medium (.medium) Large (.large) Extra Large (.xlarge)

Paragraph (p, .base)

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Fusce tincidunt neque eu dui auctor, ut accumsan paragraph link (p a) quam bibendum. Suspendisse ac risus facilisis dolor dapibus porttitor. Donec ac pharetra dolor, id tempus justo. Vestibulum consequat urna vel euismod mollis. Ut iaculis sed turpis vel cursus. Nunc ut nisi nec quam efficitur commodo a non velit. Morbi sed tempor eros, vitae laoreet nisl. Maecenas vestibulum consequat erat at placerat. Proin quis neque libero. Cras sem erat, molestie nec sagittis at, maximus in diam. Etiam ut laoreet velit, eu bibendum velit. Quisque sit amet dui vitae justo consequat luctus. Integer tellus dolor, efficitur ut volutpat sed, ornare eget lorem. In luctus ullamcorper eros, vel faucibus purus vehicula ac. Aenean sapien odio, luctus a feugiat in, commodo a diam.

WYSIWYG (.wysiwyg)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec maximus consequat wysiwyg paragraph link (.wysiwyg p a) sagittis. Morbi ut semper lorem. Curabitur eleifend lorem lacus, ac consequat ex tempor eget. In nisl quam, tempus lobortis placerat dapibus, congue sit amet orci. Morbi malesuada congue sem eget dapibus. Etiam in ultrices metus. Nullam vel urna commodo dui congue ullamcorper quis non turpis. Suspendisse potenti. Mauris et neque non urna bibendum euismod et tincidunt tortor. Aliquam nisl risus, dictum vel mollis eu, gravida eget dolor.

Unordered list item 1 - wysiwyg unordered list link (.wysiwyg ul a)
Unordered list item 2
Unordered list item 3

Sed consequat enim vitae purus sagittis, a ornare nisl suscipit. Aliquam sodales pellentesque sapien vel consectetur. Mauris tincidunt venenatis nisi, vel rhoncus leo fringilla eu. Vestibulum eu quam dignissim, suscipit arcu et, porttitor enim. Proin tellus enim, varius fermentum elit eu, sodales luctus metus. Curabitur mollis gravida convallis. Suspendisse viverra lorem nibh, non viverra tortor convallis eget. Donec risus risus, varius non turpis molestie, rhoncus pretium massa. Vestibulum eu nisi nunc. Donec porta lectus sit amet ex pharetra blandit vitae ut lorem. Vestibulum ut tempor arcu. Phasellus vestibulum faucibus lacus sit amet elementum.

Curabitur mauris lorem, aliquet in turpis vel, imperdiet ullamcorper enim. Integer tristique congue eros, ac pharetra metus auctor eu. Nam sollicitudin interdum ante, vitae interdum enim tempor at. Morbi efficitur condimentum eros, non malesuada ligula malesuada eget. In vitae lacus odio. Cras a ex dictum, ornare quam interdum, consectetur sapien.

Ordered list item 1 - wysiwyg ordered list link (.wysiwyg ol a)
Ordered list item 2
Ordered list item 3

Links & Buttons

Link (a, button, link.php)

Component isn't necessary, mostly for when hooking up to backend link field with options

Link
Active Link
Small Link (.small)
Medium Link (.medium)
Large Link (.large)
Extra Large Link (.xlarge)
Underlined Link (.link)

Arrow Link (.arrow-link, arrow-link.php)

Component isn't necessary (but suggested as the svg is in there), mostly for when hooking up to backend link field with options

Arrow Link

Button (.button, button.php)

Component isn't necessary, mostly for when hooking up to backend link field with options

Button Hollow Button (.button--hollow)

Images & Videos

Lazy Image (exsite_lazy_image)

Regular Image (exsite_regular_image)

For use if in a slider or was off the page where lazy loading isn't working

Lazy Placeholder Image (exsite_lazy_placeholder_image)

Regular Placeholder Image (exsite_regular_placeholder_image)

For use if in a slider or was off the page where lazy loading isn't working