CSS Class Cheat Sheet .
16+ years of innovative partnership.
| element/class | example |
|---|---|
| h1 | Lorem ipsum dolor sit |
| h1.md | Lorem ipsum dolor sit |
| h2 | Lorem ipsum dolor sit |
| h2.lg | Lorem ipsum dolor sit |
| h2.md | Lorem ipsum dolor sit |
| h2.sm | Lorem ipsum dolor sit |
| h3 | Lorem ipsum dolor sit |
| .blue-h | Lorem ipsum dolor sit |
| a.cta | Lorem ipsum |
| a.cta.blue | Lorem ipsum |
| a.btn | Lorem ipsum |
| a.btn-2 | Lorem ipsum |
| a.read-more | Lorem ipsum |
| p | Lorem ipsum dolor sit amet, consectetur adipisicing 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. |
| p.md | Lorem ipsum dolor sit amet, consectetur adipisicing 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. |
| p.lg | Lorem ipsum dolor sit amet, consectetur adipisicing 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. |
| .w-1100 | Makes the width of the section 1100px. Lorem ipsum dolor sit amet, consectetur adipisicing 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. |
| .w-1000 | Makes the width of the section 1000px. Lorem ipsum dolor sit amet, consectetur adipisicing 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. |
| .w-768 | I wonder what this one does! Lorem ipsum dolor sit amet, consectetur adipisicing 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. |
| .fadein-elem |
This is an element that fades in
|
| .fadein-elem.fade-left |
This is an element that fades in from the left
|
| .fadein-elem.fade-right |
This is an element that fades in from the right
|
| .fadein-elem.delay-fade-1 – .delay-fade-3 |
increases fade delay by .125s incrementally
|
Shortcodes
[case_studies ids=”1,2,3,4″]
Shows case study posts. Default shows most recent. Optionally you can add case study posts by their IDs, separated by a comma. If adding IDs it’s recommended to add them in multiples of 4 because of the way they’re laid out on the page
[partners]
Shows the Partners section seen on the homepage! Takes no args.
We are the
company we keep
[card_group]
Shows group of 4 cards, whose content is populated from the home page. Takes no args.
-
Brand & Organization
We want to begin by building on a solid foundation. With a holistic approach, we’ll carefully review your assets and goals.
Read More -
Design & Development
With 15+ years in web design, we understand how design and technology create gorgeous and intuitive user experiences—it’s one of our superpowers.
Read More -
Digital Marketing & Advertising
Running a business takes constant effort, lean on a full-service agency ready to take on any marketing initiative.
Read More -
Conversion Rate Optimization
Advertising dollars are an investment—one that you want to see a return on. We’re here to help you get the most juice out of the squeeze.
Read More
Gutenberg block classes
Image, with .feature-caption
Image, with .img-float-full-right
List, with links and .cta-list
Columns, with .intro-columns
Generally used at the top of the page/post, in conjunction with the header set with an info-card. The card hangs down on the left and this class spaces things to fit well with that. Example:
Look at how far over this goes! Lorem ipsum dolor sit amet, consectetur adipisicing 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.