Newer
Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
{#
/**
* This is strictly an exmaple file to demonstrate markup in Pattern Lab.
* It is not intended to be included in any other component.
*/
#}
<div class="text">
<p class="paragraph"><a class="link" href="#">This is a text link</a></p>
<p class="paragraph"><strong>Strong is used to indicate strong importance</strong></p>
<p class="paragraph"><em>This text has added emphasis</em></p>
<p class="paragraph">The <b>b element</b> is stylistically different text from normal text, without any special importance</p>
<p class="paragraph">The <i>i element</i> is text that is set off from the normal text</p>
<p class="paragraph">The <u>u element</u> is text with an unarticulated, though explicitly rendered, non-textual annotation</p>
<p class="paragraph"><del>This text is deleted</del> and <ins>This text is inserted</ins></p>
<p class="paragraph"><s>This text has a strikethrough</s></p>
<p class="paragraph">Superscript<sup>®</sup></p>
<p class="paragraph">Subscript for things like H<sub>2</sub>O</p>
<p class="paragraph"><small>This text is small for fine print, etc.</small></p>
<p class="paragraph">Abbreviation: <abbr title="HyperText Markup Language">HTML</abbr></p>
<p class="paragraph">Keybord input: <kbd>Cmd</kbd></p>
<p class="paragraph"><q cite="https://developer.mozilla.org/en-US/docs/HTML/Element/q">This text is a short inline quotation</q></p>
<p class="paragraph"><cite>This is a citation</cite></p>
<p class="paragraph">The <dfn>dfn element</dfn> indicates a definition.</p>
<p class="paragraph">The <mark>mark element</mark> indicates a highlight</p>
<p class="paragraph"><code>This is what inline code looks like.</code></p>
<p class="paragraph"><samp>This is sample output from a computer program</samp></p>
<p class="paragraph">The <var>variarble element</var>, such as <var>x</var> = <var>y</var></p>
<p class="paragraph">The span class "pipe" can be used to separate elements such as, Element 1 <span class="pipe"> | </span> Element 2.
</div><!--end .text-->