= codeBlender "heading", "molecule", { text: "Default H1 Tag" }
<h1 class='heading'>
Default H1 Tag
</h1>
= 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>
</h2>
= codeBlender "heading", "molecule", { small: "Simply change the tag attribute", text: "H4", tag: "h4" }
<h4 class='heading'>
H4
<small>Simply change the tag attribute</small>
</h4>
= 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>
</h2>
= 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>
</h1>
</div>
| Title | URL |
|---|---|
| Bootstrap heading | http://getbootstrap.com/css/#type-headings |
| Bootstrap page header | http://getbootstrap.com/components/#page-header |
| Accessibility | https://www.w3.org/WAI/tutorials/page-structure/headings/ |
| Usability | http://meetcontent.com/blog/introducing-content-page-titles-headings/ |
| 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 |