MDL-61460 tool_componentlibrary: removed white space.
[moodle.git] / admin / tool / componentlibrary / content / moodle / themes / text.md
1 ---
2 layout: docs
3 title: "Text"
4 description: "Moodle text utility classes"
5 date: 2019-12-10T13:53:41+01:00
6 draft: false
7 ---
9 ## Heading sizes with native heading tags
10 {{< example >}}
11 <h1>h1 heading</h1>
12 <h2>h2 heading</h2>
13 <h3>h3 heading</h3>
14 <h4>h4 heading</h4>
15 <h5>h5 heading</h5>
16 <h6>h6 heading</h6>
17 {{< /example >}}
19 ## Heading sizes with heading classes
21 tip: you can use heading classes to style a native heading tag differently.
23 {{< example >}}
24 <p class="h1">h1 heading</p>
25 <p class="h2">h2 heading</p>
26 <h1 class="h3">h3 heading</h1>
27 <p class="h4">h4 heading</p>
28 <p class="h5">h5 heading</p>
29 <p class="h6">h6 heading</p>
30 {{< /example >}}
32 ## Native text tags
34 {{< example >}}
35 <p>You can use the mark tag to <mark>highlight</mark> text.</p>
36 <p><del>This line of text is meant to be treated as deleted text.</del></p>
37 <p><s>This line of text is meant to be treated as no longer accurate.</s></p>
38 <p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
39 <p><u>This line of text will render as underlined</u></p>
40 <p><small>This line of text is meant to be treated as fine print.</small></p>
41 <p><strong>This line rendered as bold text.</strong></p>
42 <p><em>This line rendered as italicized text.</em></p>
43 {{< /example >}}
45 ## Custom text tags
47 {{< example >}}
48 <p class="text-lowercase">Lowercased text.</p>
49 <p class="text-uppercase">Uppercased text.</p>
50 <p class="font-weight-bold">Bold text.</p>
51 <p class="font-weight-normal">Normal weight text.</p>
52 <p class="font-italic">Italic text.</p>
54 <p class="text-muted">
55     Muted text with a <a href="#" class="text-reset">reset link</a>.
56 </p>
57 {{< /example >}}
59 ## For screenreaders
61 <h2 class="sr-only">Title for screen readers</h2>
62 <a class="sr-only-focusable" href="#content">Skip to main content</a>
64 ## Text truncation
66 <!-- Block level -->
67 <div class="row">
68   <div class="col-2 text-truncate">
69     Praeterea iter est quasdam res quas ex communi.
70   </div>
71 </div>
73 <!-- Inline level -->
74 <span class="d-inline-block text-truncate" style="max-width: 150px;">
75   Praeterea iter est quasdam res quas ex communi.
76 </span>