Default H1 Tag

= codeBlender "heading", "molecule", { text: "Default H1 Tag" }
<h1 class='heading'>
Default H1 Tag

H2 with Secondary Text Secondary small text

= codeBlender "heading", "molecule", { small: "Secondary small text", text: "H2 with Secondary Text", tag: "h2" }
<h2 class='heading'>
H2 with Secondary Text
<small>Secondary small text</small>

H4 Simply change the tag attribute

= codeBlender "heading", "molecule", { small: "Simply change the tag attribute", text:  "H4", tag: "h4" }
<h4 class='heading'>
<small>Simply change the tag attribute</small>

Linked Heading With a Link attached

= codeBlender "heading", "molecule", { href: "#", small: "With a Link attached", text: "Linked Heading", tag: "h2" }
<h2 class='heading'>
<a href="#">Linked Heading</a>
<small>With a Link attached</small>

= codeBlender "heading", "molecule", { pageHeader: true, small: "H1 page header", text: "Page header" }
<div class='page-header'><h1 class='heading'>
Page header
<small>H1 page header</small>

Resources Useful websites and tutorials


Task Date
Get the heading truncation working
Create media queries for the heading truncation
Create micro formats and accessibility for the headings
Complete the ability to use truncation - does not work in media objects at the moment
Allow for an icon to be prepended or appended