<div class="section-heading red">
<i class="icon icon-brand icon-aaa">
<svg><use xlink:href="img/spritemap.svg#aaa-logo"></use><svg>
</i>
<h2>Header Style Four</h2>
<!-- Do not implement this link -->
<a href="/inc/modules/?module=general-titles" class="module-link">
<i class="icon info-icon">i</i>
<span class="tool-tip">General Titles</span>
</a>
<!-- Do not implement this link -->
</div><div class="section-heading red">
<i class="icon icon-brand icon-aaa">
<svg><use xlink:href="img/spritemap.svg#aaa-logo"></use><svg>
</i>
<h2>Header Style Four</h2>
<a href="#">
<span class="text">
Link To Explore
</span>
<i class="icon icon-arrow">
<svg><use xlink:href="img/spritemap.svg#icon-arrow-circle"></use><svg>
</i>
</a>
<!-- Do not implement this link -->
<a href="/inc/modules/?module=general-titles" class="module-link">
<i class="icon info-icon">i</i>
<span class="tool-tip">General Titles</span>
</a>
<!-- Do not implement this link -->
</div>Four variants are available for title bars. Each is used to indicate where in the four branches of the site you are. They are availble to use with supportive links.
To change the headings background color and icon color, place the color (red, blue, green or gold) as a class on the .section-heading element. To include a link, no modifiers are necessary. Simply include the link markup in the example.