-
Notifications
You must be signed in to change notification settings - Fork 1
/
typography.html
119 lines (115 loc) · 7.34 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
<!DOCTYPE HTML>
<html>
<head>
<title>Style Guide - Typography</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<link rel="stylesheet" href="assets/css/main.css" />
<link rel="stylesheet" href="assets/plugins/prism.css" />
</head>
<body>
<div class="container-1032">
<div class="mb-32">
<h1 class="mb-8">Typography</h1>
<p class="mb-8">Typography plays a huge part in determining how a design feels.</p>
</div>
<!-- Semantic Headings -->
<div class="mb-32">
<h2 class="mb-24">1. Semantic Headings</h2>
<h6 class="grey-clr-txt mb-8"><span class="hlp-txt-16 dark-grey-clr-txt mr-24">16px</span>h6. Semantic Header</h6>
<h5 class="grey-clr-txt mb-8"><span class="hlp-txt-16 dark-grey-clr-txt mr-24">20px</span>h5. Semantic Header</h5>
<h4 class="grey-clr-txt mb-8"><span class="hlp-txt-16 dark-grey-clr-txt mr-24">24px</span>h4. Semantic Header</h4>
<h3 class="grey-clr-txt mb-8"><span class="hlp-txt-16 dark-grey-clr-txt mr-24">28px</span>h3. Semantic Header</h3>
<h2 class="grey-clr-txt mb-8"><span class="hlp-txt-16 dark-grey-clr-txt mr-24">32px</span>h2. Semantic Header</h2>
<h1 class="grey-clr-txt mb-8"><span class="hlp-txt-16 dark-grey-clr-txt mr-24">40px</span>h1. Semantic Header</h1>
</div>
<figure class="mb-32">
<pre class="mb-32">
<code class="language-html">
<h6> h6. Semantic Header </h6>
<h5> h5. Semantic Header </h5>
<h4> h4. Semantic Header </h4>
<h3> h3. Semantic Header </h3>
<h2> h2. Semantic Header </h2>
<h1> h1. Semantic Header </h1>
</code>
</pre>
</figure>
<!-- Customized Headings -->
<div class="mb-32">
<h2 class="mb-24">2. Customized Headings</h2>
<h1 class="grey-clr-txt header-48 mb-8"><span class="hlp-txt-16 dark-grey-clr-txt mr-24">48px</span>h1. Customized Header</h1>
<h1 class="grey-clr-txt header-56 mb-8"><span class="hlp-txt-16 dark-grey-clr-txt mr-24">56px</span>h1. Customized Header</h1>
<h1 class="grey-clr-txt header-64 mb-8"><span class="hlp-txt-16 dark-grey-clr-txt mr-24">64px</span>h1. Customized Header</h1>
<h1 class="grey-clr-txt header-72 mb-8"><span class="hlp-txt-16 dark-grey-clr-txt mr-24">72px</span>h1. Customized Header</h1>
</div>
<figure class="mb-32">
<pre class="mb-32">
<code class="language-html">
<h1 class="header-48"> h1. Customized Header </h1>
<h1 class="header-56"> h1. Customized Header </h1>
<h1 class="header-64"> h1. Customized Header </h1>
<h1 class="header-72"> h1. Customized Header </h1>
</code>
</pre>
</figure>
<!-- Various Contents -->
<div class="mb-32">
<h2 class="mb-24">3. Various Contents</h2>
<p class="text-12 mb-8"><span class="hlp-txt-16 heavy-weight dark-grey-clr-txt mr-24">12px</span>p. Here’s an content example.</p>
<p class="text-14 mb-8"><span class="hlp-txt-16 heavy-weight dark-grey-clr-txt mr-24">14px</span>p. Here’s an content example.</p>
<p class="text-16 mb-8"><span class="hlp-txt-16 heavy-weight dark-grey-clr-txt mr-24">16px</span>p. Here’s an content example.</p>
<p class="text-18 mb-8"><span class="hlp-txt-16 heavy-weight dark-grey-clr-txt mr-24">18px</span>p. Here’s an content example.</p>
<p class="text-20 mb-8"><span class="hlp-txt-16 heavy-weight dark-grey-clr-txt mr-24">20px</span>p. Here’s an content example.</p>
<p class="text-24 mb-8"><span class="hlp-txt-16 heavy-weight dark-grey-clr-txt mr-24">24px</span>p. Here’s an content example.</p>
<p class="text-30 mb-8"><span class="hlp-txt-16 heavy-weight dark-grey-clr-txt mr-24">30px</span>p. Here’s an content example.</p>
<p class="text-36 mb-8"><span class="hlp-txt-16 heavy-weight dark-grey-clr-txt mr-24">36px</span>p. Here’s an content example.</p>
<p class="text-48 mb-8"><span class="hlp-txt-16 heavy-weight dark-grey-clr-txt mr-24">48px</span>p. Here’s an content example.</p>
<p class="text-60 mb-8"><span class="hlp-txt-16 heavy-weight dark-grey-clr-txt mr-24">60px</span>p. Here’s an content example.</p>
<p class="text-72 mb-8"><span class="hlp-txt-16 heavy-weight dark-grey-clr-txt mr-24">72px</span>p. Here’s an content example.</p>
</div>
<figure class="mb-32">
<pre class="mb-32">
<code class="language-html">
<p class="text-12"> p. Here’s an content example. </p>
<p class="text-14"> p. Here’s an content example. </p>
<p class="text-16"> p. Here’s an content example. </p>
<p class="text-18"> p. Here’s an content example. </p>
<p class="text-20"> p. Here’s an content example. </p>
<p class="text-24"> p. Here’s an content example. </p>
<p class="text-30"> p. Here’s an content example. </p>
<p class="text-36"> p. Here’s an content example. </p>
<p class="text-48"> p. Here’s an content example. </p>
<p class="text-60"> p. Here’s an content example. </p>
<p class="text-72"> p. Here’s an content example. </p>
</code>
</pre>
</figure>
<!-- Help Texts -->
<div class="mb-32">
<h2 class="mb-24">4. Help Texts</h2>
<p class="text-12 mb-8"><span class="hlp-txt-16 heavy-weight dark-grey-clr-txt mr-24">10px</span><span class="hlp-txt-10">span. Here’s an help text example.</span></p>
<p class="text-12 mb-8"><span class="hlp-txt-16 heavy-weight dark-grey-clr-txt mr-24">12px</span><span class="hlp-txt-12">span. Here’s an help text example.</span></p>
<p class="text-12 mb-8"><span class="hlp-txt-16 heavy-weight dark-grey-clr-txt mr-24">14px</span><span class="hlp-txt-14">span. Here’s an help text example.</span></p>
<p class="text-12 mb-8"><span class="hlp-txt-16 heavy-weight dark-grey-clr-txt mr-24">16px</span><span class="hlp-txt-16">span. Here’s an help text example.</span></p>
<p class="text-12 mb-8"><span class="hlp-txt-16 heavy-weight dark-grey-clr-txt mr-24">18px</span><span class="hlp-txt-18">span. Here’s an help text example.</span></p>
<p class="text-12 mb-8"><span class="hlp-txt-16 heavy-weight dark-grey-clr-txt mr-24">20px</span><span class="hlp-txt-20">span. Here’s an help text example.</span></p>
</div>
<figure class="mb-32">
<pre class="mb-32">
<code class="language-html">
<span class="hlp-txt-10"> span. Here’s an help text example. </span>
<span class="hlp-txt-12"> span. Here’s an help text example. </span>
<span class="hlp-txt-14"> span. Here’s an help text example. </span>
<span class="hlp-txt-16"> span. Here’s an help text example. </span>
<span class="hlp-txt-18"> span. Here’s an help text example. </span>
<span class="hlp-txt-20"> span. Here’s an help text example. </span>
</code>
</pre>
</figure>
</div>
<script src="assets/plugins/prism.js"></script>
</body>
</html>