-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtypography.html
156 lines (156 loc) · 6.01 KB
/
typography.html
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
152
153
154
155
156
{% extends 'layouts/base.html' %}
{% load static %}
{% block content %}
<div class="content">
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="card-header mb-5">
<h5 class="card-category">Black Table Heading</h5>
<h3 class="card-title">Created using Poppins Font Family</h3>
</div>
<div class="card-body">
<div class="typography-line">
<h1><span>Header 1</span>The Life of Black Dashboard </h1>
</div>
<div class="typography-line">
<h2><span>Header 2</span>The Life of Black Dashboard </h2>
</div>
<div class="typography-line">
<h3><span>Header 3</span>The Life of Black Dashboard </h3>
</div>
<div class="typography-line">
<h4><span>Header 4</span>The Life of Black Dashboard </h4>
</div>
<div class="typography-line">
<h5><span>Header 5</span>The Life of Black Dashboard </h5>
</div>
<div class="typography-line">
<h6><span>Header 6</span>The Life of Black Dashboard </h6>
</div>
<div class="typography-line">
<p><span>Paragraph</span>
I will be the leader of a company that ends up being worth billions of dollars, because I got the answers.
I understand culture. I am the nucleus. I think that’s a responsibility that I have, to push
possibilities, to show people, this is the level that things could be at.
</p>
</div>
<div class="typography-line">
<span>Quote</span>
<blockquote>
<p class="blockquote blockquote-primary">
"I will be the leader of a company that ends up being worth billions of dollars, because I got the
answers. I understand culture. I am the nucleus. I think that’s a responsibility that I have, to push
possibilities, to show people, this is the level that things could be at."
<br>
<br>
<small>
- Noaa
</small>
</p>
</blockquote>
</div>
<div class="typography-line">
<span>Muted Text</span>
<p class="text-muted">
I will be the leader of a company that ends up being worth billions of dollars, because I got the
answers...
</p>
</div>
<div class="typography-line">
<span>Primary Text</span>
<p class="text-primary">
I will be the leader of a company that ends up being worth billions of dollars, because I got the
answers...</p>
</div>
<div class="typography-line">
<span>Info Text</span>
<p class="text-info">
I will be the leader of a company that ends up being worth billions of dollars, because I got the
answers... </p>
</div>
<div class="typography-line">
<span>Success Text</span>
<p class="text-success">
I will be the leader of a company that ends up being worth billions of dollars, because I got the
answers... </p>
</div>
<div class="typography-line">
<span>Warning Text</span>
<p class="text-warning">
I will be the leader of a company that ends up being worth billions of dollars, because I got the
answers...
</p>
</div>
<div class="typography-line">
<span>Danger Text</span>
<p class="text-danger">
I will be the leader of a company that ends up being worth billions of dollars, because I got the
answers... </p>
</div>
<div class="typography-line">
<h2><span>Small Tag</span>
Header with small subtitle <br>
<small>Use "small" tag for the headers</small>
</h2>
</div>
<div class="typography-line">
<span>Lists</span>
<div class="row">
<div class="col-md-3">
<h5>Unordered List</h5>
<ul>
<li>List Item</li>
<li>List Item</li>
<li class="list-unstyled">
<ul>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
</ul>
</li>
<li>List Item</li>
</ul>
</div>
<div class="col-md-3">
<h5>Ordered List</h5>
<ol>
<li>List Item</li>
<li>List Item</li>
<li>List item</li>
<li>List Item</li>
</ol>
</div>
<div class="col-md-3">
<h5>Unstyled List</h5>
<ul class="list-unstyled">
<li>List Item</li>
<li>List Item</li>
<li>List item</li>
<li>List Item</li>
</ul>
</div>
<div class="col-md-3">
<h5>Inline List</h5>
<ul class="list-inline">
<li class="list-inline-item">List1</li>
<li class="list-inline-item">List2</li>
<li class="list-inline-item">List3</li>
</ul>
</div>
</div>
</div>
<div class="typography-line">
<span>Code</span>
<p>This is
<code>.css-class-as-code</code>, an example of an inline code element. Wrap inline code within a
<code> <code>...</code></code>tag.
</p>
<pre>1. #This is an example of preformatted text.<br/>2. #Here is another line of code</pre>
</div>
</div>
</div>
</div>
</div>
</div>
{% endblock content %}