This style guide will serve as a reusable tool for us to 'sketch out' atoms and molecules (See Brad Frost's Atomic Design) for projects. Please utilize the templated modules below to create your own based on the project you are working on. Any unique modules that aren't already represented should be submitted to the style guide master repo to be included in the examples in the future.
All color names can be used as variables in scss, ie: Merlot would be $merlot. Click a color swatch below to copy it's variable name to your clipboard.
SEO is a marketing tactic that costs five percent of overall budget but brings in more than 20 percent of revenue for many Fortune 500 companies, and yet very few of them prioritize it. Instead, while slowly changing, too many CMOS still favor paid search, which costs 20 percent and brings in… 20 percent. In search, businesses need to shift priorities. Now.
<form class="subscribe" action="">
<input type="email" placeholder="Email address" />
<input type="submit" value="Submit" />
<span class="clearfix"></span>
</form>
Gingerbread bonbon chocolate cake muffin gummies.
<div class="full-width-tab coral-tab">
<h4>Tab One</h4><!--
--><i class="fa fa-globe" aria-hidden="true"></i>
</div>
<div class="full-width-tab description mulberry-tab">
<div class="vcenter left">
<h4>Tab Two</h4>
<p>Gingerbread bonbon chocolate cake muffin gummies.</p>
</div><!--
--><i class="fa fa-bug" aria-hidden="true"></i>
</div>
<div class="full-width-tab gecko-tab">
<h4>Tab Three</h4><!--
--><i class="fa fa-globe" aria-hidden="true"></i>
</div>
<div class="full-width-tab sunflower-tab">
<h4>Tab Four</h4><!--
--><i class="fa fa-bug" aria-hidden="true"></i>
</div>