Introduction | TrueUI

Atoms | Typography

Inline Elements

Examples

This link goes to example.com.

This link turns dark blue when you hover over it.

This link turns charcoal when you click it.

This link turns blue after you click it.

Strong is used to indicate strong importance

This text has added emphasis

The b element is stylistically different text from normal text, without any special importance

The i element is text that is set off from the normal text

The u element is text with an unarticulated, though explicitly rendered, non-textual annotation

This text is deleted and This text is inserted

This text has a strikethrough

Superscript®

Subscript for things like H20

This small text is small for fine print, etc.

Abbreviation: HTML

Keybord input: Cmd

This text is a short inline quotation

This is a citation

The dfn element indicates a definition.

The mark element indicates a highlight

This is what inline code looks like.

This is sample output from a computer program

The variable element, such as x = y

HTML

<p><a href="#" class="blue">This link goes to |example.com.</a></p>
<p><a href="#" class="blue-dark">This link |turns dark blue when you hover over it.</a></p>
<p><a href="#" class="charcoal">This link |turns charcoal when you click it.</a></p>
<p><a href="#" class="blue">This link turns |blue after you click it.</a></p>
<p><strong>Strong is used to indicate strong importance</strong></p>
<p class="i">This text has added emphasis</p>
<p>The <b>b element </b>is stylistically different text from normal text, without any special importance</p>
<p>The <i>i element </i>is text that is set off from the normal text</p>
<p>The <u>u element </u>is text with an unarticulated, though explicitly rendered, non-textual annotation</p>
<p><del>This text is deleted </del> and <ins>This text is inserted</ins></p>
<p><s>This text has a strikethrough</s></p>
<p>Superscript<sup>®</sup></p>
<p>Subscript for things like H<sub>2</sub>0</p>
<p><small>This small text is small for fine print, etc.</small></p>
<p>Abbreviation: <abbr title="Hypertext Markup Language">HTML</abbr></p>
<p>Keybord input: <kbd>Cmd</kbd></p>
<p><q cite="http://trueaccord.com">This text is a short inline quotation</q></p>
<p><cite>This is a citation</cite></p>
<p>The<dfn>dfn element </dfn>indicates a definition.</p>
<p>The <mark>mark element </mark>indicates a highlight</p>
<p> <code>This is what inline code looks like.</code></p>
<p><samp>This is sample output from a computer program</samp></p>
<p>The <var>variable element</var>, such as <var>x </var>= <var>y</var></p>