-
Notifications
You must be signed in to change notification settings - Fork 22
/
Copy pathpage-labels.html
154 lines (98 loc) · 3.29 KB
/
page-labels.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
---
layout: default
title: Labels
permalink: /labels/
is_searchable: true
---
<section class="sui-row-with-sidenav">
<!-- Side Navigation -->
<div class="sui-sidenav">
<ul class="sui-vertical-tabs">
<li class="sui-vertical-tab current">
<a href="#" role="button" data-tab="preview">Preview</a>
</li>
<li class="sui-vertical-tab">
<a href="#" role="button" data-tab="documentation">Dcoumentation</a>
</li>
</ul>
</div>
<!-- SECTION: Preview. -->
<div class="sui-box" data-tab="preview">
<div class="sui-box-header">
<h2 class="sui-box-title">Preview</h2>
</div>
<div class="sui-box-body">
<p>Labels styles can get applied using <code>sui-label</code> class but it's better to use them with form fields.</p>
<div class="sui-box-settings-row">
<div class="sui-box-settings-col-1">
<h3 class="sui-settings-label">Default</h3>
</div>
<div class="sui-box-settings-col-2">
<div class="sui-form-field sui-input-md">
<label for="default-sample" id="default-sample-label" class="sui-label">Label Sample</label>
<input id="default-sample" class="sui-form-control" aria-labelledby="default-sample-label" />
</div>
<div class="demo-code-block">
<pre class="sui-code-snippet sui-no-copy html">
<label class="sui-label">Label</label>
</pre>
</div>
</div>
</div>
<div class="sui-box-settings-row">
<div class="sui-box-settings-col-1">
<h3 class="sui-settings-label">Helper Link</h3>
</div>
<div class="sui-box-settings-col-2">
<div class="sui-form-field sui-input-md">
<label for="link-sample" id="link-sample-label" class="sui-label">Label Sample <a href="#" class="sui-label-link">with helper link</a></label>
<input id="link-sample" class="sui-form-control" aria-labelledby="link-sample-label" />
</div>
<div class="demo-code-block">
<pre class="sui-code-snippet sui-no-copy html">
<label class="sui-label">
Label
<a href="#" class="sui-label-link">Side link</a>
</label>
</pre>
</div>
</div>
</div>
<div class="sui-box-settings-row">
<div class="sui-box-settings-col-1">
<h3 class="sui-settings-label">Side Note</h3>
</div>
<div class="sui-box-settings-col-2">
<div class="sui-form-field sui-input-md">
<label for="note-sample" id="note-sample-label" class="sui-label">Label Sample <span class="sui-label-note">with side note</span></label>
<input id="note-sample" class="sui-form-control" aria-labelledby="note-sample-label" />
</div>
<div class="demo-code-block">
<pre class="sui-code-snippet sui-no-copy html">
<label class="sui-label">
Label
<span class="sui-label-note">Side note</span>
</label>
</pre>
</div>
</div>
</div>
</div>
</div>
<!-- SECTION: Documentation. -->
<div class="sui-box" data-tab="documentation" style="display: none;">
<div class="sui-box-header">
<h2 class="sui-box-title">Documentation</h2>
</div>
<div class="sui-box-body">
<!-- ROW: Specifications -->
<div
id="showcase-specs"
utilities="true"
utilities-page="{{ site.baseurl }}/utilities/"
monochrome="true"
rtl-lang="false"
></div>
</div>
</div>
</section>