<h1> to <h6> tags.
<h1>h1 Page Heading</h1> <h2>h2 Page Heading</h2> <h3>h3 Page Heading</h3> <h4>h4 Page Heading</h4> <h5>h5 Page Heading</h5> <h6>h6 Page Heading</h6>
.loud-* classes. Just like traditional headings, but bigger and louder.
.loud-* classes work on any text elements. Please be sure to split semantics and styling only when appropriate.
<span class='loud-1'>.loud-1 Page Heading</span> <span class='loud-2'>.loud-2 Page Heading</span> <span class='loud-3'>.loud-3 Page Heading</span> <span class='loud-4'>.loud-4 Page Heading</span> <span class='loud-5'>.loud-5 Page Heading</span> <span class='loud-6'>.loud-6 Page Heading</span>
<strong></strong>) should be used to convey meaning, such as for screen readers; while modifier (i.e. ._bold) should be used to convey aesthetic.
You can use the mark tag to highlight text.
This line of text is meant to be treated as deleted text.
This line of text is meant to be treated as no longer accurate.
This line of text is meant to be treated as an addition to the document.
This line of text will render as underlined
This line of text is meant to be treated as fine print.
This line of text is as above, but using the .small class
This line rendered as bold text using a strong tag.
This line rendered as bold text using a .font-weight-bold class. This line conveys no meaning
This line rendered as italicized text.
This line rendered as italicized text using a .font-italic class.
</><p>You can use the mark tag to <mark>hightlight</mark> text.</p> <p><del>This line of text is meant to be treated as deleted text.</p> <p><s>This line of text is meant to be treated as no longer accurate.</p> <p><ins>This line of text is meant to be treated as an addition to the document.</p> <p><u>This line of text will render as underlined</p> <p><small>This line of text is meant to be treated as fine print.</small></p> <p class='small'>This line of text is as above, but using the .small class</p> <p><strong>This line rendered as bold text.;</strong></p> <p class='font-weight-bold'>This line rendered as bold text using a .font-weight-bold class. This line conveys no meaning</p> <p><em>This line rendered as italicized text.;</em></p> <p class='font-italic'>This line rendered as italicized text using a .font-italic class.</p>
.text-justify - The class name speaks volumes. Will set the element's text-align property to justify.text-*-left | .text-*-right | .text-*-center - Where the * is replaced with a size class, such as xs, sm, md, lg, xl. The element which uses one of these classes will have their text-align property set to the respective direction while the viewport size is equal to the size definition or wider..text-nowrap - Adding this class will disallow text from wrapping..text-truncate - Will disallow text to continue past the end of their container, and will also not wrap said text. It will truncate the text, placing an ellipsis at the end of the text (...).text-lowercase - Transforms the text in the element to all be lowercase..text-uppercase - Transforms the text in the element to all be uppercase..text-capitalize - Transforms the text in the element to capitalize all first letters of all words..font-weight-normal - Sets the text's font-weight property to the initial font weight..text-hide - Will not hide the text from screen readers, but will allow the adding of a background image. Similar to using an image, then using the .sr-only tag.text-* - Where the * is replaced by any of the available colors. The text will then become said color.For live examples of the above, please reference this page.