/
examples.html
71 lines (64 loc) · 4.29 KB
/
examples.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
<main class="main">
<section class="scene">
<div class="grid grid--sidar">
<div class="grid__item">
<div class="wysiwyg">
<p>
<a href="index.html">
<span class="icon"><svg viewBox="0 0 24 24" width="24" height="24" stroke-width="0"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg></span>
На главную
</a>
</p>
<h1>icon</h1>
<p>
<a href="https://github.com/getsedona/sedona-components/tree/master/src/icon" target="_blank">документация</a>
<span class="common-base-color-divider">•</span>
<a href="https://github.com/getsedona/sedona-components/blob/master/src/icon/examples.html" target="_blank">разметка</a>
</p>
</div>
</div>
</div>
</section>
<section class="scene">
<div class="grid grid--sidar">
<div class="grid__item">
<div class="wysiwyg">
<p>Вход в парижское метро виден издалека: чаще всего это красивая красная табличка на старинном фонаре. Более современный вариант — большая желтая буква
<span class="icon"><svg viewBox="0 0 24 24" width="24" height="24" stroke-width="0"><path d="M12 2c-4.42 0-8 .5-8 4v9.5C4 17.43 5.57 19 7.5 19L6 20.5v.5h12v-.5L16.5 19c1.93 0 3.5-1.57 3.5-3.5V6c0-3.5-3.58-4-8-4zM7.5 17c-.83 0-1.5-.67-1.5-1.5S6.67 14 7.5 14s1.5.67 1.5 1.5S8.33 17 7.5 17zm3.5-6H6V6h5v5zm5.5 6c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm1.5-6h-5V6h5v5z"/></svg></span>
в железном круге.</p>
<p>Самые оригинальные вывески метро, впрочем, нужно искать на входных павильонах в стиле ар-нуво, созданных архитектором Эктором
<a href="#">
<span class="icon"><svg viewBox="0 0 24 24" width="24" height="24" stroke-width="0"><path d="M21 18v1c0 1.1-.9 2-2 2H5c-1.11 0-2-.9-2-2V5c0-1.1.89-2 2-2h14c1.1 0 2 .9 2 2v1h-9c-1.11 0-2 .9-2 2v8c0 1.1.89 2 2 2h9zm-9-2h10V8H12v8zm4-2.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5z"/></svg></span>
Кошелек
</a>
Гимаром в начале XX века. Такие сохранились, к примеру на станциях Abbesses, Porte Dauphine, Tuileries
<a href="#" aria-label="Портфель">
<span class="icon"><svg viewBox="0 0 24 24" width="24" height="24" stroke-width="0"><path d="M20 6h-4V4c0-1.11-.89-2-2-2h-4c-1.11 0-2 .89-2 2v2H4c-1.11 0-1.99.89-1.99 2L2 19c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2zm-6 0h-4V4h4v2z"/></svg></span>
</a>
и Palais Royal — Musée du Louvre.</p>
</div>
</div>
<div class="grid__item">
<div class="group">
<div class="group__item">
<button class="btn" type="button">
<span class="icon"><svg viewBox="0 0 24 24" width="24" height="24" stroke-width="0"><path d="M20 4H4c-1.11 0-1.99.89-1.99 2L2 18c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V6c0-1.11-.89-2-2-2zm0 14H4v-6h16v6zm0-10H4V6h16v2z"/></svg></span>
Оплатить
</button>
</div>
<div class="group__item">
<a href="#" class="btn">
Пропустить
<span class="icon"><svg viewBox="0 0 24 24" width="24" height="24" stroke-width="0"><path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"/></svg></span>
</a>
</div>
<div class="group__item">
<button class="btn" type="button" aria-label="Обновить" style="padding-right: 0; padding-left: 0;">
<span class="icon"><svg viewBox="0 0 24 24" width="24" height="24" stroke-width="0"><path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/></svg></span>
</button>
</div>
</div>
</div>
</div>
</section>
</main>