blob: cbb9700318c828570e708bdc405528f142a12dc9 (
plain) (
blame)
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
50
51
52
|
extends ../_layout/_docs-layout.pug
block variables
- var slug = 'text'
- var parent = 'utilities'
- var title = 'Text utilities - Utilities - Spectre.css CSS Framework'
- var description = 'Text utilities are used for text alignment, styles and overflow things. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.'
block docs-content
+docs-heading('text', 'Text utilities')
include ../_layout/_ad-g.pug
p Text utilities are used for text alignment, styles and overflow things.
pre.code(data-lang='HTML')
code
:highlight(lang="html")
<!-- left-aligned text -->
<div class="text-left"></div>
<!-- center-aligned text -->
<div class="text-center"></div>
<!-- right-aligned text -->
<div class="text-right"></div>
<!-- justified text -->
<div class="text-justify"></div>
<!-- Lowercased text -->
<div class="text-lowercase"></div>
<!-- Uppercased text -->
<div class="text-uppercase"></div>
<!-- Capitalized text -->
<div class="text-capitalize"></div>
<!-- Normal weight text -->
<div class="text-normal"></div>
<!-- Bold text -->
<div class="text-bold"></div>
<!-- Italicized text -->
<div class="text-italic"></div>
<!-- Larger text (120%) -->
<div class="text-large"></div>
<!-- Overflow behavior: display an ellipsis to represent clipped text -->
<div class="text-ellipsis"></div>
<!-- Overflow behavior: truncate the text -->
<div class="text-clip"></div>
<!-- Text may be broken at arbitrary points -->
<div class="text-break"></div>
include ../_layout/_ad-c.pug
include ../_layout/_footer.pug
|
