forked from priyankawtm/adminiotemplate
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathui_typography.php
More file actions
151 lines (151 loc) · 7.06 KB
/
ui_typography.php
File metadata and controls
151 lines (151 loc) · 7.06 KB
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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
<?php include './header.php'; ?>
<main class="content">
<div class="container-fluid p-0">
<h1 class="h3 mb-3">Typography</h1>
<div class="row">
<div class="col-12 col-lg-6">
<div class="card">
<div class="card-header">
<h5 class="card-title">Headings</h5>
<h6 class="card-subtitle text-muted">All HTML headings, <code><h1></code> through <code><h6></code>, are
available.
</h6>
</div>
<div class="card-body">
<h1>This is a heading h1</h1>
<p class="text-muted">Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet
adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et
ante tincidunt tempus. Donec vitae sapien ut libero.
</p>
<h2>This is a heading h2</h2>
<p class="text-muted">Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet
adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.
</p>
<h3>This is a heading h3</h3>
<p class="text-muted">Etiam rhoncus. Maecenas tempus, tellus condimentum rhoncus, sem quam libero, sit amet adipiscing sem
neque sed ipsum. Nam quam nunc, vel.
</p>
<h4>This is a heading h4</h4>
<p class="text-muted">Etiam rhoncus. Maecenas tempus, tellus condimentum rhoncus, sem quam libero, sit amet adipiscing sem
neque sed ipsum. Nam quam nunc, vel.
</p>
<h5>This is a heading h5</h5>
<p class="text-muted">Sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel.</p>
<h6>This is a heading h6</h6>
<p class="text-muted">Sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel.</p>
</div>
</div>
<div class="card">
<div class="card-header">
<h5 class="card-title">Coloured text</h5>
<h6 class="card-subtitle text-muted">Contextual text classes.</h6>
</div>
<div class="card-body">
<p class="text-primary">This line of text contains the text-primary class.</p>
<p class="text-secondary">This line of text contains the text-secondary class.</p>
<p class="text-success">This line of text contains the text-success class.</p>
<p class="text-danger">This line of text contains the text-danger class.</p>
<p class="text-warning">This line of text contains the text-warning class.</p>
<p class="text-info">This line of text contains the text-info class.</p>
</div>
</div>
</div>
<div class="col-12 col-lg-6">
<div class="card">
<div class="card-header">
<h5 class="card-title">Inline text</h5>
<h6 class="card-subtitle text-muted">Styling for common inline HTML5 elements.</h6>
</div>
<div class="card-body">
<p>You can use the mark-tag to <mark>highlight</mark> text.</p>
<p><del>This line of text can be treated as deleted text.</del></p>
<p><ins>This line of text can be treated as an addition to the document.</ins></p>
<p><strong>Bold text using the strong-tag</strong></p>
<p><em>Italicized text using the em-tag</em></p>
</div>
</div>
<div class="card">
<div class="card-header">
<h5 class="card-title">Blockquotes</h5>
<h6 class="card-subtitle text-muted">For quoting blocks of content from another source within your document.</h6>
</div>
<div class="card-body">
<blockquote>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere
erat a ante.
</p>
<footer>
Someone famous in <cite title="Source Title">Source Title</cite>
</footer>
</blockquote>
<p class="text-muted m-b-15 m-t-20 font-13">
Add <code>.blockquote-reverse</code>
for a blockquote with right-aligned content.
</p>
<blockquote class="blockquote-reverse m-b-0">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere
erat a ante.
</p>
<footer>
Someone famous in <cite title="Source Title">Source Title</cite>
</footer>
</blockquote>
</div>
</div>
<div class="card">
<div class="card-header">
<h5 class="card-title">List unordered</h5>
<h6 class="card-subtitle text-muted">The unordered list items will are marked with bullets.</h6>
</div>
<div class="card-body">
<ul>
<li>
Lorem ipsum dolor sit amet
</li>
<li>
Consectetur adipiscing elit
</li>
<li>
Nulla volutpat aliquam velit
</li>
<li>
Phasellus iaculis neque
</li>
<li>
Eget porttitor lorem
</li>
</ul>
</div>
</div>
<div class="card">
<div class="card-header">
<h5 class="card-title">List ordered</h5>
<h6 class="card-subtitle text-muted">The ordered list items will are marked with numbers.</h6>
</div>
<div class="card-body">
<ol>
<li>
Lorem ipsum dolor sit amet
</li>
<li>
Consectetur adipiscing elit
</li>
<li>
Nulla volutpat aliquam velit
</li>
<li>
Phasellus iaculis neque
</li>
<li>
Eget porttitor lorem
</li>
</ol>
</div>
</div>
</div>
</div>
</div>
</main>
<?php include './footer.php'; ?>
