/
typographic-base.html
55 lines (52 loc) · 3.43 KB
/
typographic-base.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
---
layout: default-gray
title: typographic base
---
{% include svg-defs.html %}
<section class="cb">
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur architecto in, aliquam explicabo temporibus.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis et iure consequatur <em>deserunt</em> corporis quibusdam maiores nihil a <strong>veniam</strong> molestiae praesentium, illum aliquam <a href="/">exercitationem</a>, odio neque modi laborum dolor vitae?</p>
<h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur architecto in, aliquam explicabo temporibus.</h2>
<p>Lorem <em>ipsum</em> dolor sit amet, consectetur adipisicing elit. Obcaecati possimus quo debitis quod est necessitatibus, cum <a href="/">animi</a> voluptate quas molestiae excepturi repellendus alias ea <strong>similique</strong> ratione labore quibusdam dolor eligendi.</p>
<h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur architecto in, aliquam explicabo temporibus.</h3>
<p>Lorem ipsum dolor sit amet, consectetur <a href="/">adipisicing</a> elit. Nihil odio a architecto <em>voluptates</em> officia voluptatum corrupti laborum autem. Commodi, quia ad esse! Nulla sed minima dolores quam, <stong>perferendis</stong> corporis, minus.</p>
<h4>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur architecto in, aliquam explicabo temporibus.</h4>
<p>Lorem ipsum dolor sit <em>amet</em>, consectetur adipisicing elit. Iusto, quos! Veniam in mollitia unde, consequatur <a href="/">repellendus</a>, impedit <strong>aspernatur</strong> illum pariatur praesentium sit, quis culpa molestiae nesciunt ipsam. Corporis, eius, ipsa.</p>
<h5>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur architecto in, aliquam explicabo temporibus.</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio cum sunt dolorum, veritatis <strong>dicta</strong> a <a href="/">asperiores</a> nemo, magnam quam beatae atque omnis, quidem sed quos reprehenderit perspiciatis fugit <em>dignissimos</em> voluptas!</p>
<h6>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur architecto in, aliquam explicabo temporibus.</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem quo qui neque, aliquam ab est <em>inventore</em> et adipisci perferendis <strong>doloremque</strong> quisquam saepe iste porro <a href="/">maxime</a> officia soluta modi, nulla ipsam?</p>
</section>
<svg class="icon- bubble" width="32" height="32">
<use xlink:href="#bubble" />
</svg>
<svg class="icon-calendar" width="32" height="32">
<use xlink:href="#calendar" />
</svg>
<svg class="icon-diamon" width="32" height="32">
<use xlink:href="#diamond" />
</svg>
<svg class="icon-display" width="32" height="32">
<use xlink:href="#display" />
</svg>
<svg class="icon-megaphone" width="32" height="32">
<use xlink:href="#megaphone" />
</svg>
<svg class="icon-note" width="32" height="32">
<use xlink:href="#note" />
</svg>
<svg class="icon-paperplane" width="32" height="32">
<use xlink:href="#paperplane" />
</svg>
<svg class="icon-pen" width="32" height="32">
<use xlink:href="#pen" />
</svg>
<svg class="icon-star" width="32" height="32">
<use xlink:href="#star" />
</svg>
<svg class="icon-t-shirt" width="32" height="32">
<use xlink:href="#t-shirt" />
</svg>
<svg class="icon-truck" width="32" height="32">
<use xlink:href="#truck" />
</svg>