/
examples.html
160 lines (134 loc) · 8.71 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
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
157
158
159
160
<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>base</h1>
<p>
<a href="https://github.com/getsedona/sedona-components/tree/master/src/base" target="_blank">документация</a>
<span class="common-base-color-divider">•</span>
<a href="https://github.com/getsedona/sedona-components/blob/master/src/base/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">
<h1>Заголовок первого уровня, который обычно должен быть самым крупным на странице</h1>
</div>
</div>
<div class="grid__item">
<div class="wysiwyg">
<h2>А вот заголовок второго уровня – может быть поменьше, либо равен первому</h2>
</div>
</div>
<div class="grid__item">
<div class="wysiwyg">
<h3>Еще меньше, чем остальные, является заголовок третьего уровня и надо бы написать побольше текста в него</h3>
</div>
</div>
</div>
<div class="grid grid--sidar">
<div class="grid__item">
<div class="wysiwyg">
<p>Обычный параграф текста. Таким размером описан контент всего сайта. Далее идет рандомный текст. Политическая социализация, короче говоря, означает конструктивный субъект власти. Институциализация неоднозначна. Мажоритарная избирательная система неизбежна. Механизм власти практически отражает референдум. В данном случае можно согласиться с Данилевским, считавшим, что либеральная теория представляет собой эмпирический гуманизм, что получило отражение в трудах Михельса. Международная политика, короче говоря, предсказуема.</p>
<p>И второй абзац, чтобы было видно расстояние между первым. Здесь так же не обойтись без рандомного текста не несущего какой-либо смысл. Марксизм ограничивает антропологический референдум. Исходя из данного утверждения, культ личности верифицирует прагматический политический процесс в современной России. Субъект власти интегрирует плюралистический авторитаризм. Как уже отмечалось, глобализация означает коммунизм.</p>
</div>
</div>
<div class="grid__item common-text-large">
<div class="wysiwyg">
<p>Увеличенный размер основного текста. Подойдет для выделения каких-то заявлений, цитат или просто для лида в начале статьи. Далее идет рандомный текст. Политическая социализация, короче говоря, означает конструктивный субъект власти. Институциализация неоднозначна.</p>
<p>И второй абзац, чтобы было видно расстояние между первым. Здесь так же не обойтись без рандомного текста не несущего какой-либо смысл. Марксизм ограничивает антропологический референдум.</p>
</div>
</div>
<div class="grid__item common-text-small">
<div class="wysiwyg">
<p>Завершит всю эту эпопею с размерами – уменьшенный размер текста. Такой размер подойдет для подписей, пометок, уточнений на полях и т. п. Далее идет рандомный текст. Политическая социализация, короче говоря, означает конструктивный субъект власти. Институциализация неоднозначна.</p>
<p>И второй абзац, чтобы было видно расстояние между первым. Здесь так же не обойтись без рандомного текста не несущего какой-либо смысл. Марксизм ограничивает антропологический референдум. Субъект власти интегрирует плюралистический авторитаризм. Как уже отмечалось, глобализация означает коммунизм.</p>
</div>
</div>
<div class="grid__item common-text-small common-text-uppercase">
<div class="wysiwyg">
<p>А это дополнительный стиль для текста, меняющий регистр. Подойдет для любого вида и размера текста. Лучше всего сочетается с уменьшенным текстом. Тут, кстати, межбуквенный интервал увеличен на 7%.</p>
</div>
</div>
</div>
<div class="grid grid--sidar">
<div class="grid__item">
<div class="group">
<div class="group__item">
<span class="common-base-color-secondary">Вторичный цвет текста</span>
</div>
<div class="group__item">
<span class="common-base-color-hint">Цвет текста для подсказок</span>
</div>
<div class="group__item" style="padding-top: calc(1em - 1px); width: 200px;">
<hr>
</div>
</div>
</div>
</div>
<div class="grid grid--sidar">
<div class="grid__item">
<div class="group">
<div class="group__item">
<a href="#">Ссылка</a>
</div>
<div class="group__item">
<a>Активная ссылка</a>
</div>
<div class="group__item">
<a href="tel:+79991234567">8 999 123-45-67</a>
</div>
</div>
</div>
</div>
<div class="grid grid--sidar">
<div class="grid__item">
<div class="group">
<div class="group__item">
<button class="btn" type="button">Базовая кнопка</button>
</div>
<div class="group__item">
<a class="btn" href="#">Ссылка-кнопка</a>
</div>
</div>
</div>
</div>
<div class="grid grid--sidar">
<div class="grid__item">
<div class="group">
<div class="group__item">
<span class="common-success-color-primary">Цвет успеха</span>
</div>
<div class="group__item">
<span class="common-warning-color-primary">Цвет предупреждения</span>
</div>
<div class="group__item">
<span class="common-danger-color-primary">Цвет неудачи</span>
</div>
</div>
</div>
</div>
<div class="grid grid--meskit">
<div class="grid__item">
<div class="common-box-base common-box-shadow-primary common-border-radius-primary" style="height: 100px;"></div>
</div>
<div class="grid__item">
<div class="common-box-light common-box-shadow-primary common-border-radius-primary" style="height: 100px;"></div>
</div>
<div class="grid__item">
<div class="common-box-dark common-box-shadow-primary common-border-radius-primary" style="height: 100px;"></div>
</div>
</div>
</section>
</main>