2 - Headings
A majority of headings in the site are built from the same placeholder: @extend %generic-heading
2.1 - Primary Headings
A majority of headings in the site are built from the same base class.
.primary-heading-icon can be a img or div, ex. <div class="primary-heading-icon primary-icon-folder" role="presentation"></div>
Primary Heading
<h1 class="primary-heading{$modifiers}">
<div class="primary-heading-icon primary-icon-folder" role="presentation"></div>
<span class="primary-heading-content" id="aria-category-heading">Primary Heading</span>
</h1>-success
Makes the heading background green indicating a success
Primary Heading
-error
Makes the heading background red indicating an error
Primary Heading
2.2 - Hanging Primary Headings
These hang off the left edge of the site wrapper and look like they wrap behind the wrapper.
.primary-heading-icon can be a img or div, ex. <div class="primary-heading-icon primary-icon-folder" role="presentation"></div>
Primary Heading Hanging
<h1 class="primary-heading-hanging{$modifiers}">
<div class="primary-heading-icon primary-icon-folder" role="presentation"></div>
<span class="primary-heading-content" id="aria-category-heading">Primary Heading Hanging</span>
</h1>-success
Makes the heading background green indicating a success
Primary Heading Hanging
-error
Makes the heading background red indicating an error
Primary Heading Hanging
2.3 - Secondary Headings
Headings used in sidebar blocks
.secondary-heading-icon can be a img or div, ex. <div class="primary-heading-icon primary-icon-folder" role="presentation"></div>
Secondary Heading
<h1 class="secondary-heading">
<div class="secondary-heading-icon secondary-icon-envelope" role="presentation"></div>
<span class="secondary-heading-content" id="aria-category-heading">Secondary Heading</span>
</h1>