forked from rebassjs/rebass
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
384 lines (384 loc) · 273 KB
/
index.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
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
<!DOCTYPE html><html><head><meta charset="utf-8"/><title>Rebass</title><meta name="viewport" content="width=device-width, initial-scale=1"/><link href="https://npmcdn.com/[email protected]/index.css" rel="stylesheet"/><style>
.NavItem:hover,
.Button:hover {
box-shadow: inset 0 0 0 9999px rgba(0, 128, 255, .125);
}
.Button:disabled { opacity: .5 }
</style></head><body><div><div class="Toolbar" style="display:flex;align-items:center;min-height:48px;padding-left:8px;padding-right:8px;color:#fff;background-color:black;"><a href="http://jxnblk.com/rebass" class="NavItem" style="font-size:14px;font-weight:600;line-height:1rem;text-decoration:none;display:flex;align-items:center;align-self:stretch;padding:8px;color:inherit;cursor:pointer;">Rebass</a><a href="http://jxnblk.com/rebass/demo" class="NavItem" style="font-size:14px;font-weight:600;line-height:1rem;text-decoration:none;display:flex;align-items:center;align-self:stretch;padding:8px;color:inherit;cursor:pointer;">Demo</a><div class="Space" style="display:inline-block;flex:1 1 auto;width:8px;"></div><a href="https://github.com/jxnblk/rebass" class="NavItem" style="font-size:14px;font-weight:600;line-height:1rem;text-decoration:none;display:flex;align-items:center;align-self:stretch;padding:8px;color:inherit;cursor:pointer;">GitHub</a><a href="https://npmjs.com/package/rebass" class="NavItem" style="font-size:14px;font-weight:600;line-height:1rem;text-decoration:none;display:flex;align-items:center;align-self:stretch;padding:8px;color:inherit;cursor:pointer;">npm</a></div><div class="Container" style="max-width:1024px;padding-left:16px;padding-right:16px;margin:auto;"><header class="PageHeader" style="display:flex;flex-wrap:wrap;align-items:center;padding-top:32px;padding-bottom:16px;margin-top:64px;margin-bottom:64px;border-bottom-width:2px;border-bottom-style:solid;border-bottom-color:rgba(0, 0, 0, .25);border-color:inherit;"><div style="flex:1 1 auto;margin-bottom:16px;"><h1 class="Heading" style="font-size:32px;font-weight:600;margin:0;">Rebass</h1><p style="margin:0;">55 Configurable React Stateless Functional UI Components [v0.2.0-beta6]</p></div><div style="min-height:100px;"><style>#carbonads { display: inline-block; font-size: 14px; line-height: 1.25; text-align: left; max-width: 320px;
}
#carbonads a,
#carbonads a:hover { text-decoration: none; color: inherit;
}
#carbonads span { display: block }
#carbonads > span::before,
#carbonads > span::after { content: ''; display: table;
}
#carbonads > span::after { clear: both;
}
.carbon-img { float: left; margin-right: .5em;
}
.carbon-img > img { display: block }
.carbon-text { overflow: hidden }
.carbon-poweredby { float: left; margin-top: .25em; opacity: 0.5;
}
</style><script async="" type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1696&serve=CVYD42T&placement=jxnblkcom" id="_carbonads_js"></script></div></header><div style="box-sizing:border-box;padding-bottom:32px;" class="Box"><div style="display:flex;align-items:center;" class="Flex"><a href="https://travis-ci.org/jxnblk/rebass" class="mr2" style="display:inline-block;height:20px;"><img src="https://travis-ci.org/jxnblk/rebass.svg?branch=master" style="display:block;"/></a><div class="Space" style="display:inline-block;width:8px;"></div><div class="inline-block mr2" style="height:20px;"><a href="https://twitter.com/share" class="twitter-share-button" data-text="Rebass: Configurable React Stateless Functional UI Components" data-url="http://jxnblk.com/rebass" data-via="jxnblk">Tweet</a><script>
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?"http":"https";if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document, "script", "twitter-wjs");
</script></div><div class="Space" style="display:inline-block;width:8px;"></div><div class="inline-block mr2" style="height:20px;"><iframe src="https://ghbtns.com/github-btn.html?user=jxnblk&repo=rebass&type=star&count=true" frameborder="0" scrolling="0" width="100px" height="20px"></iframe></div></div></div></div></div><div class="Container" style="max-width:1024px;padding-left:16px;padding-right:16px;margin:auto;"><nav><div style="display:flex;flex-wrap:wrap;margin-left:-8px;margin-right:-8px;" class="Flex"><a href="#Arrow" class="NavItem" style="font-size:14px;font-weight:600;line-height:1rem;text-decoration:none;display:flex;align-items:center;align-self:stretch;padding:8px;color:inherit;cursor:pointer;">Arrow</a><a href="#Avatar" class="NavItem" style="font-size:14px;font-weight:600;line-height:1rem;text-decoration:none;display:flex;align-items:center;align-self:stretch;padding:8px;color:inherit;cursor:pointer;">Avatar</a><a href="#Badge" class="NavItem" style="font-size:14px;font-weight:600;line-height:1rem;text-decoration:none;display:flex;align-items:center;align-self:stretch;padding:8px;color:inherit;cursor:pointer;">Badge</a><a href="#Banner" class="NavItem" style="font-size:14px;font-weight:600;line-height:1rem;text-decoration:none;display:flex;align-items:center;align-self:stretch;padding:8px;color:inherit;cursor:pointer;">Banner</a><a href="#Block" class="NavItem" style="font-size:14px;font-weight:600;line-height:1rem;text-decoration:none;display:flex;align-items:center;align-self:stretch;padding:8px;color:inherit;cursor:pointer;">Block</a><a href="#Breadcrumbs" class="NavItem" style="font-size:14px;font-weight:600;line-height:1rem;text-decoration:none;display:flex;align-items:center;align-self:stretch;padding:8px;color:inherit;cursor:pointer;">Breadcrumbs</a><a href="#Button" class="NavItem" style="font-size:14px;font-weight:600;line-height:1rem;text-decoration:none;display:flex;align-items:center;align-self:stretch;padding:8px;color:inherit;cursor:pointer;">Button</a><a href="#ButtonCircle" class="NavItem" style="font-size:14px;font-weight:600;line-height:1rem;text-decoration:none;display:flex;align-items:center;align-self:stretch;padding:8px;color:inherit;cursor:pointer;">ButtonCircle</a><a href="#ButtonOutline" class="NavItem" style="font-size:14px;font-weight:600;line-height:1rem;text-decoration:none;display:flex;align-items:center;align-self:stretch;padding:8px;color:inherit;cursor:pointer;">ButtonOutline</a><a href="#Card" class="NavItem" style="font-size:14px;font-weight:600;line-height:1rem;text-decoration:none;display:flex;align-items:center;align-self:stretch;padding:8px;color:inherit;cursor:pointer;">Card</a><a href="#CardImage" class="NavItem" style="font-size:14px;font-weight:600;line-height:1rem;text-decoration:none;display:flex;align-items:center;align-self:stretch;padding:8px;color:inherit;cursor:pointer;">CardImage</a><a href="#Checkbox" class="NavItem" style="font-size:14px;font-weight:600;line-height:1rem;text-decoration:none;display:flex;align-items:center;align-self:stretch;padding:8px;color:inherit;cursor:pointer;">Checkbox</a><a href="#Close" class="NavItem" style="font-size:14px;font-weight:600;line-height:1rem;text-decoration:none;display:flex;align-items:center;align-self:stretch;padding:8px;color:inherit;cursor:pointer;">Close</a><a href="#Container" class="NavItem" style="font-size:14px;font-weight:600;line-height:1rem;text-decoration:none;display:flex;align-items:center;align-self:stretch;padding:8px;color:inherit;cursor:pointer;">Container</a><a href="#Divider" class="NavItem" style="font-size:14px;font-weight:600;line-height:1rem;text-decoration:none;display:flex;align-items:center;align-self:stretch;padding:8px;color:inherit;cursor:pointer;">Divider</a><a href="#Donut" class="NavItem" style="font-size:14px;font-weight:600;line-height:1rem;text-decoration:none;display:flex;align-items:center;align-self:stretch;padding:8px;color:inherit;cursor:pointer;">Donut</a><a href="#DotIndicator" class="NavItem" style="font-size:14px;font-weight:600;line-height:1rem;text-decoration:none;display:flex;align-items:center;align-self:stretch;padding:8px;color:inherit;cursor:pointer;">DotIndicator</a><a href="#Drawer" class="NavItem" style="font-size:14px;font-weight:600;line-height:1rem;text-decoration:none;display:flex;align-items:center;align-self:stretch;padding:8px;color:inherit;cursor:pointer;">Drawer</a><a href="#Dropdown" class="NavItem" style="font-size:14px;font-weight:600;line-height:1rem;text-decoration:none;display:flex;align-items:center;align-self:stretch;padding:8px;color:inherit;cursor:pointer;">Dropdown</a><a href="#DropdownMenu" class="NavItem" style="font-size:14px;font-weight:600;line-height:1rem;text-decoration:none;display:flex;align-items:center;align-self:stretch;padding:8px;color:inherit;cursor:pointer;">DropdownMenu</a><a href="#Embed" class="NavItem" style="font-size:14px;font-weight:600;line-height:1rem;text-decoration:none;display:flex;align-items:center;align-self:stretch;padding:8px;color:inherit;cursor:pointer;">Embed</a><a href="#Fixed" class="NavItem" style="font-size:14px;font-weight:600;line-height:1rem;text-decoration:none;display:flex;align-items:center;align-self:stretch;padding:8px;color:inherit;cursor:pointer;">Fixed</a><a href="#Footer" class="NavItem" style="font-size:14px;font-weight:600;line-height:1rem;text-decoration:none;display:flex;align-items:center;align-self:stretch;padding:8px;color:inherit;cursor:pointer;">Footer</a><a href="#Heading" class="NavItem" style="font-size:14px;font-weight:600;line-height:1rem;text-decoration:none;display:flex;align-items:center;align-self:stretch;padding:8px;color:inherit;cursor:pointer;">Heading</a><a href="#HeadingLink" class="NavItem" style="font-size:14px;font-weight:600;line-height:1rem;text-decoration:none;display:flex;align-items:center;align-self:stretch;padding:8px;color:inherit;cursor:pointer;">HeadingLink</a><a href="#InlineForm" class="NavItem" style="font-size:14px;font-weight:600;line-height:1rem;text-decoration:none;display:flex;align-items:center;align-self:stretch;padding:8px;color:inherit;cursor:pointer;">InlineForm</a><a href="#Input" class="NavItem" style="font-size:14px;font-weight:600;line-height:1rem;text-decoration:none;display:flex;align-items:center;align-self:stretch;padding:8px;color:inherit;cursor:pointer;">Input</a><a href="#InputRange" class="NavItem" style="font-size:14px;font-weight:600;line-height:1rem;text-decoration:none;display:flex;align-items:center;align-self:stretch;padding:8px;color:inherit;cursor:pointer;">InputRange</a><a href="#Label" class="NavItem" style="font-size:14px;font-weight:600;line-height:1rem;text-decoration:none;display:flex;align-items:center;align-self:stretch;padding:8px;color:inherit;cursor:pointer;">Label</a><a href="#LinkBlock" class="NavItem" style="font-size:14px;font-weight:600;line-height:1rem;text-decoration:none;display:flex;align-items:center;align-self:stretch;padding:8px;color:inherit;cursor:pointer;">LinkBlock</a><a href="#Media" class="NavItem" style="font-size:14px;font-weight:600;line-height:1rem;text-decoration:none;display:flex;align-items:center;align-self:stretch;padding:8px;color:inherit;cursor:pointer;">Media</a><a href="#Menu" class="NavItem" style="font-size:14px;font-weight:600;line-height:1rem;text-decoration:none;display:flex;align-items:center;align-self:stretch;padding:8px;color:inherit;cursor:pointer;">Menu</a><a href="#Message" class="NavItem" style="font-size:14px;font-weight:600;line-height:1rem;text-decoration:none;display:flex;align-items:center;align-self:stretch;padding:8px;color:inherit;cursor:pointer;">Message</a><a href="#NavItem" class="NavItem" style="font-size:14px;font-weight:600;line-height:1rem;text-decoration:none;display:flex;align-items:center;align-self:stretch;padding:8px;color:inherit;cursor:pointer;">NavItem</a><a href="#Overlay" class="NavItem" style="font-size:14px;font-weight:600;line-height:1rem;text-decoration:none;display:flex;align-items:center;align-self:stretch;padding:8px;color:inherit;cursor:pointer;">Overlay</a><a href="#PageHeader" class="NavItem" style="font-size:14px;font-weight:600;line-height:1rem;text-decoration:none;display:flex;align-items:center;align-self:stretch;padding:8px;color:inherit;cursor:pointer;">PageHeader</a><a href="#Panel" class="NavItem" style="font-size:14px;font-weight:600;line-height:1rem;text-decoration:none;display:flex;align-items:center;align-self:stretch;padding:8px;color:inherit;cursor:pointer;">Panel</a><a href="#PanelFooter" class="NavItem" style="font-size:14px;font-weight:600;line-height:1rem;text-decoration:none;display:flex;align-items:center;align-self:stretch;padding:8px;color:inherit;cursor:pointer;">PanelFooter</a><a href="#PanelHeader" class="NavItem" style="font-size:14px;font-weight:600;line-height:1rem;text-decoration:none;display:flex;align-items:center;align-self:stretch;padding:8px;color:inherit;cursor:pointer;">PanelHeader</a><a href="#Pre" class="NavItem" style="font-size:14px;font-weight:600;line-height:1rem;text-decoration:none;display:flex;align-items:center;align-self:stretch;padding:8px;color:inherit;cursor:pointer;">Pre</a><a href="#Progress" class="NavItem" style="font-size:14px;font-weight:600;line-height:1rem;text-decoration:none;display:flex;align-items:center;align-self:stretch;padding:8px;color:inherit;cursor:pointer;">Progress</a><a href="#Radio" class="NavItem" style="font-size:14px;font-weight:600;line-height:1rem;text-decoration:none;display:flex;align-items:center;align-self:stretch;padding:8px;color:inherit;cursor:pointer;">Radio</a><a href="#Rating" class="NavItem" style="font-size:14px;font-weight:600;line-height:1rem;text-decoration:none;display:flex;align-items:center;align-self:stretch;padding:8px;color:inherit;cursor:pointer;">Rating</a><a href="#Section" class="NavItem" style="font-size:14px;font-weight:600;line-height:1rem;text-decoration:none;display:flex;align-items:center;align-self:stretch;padding:8px;color:inherit;cursor:pointer;">Section</a><a href="#SectionHeader" class="NavItem" style="font-size:14px;font-weight:600;line-height:1rem;text-decoration:none;display:flex;align-items:center;align-self:stretch;padding:8px;color:inherit;cursor:pointer;">SectionHeader</a><a href="#Select" class="NavItem" style="font-size:14px;font-weight:600;line-height:1rem;text-decoration:none;display:flex;align-items:center;align-self:stretch;padding:8px;color:inherit;cursor:pointer;">Select</a><a href="#SequenceMap" class="NavItem" style="font-size:14px;font-weight:600;line-height:1rem;text-decoration:none;display:flex;align-items:center;align-self:stretch;padding:8px;color:inherit;cursor:pointer;">SequenceMap</a><a href="#Space" class="NavItem" style="font-size:14px;font-weight:600;line-height:1rem;text-decoration:none;display:flex;align-items:center;align-self:stretch;padding:8px;color:inherit;cursor:pointer;">Space</a><a href="#Stat" class="NavItem" style="font-size:14px;font-weight:600;line-height:1rem;text-decoration:none;display:flex;align-items:center;align-self:stretch;padding:8px;color:inherit;cursor:pointer;">Stat</a><a href="#Switch" class="NavItem" style="font-size:14px;font-weight:600;line-height:1rem;text-decoration:none;display:flex;align-items:center;align-self:stretch;padding:8px;color:inherit;cursor:pointer;">Switch</a><a href="#Table" class="NavItem" style="font-size:14px;font-weight:600;line-height:1rem;text-decoration:none;display:flex;align-items:center;align-self:stretch;padding:8px;color:inherit;cursor:pointer;">Table</a><a href="#Text" class="NavItem" style="font-size:14px;font-weight:600;line-height:1rem;text-decoration:none;display:flex;align-items:center;align-self:stretch;padding:8px;color:inherit;cursor:pointer;">Text</a><a href="#Textarea" class="NavItem" style="font-size:14px;font-weight:600;line-height:1rem;text-decoration:none;display:flex;align-items:center;align-self:stretch;padding:8px;color:inherit;cursor:pointer;">Textarea</a><a href="#Toolbar" class="NavItem" style="font-size:14px;font-weight:600;line-height:1rem;text-decoration:none;display:flex;align-items:center;align-self:stretch;padding:8px;color:inherit;cursor:pointer;">Toolbar</a><a href="#Tooltip" class="NavItem" style="font-size:14px;font-weight:600;line-height:1rem;text-decoration:none;display:flex;align-items:center;align-self:stretch;padding:8px;color:inherit;cursor:pointer;">Tooltip</a></div></nav><main><section class="Section" style="padding-top:64px;padding-bottom:64px;"><header class="SectionHeader" style="display:flex;align-items:center;padding-bottom:8px;margin-top:32px;margin-bottom:32px;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:rgba(0, 0, 0, .25);border-color:inherit;"><div style="flex:1 1 auto;"><h2 class="Heading" style="font-size:24px;font-weight:600;margin:0;"><a href="#Getting Started" style="color:inherit;text-decoration:none;">Getting Started</a></h2></div></header><p style="font-size:20px;">Rebass is a React UI component library that uses inline styles to avoid CSS dependencies and prevent leaky global styles from affecting an application. Rebass components inherit styles where appropriate and can be customized using <a href="https://facebook.github.io/react/docs/context.html">React Context</a>. Rebass components are built as stateless functional components and modeled as <a href="https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0#.ah4312963">presentational components</a>. With unit tests for each component, Rebass is great for prototyping and ready for production.</p><p style="font-size:20px;"><a href="demo">View the demo</a> or read the component documentation below to get started.</p><pre class="Pre" style="font-family:'Roboto Mono', Menlo, Consolas, monospace;padding-left:16px;margin-bottom:16px;border-left:4px solid rgba(0, 0, 0, .25);overflow-x:scroll;">npm i rebass</pre></section><section id="Arrow" class="Section" style="padding-top:64px;padding-bottom:64px;"><header class="SectionHeader" style="display:flex;align-items:center;padding-bottom:8px;margin-top:32px;margin-bottom:32px;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:rgba(0, 0, 0, .25);border-color:inherit;"><div style="flex:1 1 auto;"><h2 class="Heading" style="font-size:24px;font-weight:600;margin:0;"><a href="#Arrow" style="color:inherit;text-decoration:none;">Arrow</a></h2><p class="Text" style="font-size:16px;margin:0;">Arrow for use in dropdowns and other UI elements</p></div></header><div class="Panel" style="padding:16px;margin-bottom:16px;background-color:#fff;border-width:1px;border-style:solid;border-color:#111;border-radius:2px;"><div class="PanelHeader" style="display:flex;align-items:center;font-weight:bold;margin-top:-17px;margin-right:-17px;margin-left:-17px;margin-bottom:16px;padding:16px;color:#fff;background-color:#111;border-radius:2px 2px 0 0;">Example</div><div class="mb2"><button class="Button" style="font-family:inherit;font-size:14px;font-weight:600;line-height:16px;text-decoration:none;display:inline-block;margin:0;padding:8px 16px;cursor:pointer;border:0;color:#fff;background-color:#08e;border-radius:2px;">Arrow<div class="Arrow" style="display:inline-block;width:0;height:0;margin-left:.5em;vertical-align:middle;border-right:.3125em solid transparent;border-left:.3125em solid transparent;border-top:.4375em solid;"></div></button><pre class="Pre" style="font-family:'Roboto Mono', Menlo, Consolas, monospace;padding-left:16px;margin-bottom:16px;border-left:4px solid rgba(0, 0, 0, .25);overflow-x:scroll;"><Button rounded={true}>
Arrow
<Arrow direction="down" />
</Button></pre></div><div class="Permutations"><p class="Text" style="font-size:12px;margin:0;">Variations</p><div style="position:relative;margin-bottom:16px;"><div><div class="Arrow" style="display:inline-block;width:0;height:0;margin-left:.5em;vertical-align:middle;border-right:.3125em solid transparent;border-left:.3125em solid transparent;border-bottom:.4375em solid;margin-right:16px;"></div><div class="Arrow" style="display:inline-block;width:0;height:0;margin-left:.5em;vertical-align:middle;border-right:.3125em solid transparent;border-left:.3125em solid transparent;border-top:.4375em solid;margin-right:16px;"></div></div></div></div></div><div style="max-width:100%;overflow-x:scroll;"><table style="font-size:14px;line-height:1.125;min-width:512px;border-collapse:separate;border-spacing:0;max-width:100%;width:100%;"><thead><tr><th style="text-align:left;padding:8px 8px 8px 0;vertical-align:bottom;border-bottom:2px solid rgba(0, 0, 0, .125);">Prop</th><th style="text-align:left;padding:8px 8px 8px 0;vertical-align:bottom;border-bottom:2px solid rgba(0, 0, 0, .125);">Type</th><th style="text-align:left;padding:8px 8px 8px 0;vertical-align:bottom;border-bottom:2px solid rgba(0, 0, 0, .125);">Description</th></tr></thead><tbody><tr><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;" title="false">direction </td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;">oneOf(['up', 'down'])</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);">Direction of arrow</td></tr></tbody></table></div><div style="box-sizing:border-box;padding-top:16px;" class="Box"><div style="display:flex;margin-left:-8px;margin-right:-8px;" class="Flex"><div style="box-sizing:border-box;flex:1 1 auto;" class="Box"></div><a href="#" class="NavItem" style="font-size:12px;font-weight:600;line-height:1rem;text-decoration:none;display:flex;align-items:center;align-self:stretch;padding:4px 8px;color:inherit;cursor:pointer;">Back to Top</a></div></div></section><section id="Avatar" class="Section" style="padding-top:64px;padding-bottom:64px;"><header class="SectionHeader" style="display:flex;align-items:center;padding-bottom:8px;margin-top:32px;margin-bottom:32px;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:rgba(0, 0, 0, .25);border-color:inherit;"><div style="flex:1 1 auto;"><h2 class="Heading" style="font-size:24px;font-weight:600;margin:0;"><a href="#Avatar" style="color:inherit;text-decoration:none;">Avatar</a></h2><p class="Text" style="font-size:16px;margin:0;">A circular image for displaying user avatars</p></div></header><div class="Panel" style="padding:16px;margin-bottom:16px;background-color:#fff;border-width:1px;border-style:solid;border-color:#111;border-radius:2px;"><div class="PanelHeader" style="display:flex;align-items:center;font-weight:bold;margin-top:-17px;margin-right:-17px;margin-left:-17px;margin-bottom:16px;padding:16px;color:#fff;background-color:#111;border-radius:2px 2px 0 0;">Example</div><div class="mb2"><img src="http://lorempixel.com/64/64/cats" class="Avatar" width="48" height="48" style="max-width:none;width:48px;height:48px;border-radius:9999px;background-color:#ccc;"/><pre class="Pre" style="font-family:'Roboto Mono', Menlo, Consolas, monospace;padding-left:16px;margin-bottom:16px;border-left:4px solid rgba(0, 0, 0, .25);overflow-x:scroll;"><Avatar
size={48}
src="http://lorempixel.com/64/64/cats"
/></pre></div><div></div></div><div style="max-width:100%;overflow-x:scroll;"><table style="font-size:14px;line-height:1.125;min-width:512px;border-collapse:separate;border-spacing:0;max-width:100%;width:100%;"><thead><tr><th style="text-align:left;padding:8px 8px 8px 0;vertical-align:bottom;border-bottom:2px solid rgba(0, 0, 0, .125);">Prop</th><th style="text-align:left;padding:8px 8px 8px 0;vertical-align:bottom;border-bottom:2px solid rgba(0, 0, 0, .125);">Type</th><th style="text-align:left;padding:8px 8px 8px 0;vertical-align:bottom;border-bottom:2px solid rgba(0, 0, 0, .125);">Description</th></tr></thead><tbody><tr><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;" title="false">size </td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;">number</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);">Width and height of image in pixels</td></tr></tbody></table></div><div style="box-sizing:border-box;padding-top:16px;" class="Box"><div style="display:flex;margin-left:-8px;margin-right:-8px;" class="Flex"><div style="box-sizing:border-box;flex:1 1 auto;" class="Box"></div><a href="#" class="NavItem" style="font-size:12px;font-weight:600;line-height:1rem;text-decoration:none;display:flex;align-items:center;align-self:stretch;padding:4px 8px;color:inherit;cursor:pointer;">Back to Top</a></div></div></section><section id="Badge" class="Section" style="padding-top:64px;padding-bottom:64px;"><header class="SectionHeader" style="display:flex;align-items:center;padding-bottom:8px;margin-top:32px;margin-bottom:32px;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:rgba(0, 0, 0, .25);border-color:inherit;"><div style="flex:1 1 auto;"><h2 class="Heading" style="font-size:24px;font-weight:600;margin:0;"><a href="#Badge" style="color:inherit;text-decoration:none;">Badge</a></h2><p class="Text" style="font-size:16px;margin:0;">Component for displaying flash and error messages</p></div></header><div class="Panel" style="padding:16px;margin-bottom:16px;background-color:#fff;border-width:1px;border-style:solid;border-color:#111;border-radius:2px;"><div class="PanelHeader" style="display:flex;align-items:center;font-weight:bold;margin-top:-17px;margin-right:-17px;margin-left:-17px;margin-bottom:16px;padding:16px;color:#fff;background-color:#111;border-radius:2px 2px 0 0;">Example</div><div class="mb2"><div style="display:flex;align-items:center;" class="Flex"><h4 class="Heading" style="font-size:16px;font-weight:600;margin:0;">Rebass <div class="Space" style="display:inline-block;width:8px;"></div><div class="Badge" style="font-size:12px;font-weight:600;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;height:16px;padding-top:0;padding-bottom:0;padding-left:8px;padding-right:8px;overflow:hidden;color:#fff;border-radius:2px;background-color:#08e;">0.2.0</div></h4><div class="Space" style="display:inline-block;width:16px;"></div><h4 class="Heading" style="font-size:16px;font-weight:600;margin:0;">Pill <div class="Space" style="display:inline-block;width:8px;"></div><div class="Badge" style="font-size:12px;font-weight:600;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;height:16px;padding-top:0;padding-bottom:0;padding-left:8px;padding-right:8px;overflow:hidden;color:#fff;border-radius:99999px;background-color:#08e;">Pill</div></h4><div class="Space" style="display:inline-block;width:16px;"></div><h4 class="Heading" style="font-size:16px;font-weight:600;margin:0;">Circular Things <div class="Space" style="display:inline-block;width:8px;"></div><div class="Badge" style="font-size:12px;font-weight:600;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;padding-top:0;padding-bottom:0;padding-left:0;padding-right:0;overflow:hidden;color:#fff;border-radius:99999px;background-color:#f52;">4</div></h4></div><pre class="Pre" style="font-family:'Roboto Mono', Menlo, Consolas, monospace;padding-left:16px;margin-bottom:16px;border-left:4px solid rgba(0, 0, 0, .25);overflow-x:scroll;"><Flex align="center">
<Heading level={4}>
Rebass
<Space x={1} />
<Badge type="info">
0.2.0
</Badge>
</Heading>
<Space x={2} />
<Heading level={4}>
Pill
<Space x={1} />
<Badge
pill={true}
type="info"
>
Pill
</Badge>
</Heading>
<Space x={2} />
<Heading level={4}>
Circular Things
<Space x={1} />
<Badge
circle={true}
type="error"
>
4
</Badge>
</Heading>
</Flex></pre></div><div class="Permutations"><p class="Text" style="font-size:12px;margin:0;">Variations</p><div style="position:relative;margin-bottom:16px;"><div><div title="<Badge type='default' pill={true} circle={true} />" name="Badge" class="Badge" style="font-size:12px;font-weight:600;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;padding-top:0;padding-bottom:0;padding-left:0;padding-right:0;overflow:hidden;color:#fff;border-radius:99999px;background-color:#111;margin-right:16px;">Badge</div><div title="<Badge type='default' pill={true} circle={false} />" name="Badge" class="Badge" style="font-size:12px;font-weight:600;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;height:16px;padding-top:0;padding-bottom:0;padding-left:8px;padding-right:8px;overflow:hidden;color:#fff;border-radius:99999px;background-color:#111;margin-right:16px;">Badge</div><div title="<Badge type='default' pill={false} circle={true} />" name="Badge" class="Badge" style="font-size:12px;font-weight:600;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;padding-top:0;padding-bottom:0;padding-left:0;padding-right:0;overflow:hidden;color:#fff;border-radius:99999px;background-color:#111;margin-right:16px;">Badge</div><div title="<Badge type='default' pill={false} circle={false} />" name="Badge" class="Badge" style="font-size:12px;font-weight:600;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;height:16px;padding-top:0;padding-bottom:0;padding-left:8px;padding-right:8px;overflow:hidden;color:#fff;border-radius:2px;background-color:#111;margin-right:16px;">Badge</div><div title="<Badge type='info' pill={true} circle={true} />" name="Badge" class="Badge" style="font-size:12px;font-weight:600;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;padding-top:0;padding-bottom:0;padding-left:0;padding-right:0;overflow:hidden;color:#fff;border-radius:99999px;background-color:#08e;margin-right:16px;">Badge</div><div title="<Badge type='info' pill={true} circle={false} />" name="Badge" class="Badge" style="font-size:12px;font-weight:600;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;height:16px;padding-top:0;padding-bottom:0;padding-left:8px;padding-right:8px;overflow:hidden;color:#fff;border-radius:99999px;background-color:#08e;margin-right:16px;">Badge</div><div title="<Badge type='info' pill={false} circle={true} />" name="Badge" class="Badge" style="font-size:12px;font-weight:600;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;padding-top:0;padding-bottom:0;padding-left:0;padding-right:0;overflow:hidden;color:#fff;border-radius:99999px;background-color:#08e;margin-right:16px;">Badge</div><div title="<Badge type='info' pill={false} circle={false} />" name="Badge" class="Badge" style="font-size:12px;font-weight:600;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;height:16px;padding-top:0;padding-bottom:0;padding-left:8px;padding-right:8px;overflow:hidden;color:#fff;border-radius:2px;background-color:#08e;margin-right:16px;">Badge</div><div title="<Badge type='success' pill={true} circle={true} />" name="Badge" class="Badge" style="font-size:12px;font-weight:600;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;padding-top:0;padding-bottom:0;padding-left:0;padding-right:0;overflow:hidden;color:#fff;border-radius:99999px;background-color:#1c7;margin-right:16px;">Badge</div><div title="<Badge type='success' pill={true} circle={false} />" name="Badge" class="Badge" style="font-size:12px;font-weight:600;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;height:16px;padding-top:0;padding-bottom:0;padding-left:8px;padding-right:8px;overflow:hidden;color:#fff;border-radius:99999px;background-color:#1c7;margin-right:16px;">Badge</div><div title="<Badge type='success' pill={false} circle={true} />" name="Badge" class="Badge" style="font-size:12px;font-weight:600;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;padding-top:0;padding-bottom:0;padding-left:0;padding-right:0;overflow:hidden;color:#fff;border-radius:99999px;background-color:#1c7;margin-right:16px;">Badge</div><div title="<Badge type='success' pill={false} circle={false} />" name="Badge" class="Badge" style="font-size:12px;font-weight:600;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;height:16px;padding-top:0;padding-bottom:0;padding-left:8px;padding-right:8px;overflow:hidden;color:#fff;border-radius:2px;background-color:#1c7;margin-right:16px;">Badge</div><div title="<Badge type='warning' pill={true} circle={true} />" name="Badge" class="Badge" style="font-size:12px;font-weight:600;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;padding-top:0;padding-bottom:0;padding-left:0;padding-right:0;overflow:hidden;color:#fff;border-radius:99999px;background-color:#f90;margin-right:16px;">Badge</div><div title="<Badge type='warning' pill={true} circle={false} />" name="Badge" class="Badge" style="font-size:12px;font-weight:600;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;height:16px;padding-top:0;padding-bottom:0;padding-left:8px;padding-right:8px;overflow:hidden;color:#fff;border-radius:99999px;background-color:#f90;margin-right:16px;">Badge</div><div title="<Badge type='warning' pill={false} circle={true} />" name="Badge" class="Badge" style="font-size:12px;font-weight:600;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;padding-top:0;padding-bottom:0;padding-left:0;padding-right:0;overflow:hidden;color:#fff;border-radius:99999px;background-color:#f90;margin-right:16px;">Badge</div><div title="<Badge type='warning' pill={false} circle={false} />" name="Badge" class="Badge" style="font-size:12px;font-weight:600;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;height:16px;padding-top:0;padding-bottom:0;padding-left:8px;padding-right:8px;overflow:hidden;color:#fff;border-radius:2px;background-color:#f90;margin-right:16px;">Badge</div><div title="<Badge type='error' pill={true} circle={true} />" name="Badge" class="Badge" style="font-size:12px;font-weight:600;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;padding-top:0;padding-bottom:0;padding-left:0;padding-right:0;overflow:hidden;color:#fff;border-radius:99999px;background-color:#f52;margin-right:16px;">Badge</div><div title="<Badge type='error' pill={true} circle={false} />" name="Badge" class="Badge" style="font-size:12px;font-weight:600;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;height:16px;padding-top:0;padding-bottom:0;padding-left:8px;padding-right:8px;overflow:hidden;color:#fff;border-radius:99999px;background-color:#f52;margin-right:16px;">Badge</div><div title="<Badge type='error' pill={false} circle={true} />" name="Badge" class="Badge" style="font-size:12px;font-weight:600;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;padding-top:0;padding-bottom:0;padding-left:0;padding-right:0;overflow:hidden;color:#fff;border-radius:99999px;background-color:#f52;margin-right:16px;">Badge</div><div title="<Badge type='error' pill={false} circle={false} />" name="Badge" class="Badge" style="font-size:12px;font-weight:600;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;height:16px;padding-top:0;padding-bottom:0;padding-left:8px;padding-right:8px;overflow:hidden;color:#fff;border-radius:2px;background-color:#f52;margin-right:16px;">Badge</div></div></div></div></div><div style="max-width:100%;overflow-x:scroll;"><table style="font-size:14px;line-height:1.125;min-width:512px;border-collapse:separate;border-spacing:0;max-width:100%;width:100%;"><thead><tr><th style="text-align:left;padding:8px 8px 8px 0;vertical-align:bottom;border-bottom:2px solid rgba(0, 0, 0, .125);">Prop</th><th style="text-align:left;padding:8px 8px 8px 0;vertical-align:bottom;border-bottom:2px solid rgba(0, 0, 0, .125);">Type</th><th style="text-align:left;padding:8px 8px 8px 0;vertical-align:bottom;border-bottom:2px solid rgba(0, 0, 0, .125);">Description</th></tr></thead><tbody><tr><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;" title="false">type </td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;">oneOf(['default', 'info', 'success', 'warning', 'error'])</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);">Sets color based on type of badge</td></tr><tr><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;" title="false">pill </td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;">bool</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);">Sets pill style border radii</td></tr><tr><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;" title="false">circle </td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;">bool</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);">Sets width and border radius for circular badges</td></tr></tbody></table></div><div style="box-sizing:border-box;padding-top:16px;" class="Box"><div style="display:flex;margin-left:-8px;margin-right:-8px;" class="Flex"><div style="box-sizing:border-box;flex:1 1 auto;" class="Box"></div><a href="#" class="NavItem" style="font-size:12px;font-weight:600;line-height:1rem;text-decoration:none;display:flex;align-items:center;align-self:stretch;padding:4px 8px;color:inherit;cursor:pointer;">Back to Top</a></div></div></section><section id="Banner" class="Section" style="padding-top:64px;padding-bottom:64px;"><header class="SectionHeader" style="display:flex;align-items:center;padding-bottom:8px;margin-top:32px;margin-bottom:32px;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:rgba(0, 0, 0, .25);border-color:inherit;"><div style="flex:1 1 auto;"><h2 class="Heading" style="font-size:24px;font-weight:600;margin:0;"><a href="#Banner" style="color:inherit;text-decoration:none;">Banner</a></h2><p class="Text" style="font-size:16px;margin:0;">Full-height banner with styling for background images</p></div></header><div class="Panel" style="padding:16px;margin-bottom:16px;background-color:#fff;border-width:1px;border-style:solid;border-color:#111;border-radius:2px;"><div class="PanelHeader" style="display:flex;align-items:center;font-weight:bold;margin-top:-17px;margin-right:-17px;margin-left:-17px;margin-bottom:16px;padding:16px;color:#fff;background-color:#111;border-radius:2px 2px 0 0;">Example</div><div class="mb2"><div class="Banner" style="box-sizing:border-box;font-size:32px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:64px;margin-bottom:32px;color:#fff;background-color:#08e;min-height:100vh;background-position:center;background-size:cover;background-image:url(https://d262ilb51hltx0.cloudfront.net/max/2000/1*DZwdGMaeu-rvTroJYui6Uw.jpeg);"><h2 class="Heading" style="font-size:48px;font-weight:600;margin:0;">Rebass</h2></div><pre class="Pre" style="font-family:'Roboto Mono', Menlo, Consolas, monospace;padding-left:16px;margin-bottom:16px;border-left:4px solid rgba(0, 0, 0, .25);overflow-x:scroll;"><Banner
align="center"
backgroundImage="https://d262ilb51hltx0.cloudfront.net/max/2000/1*DZwdGMaeu-rvTroJYui6Uw.jpeg"
>
<Heading
level={2}
size={0}
>
Rebass
</Heading>
</Banner></pre></div><div></div></div><div style="max-width:100%;overflow-x:scroll;"><table style="font-size:14px;line-height:1.125;min-width:512px;border-collapse:separate;border-spacing:0;max-width:100%;width:100%;"><thead><tr><th style="text-align:left;padding:8px 8px 8px 0;vertical-align:bottom;border-bottom:2px solid rgba(0, 0, 0, .125);">Prop</th><th style="text-align:left;padding:8px 8px 8px 0;vertical-align:bottom;border-bottom:2px solid rgba(0, 0, 0, .125);">Type</th><th style="text-align:left;padding:8px 8px 8px 0;vertical-align:bottom;border-bottom:2px solid rgba(0, 0, 0, .125);">Description</th></tr></thead><tbody><tr><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;" title="false">align </td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;">oneOf(['left', 'center', 'right'])</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);">Horizontal alignment</td></tr><tr><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;" title="false">backgroundImage </td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;">string</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);">Background image source</td></tr></tbody></table></div><div style="box-sizing:border-box;padding-top:16px;" class="Box"><div style="display:flex;margin-left:-8px;margin-right:-8px;" class="Flex"><div style="box-sizing:border-box;flex:1 1 auto;" class="Box"></div><a href="#" class="NavItem" style="font-size:12px;font-weight:600;line-height:1rem;text-decoration:none;display:flex;align-items:center;align-self:stretch;padding:4px 8px;color:inherit;cursor:pointer;">Back to Top</a></div></div></section><section id="Block" class="Section" style="padding-top:64px;padding-bottom:64px;"><header class="SectionHeader" style="display:flex;align-items:center;padding-bottom:8px;margin-top:32px;margin-bottom:32px;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:rgba(0, 0, 0, .25);border-color:inherit;"><div style="flex:1 1 auto;"><h2 class="Heading" style="font-size:24px;font-weight:600;margin:0;"><a href="#Block" style="color:inherit;text-decoration:none;">Block</a></h2><p class="Text" style="font-size:16px;margin:0;">Generic box with visual styling</p></div></header><div class="Panel" style="padding:16px;margin-bottom:16px;background-color:#fff;border-width:1px;border-style:solid;border-color:#111;border-radius:2px;"><div class="PanelHeader" style="display:flex;align-items:center;font-weight:bold;margin-top:-17px;margin-right:-17px;margin-left:-17px;margin-bottom:16px;padding:16px;color:#fff;background-color:#111;border-radius:2px 2px 0 0;">Example</div><div class="mb2"><div class="Block" style="box-sizing:border-box;padding:16px;margin-bottom:16px;border-style:none;border-left-style:solid;border-width:4px;border-color:#08e;color:#08e;"><div class="Media" style="display:flex;margin-bottom:16px;"><img src="http://placehold.it/128/08e/fff" style="flex:none;max-width:none;margin-right:16px;margin-left:0;"/><div><h2 class="Heading" style="font-size:48px;font-weight:600;margin:0;">Block</h2><p class="Text" style="font-size:16px;margin:0;">Generic box for containing things</p></div></div></div><pre class="Pre" style="font-family:'Roboto Mono', Menlo, Consolas, monospace;padding-left:16px;margin-bottom:16px;border-left:4px solid rgba(0, 0, 0, .25);overflow-x:scroll;"><Block
borderLeft={true}
color="blue"
>
<Media img="http://placehold.it/128/08e/fff">
<Heading
level={2}
size={0}
>
Block
</Heading>
<Text>
Generic box for containing things
</Text>
</Media>
</Block></pre></div><div></div></div><div style="max-width:100%;overflow-x:scroll;"><table style="font-size:14px;line-height:1.125;min-width:512px;border-collapse:separate;border-spacing:0;max-width:100%;width:100%;"><thead><tr><th style="text-align:left;padding:8px 8px 8px 0;vertical-align:bottom;border-bottom:2px solid rgba(0, 0, 0, .125);">Prop</th><th style="text-align:left;padding:8px 8px 8px 0;vertical-align:bottom;border-bottom:2px solid rgba(0, 0, 0, .125);">Type</th><th style="text-align:left;padding:8px 8px 8px 0;vertical-align:bottom;border-bottom:2px solid rgba(0, 0, 0, .125);">Description</th></tr></thead><tbody><tr><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;" title="false">color </td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;">string</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);">Text color - can either be a key from the theme colors object or any color value</td></tr><tr><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;" title="false">backgroundColor </td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;">string</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);">Background color - can either be a key from the theme colors object or any color value</td></tr><tr><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;" title="false">borderColor </td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;">string</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);">Border color - can either be a key from the theme colors object or any color value</td></tr><tr><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;" title="false">border </td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;">bool</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);">Adds a border</td></tr><tr><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;" title="false">borderTop </td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;">bool</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);">Adds a border to the top side</td></tr><tr><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;" title="false">borderRight </td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;">bool</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);">Adds a border to the right side</td></tr><tr><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;" title="false">borderBottom </td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;">bool</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);">Adds a border to the bottom side</td></tr><tr><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;" title="false">borderLeft </td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;">bool</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);">Adds a border to the left side</td></tr><tr><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;" title="false">m </td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;">oneOf([0, 1, 2, 3, 4])</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);">Applies margin with the margin utility based on the theme spacing scale</td></tr><tr><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;" title="false">mt </td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;">oneOf([0, 1, 2, 3, 4])</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);">Applies margin top based on the theme spacing scale</td></tr><tr><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;" title="false">mr </td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;">oneOf([0, 1, 2, 3, 4])</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);">Applies margin right based on the theme spacing scale</td></tr><tr><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;" title="false">mb </td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;">oneOf([0, 1, 2, 3, 4])</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);">Applies margin bottom based on the theme spacing scale</td></tr><tr><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;" title="false">ml </td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;">oneOf([0, 1, 2, 3, 4])</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);">Applies margin left based on the theme spacing scale</td></tr><tr><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;" title="false">mx </td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;">oneOf([0, 1, 2, 3, 4])</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);">Applies margin left and right based on the theme spacing scale</td></tr><tr><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;" title="false">my </td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;">oneOf([0, 1, 2, 3, 4])</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);">Applies margin top and bottom based on the theme spacing scale</td></tr><tr><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;" title="false">p </td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;">oneOf([0, 1, 2, 3, 4])</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);">Applies padding with the padding utility based on the theme spacing scale</td></tr><tr><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;" title="false">pt </td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;">oneOf([0, 1, 2, 3, 4])</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);">Applies padding top based on the theme spacing scale</td></tr><tr><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;" title="false">pr </td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;">oneOf([0, 1, 2, 3, 4])</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);">Applies padding right based on the theme spacing scale</td></tr><tr><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;" title="false">pb </td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;">oneOf([0, 1, 2, 3, 4])</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);">Applies padding bottom based on the theme spacing scale</td></tr><tr><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;" title="false">pl </td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;">oneOf([0, 1, 2, 3, 4])</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);">Applies padding left based on the theme spacing scale</td></tr><tr><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;" title="false">px </td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;">oneOf([0, 1, 2, 3, 4])</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);">Applies padding left and right based on the theme spacing scale</td></tr><tr><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;" title="false">py </td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;">oneOf([0, 1, 2, 3, 4])</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);">Applies padding top and bottom based on the theme spacing scale</td></tr><tr><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;" title="false">rounded </td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;">oneOfType([bool, oneOf(['top', 'right', 'bottom', 'left'])])</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);">Controls border radius</td></tr></tbody></table></div><div style="box-sizing:border-box;padding-top:16px;" class="Box"><div style="display:flex;margin-left:-8px;margin-right:-8px;" class="Flex"><div style="box-sizing:border-box;flex:1 1 auto;" class="Box"></div><a href="#" class="NavItem" style="font-size:12px;font-weight:600;line-height:1rem;text-decoration:none;display:flex;align-items:center;align-self:stretch;padding:4px 8px;color:inherit;cursor:pointer;">Back to Top</a></div></div></section><section id="Breadcrumbs" class="Section" style="padding-top:64px;padding-bottom:64px;"><header class="SectionHeader" style="display:flex;align-items:center;padding-bottom:8px;margin-top:32px;margin-bottom:32px;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:rgba(0, 0, 0, .25);border-color:inherit;"><div style="flex:1 1 auto;"><h2 class="Heading" style="font-size:24px;font-weight:600;margin:0;"><a href="#Breadcrumbs" style="color:inherit;text-decoration:none;">Breadcrumbs</a></h2><p class="Text" style="font-size:16px;margin:0;">Breadcrumb navigation links</p></div></header><div class="Panel" style="padding:16px;margin-bottom:16px;background-color:#fff;border-width:1px;border-style:solid;border-color:#111;border-radius:2px;"><div class="PanelHeader" style="display:flex;align-items:center;font-weight:bold;margin-top:-17px;margin-right:-17px;margin-left:-17px;margin-bottom:16px;padding:16px;color:#fff;background-color:#111;border-radius:2px 2px 0 0;">Example</div><div class="mb2"><div class="Breadcrumbs" style="font-size:14px;display:flex;margin-bottom:16px;align-items:center;"><div><a href="#!" style="color:inherit;">Jxnblk</a><span style="margin-left:.5em;margin-right:.5em;">/</span></div><div><a href="#!" style="color:inherit;">Rebass</a><span style="margin-left:.5em;margin-right:.5em;">/</span></div><div><a href="#!" style="color:inherit;text-decoration:none;">Breadcrumbs</a></div></div><pre class="Pre" style="font-family:'Roboto Mono', Menlo, Consolas, monospace;padding-left:16px;margin-bottom:16px;border-left:4px solid rgba(0, 0, 0, .25);overflow-x:scroll;"><Breadcrumbs links={[{children: 'Jxnblk', href: '#!'}, {children: 'Rebass', href: '#!'}, {children: 'Breadcrumbs', href: '#!'}]} /></pre></div><div></div></div><div style="max-width:100%;overflow-x:scroll;"><table style="font-size:14px;line-height:1.125;min-width:512px;border-collapse:separate;border-spacing:0;max-width:100%;width:100%;"><thead><tr><th style="text-align:left;padding:8px 8px 8px 0;vertical-align:bottom;border-bottom:2px solid rgba(0, 0, 0, .125);">Prop</th><th style="text-align:left;padding:8px 8px 8px 0;vertical-align:bottom;border-bottom:2px solid rgba(0, 0, 0, .125);">Type</th><th style="text-align:left;padding:8px 8px 8px 0;vertical-align:bottom;border-bottom:2px solid rgba(0, 0, 0, .125);">Description</th></tr></thead><tbody><tr><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;" title="Required">links *</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;">array</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);">Array of link props</td></tr></tbody></table></div><div style="box-sizing:border-box;padding-top:16px;" class="Box"><div style="display:flex;margin-left:-8px;margin-right:-8px;" class="Flex"><div style="box-sizing:border-box;flex:1 1 auto;" class="Box"></div><a href="#" class="NavItem" style="font-size:12px;font-weight:600;line-height:1rem;text-decoration:none;display:flex;align-items:center;align-self:stretch;padding:4px 8px;color:inherit;cursor:pointer;">Back to Top</a></div></div></section><section id="Button" class="Section" style="padding-top:64px;padding-bottom:64px;"><header class="SectionHeader" style="display:flex;align-items:center;padding-bottom:8px;margin-top:32px;margin-bottom:32px;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:rgba(0, 0, 0, .25);border-color:inherit;"><div style="flex:1 1 auto;"><h2 class="Heading" style="font-size:24px;font-weight:600;margin:0;"><a href="#Button" style="color:inherit;text-decoration:none;">Button</a></h2><p class="Text" style="font-size:16px;margin:0;">A general purpose button element with customizable colors</p></div></header><div class="Panel" style="padding:16px;margin-bottom:16px;background-color:#fff;border-width:1px;border-style:solid;border-color:#111;border-radius:2px;"><div class="PanelHeader" style="display:flex;align-items:center;font-weight:bold;margin-top:-17px;margin-right:-17px;margin-left:-17px;margin-bottom:16px;padding:16px;color:#fff;background-color:#111;border-radius:2px 2px 0 0;">Example</div><div class="mb2"><div><button class="Button" style="font-family:inherit;font-size:14px;font-weight:600;line-height:16px;text-decoration:none;display:inline-block;margin:0;padding:8px 16px;cursor:pointer;border:0;color:#fff;background-color:#08e;border-radius:2px;">Button</button></div><pre class="Pre" style="font-family:'Roboto Mono', Menlo, Consolas, monospace;padding-left:16px;margin-bottom:16px;border-left:4px solid rgba(0, 0, 0, .25);overflow-x:scroll;"><div>
<Button rounded={true}>
Button
</Button>
</div></pre></div><div class="Permutations"><p class="Text" style="font-size:12px;margin:0;">Variations</p><div style="position:relative;margin-bottom:16px;"><div><button title="<Button rounded={true} pill={true} big={true} />" name="Button" class="Button" style="font-family:inherit;font-size:14px;font-weight:600;line-height:16px;text-decoration:none;display:inline-block;margin:0;padding:16px;cursor:pointer;border:0;color:#fff;background-color:#08e;border-radius:99999px;margin-right:16px;">Button</button><button title="<Button rounded={true} pill={true} big={false} />" name="Button" class="Button" style="font-family:inherit;font-size:14px;font-weight:600;line-height:16px;text-decoration:none;display:inline-block;margin:0;padding:8px 16px;cursor:pointer;border:0;color:#fff;background-color:#08e;border-radius:99999px;margin-right:16px;">Button</button><button title="<Button rounded={true} pill={false} big={true} />" name="Button" class="Button" style="font-family:inherit;font-size:14px;font-weight:600;line-height:16px;text-decoration:none;display:inline-block;margin:0;padding:16px;cursor:pointer;border:0;color:#fff;background-color:#08e;border-radius:2px;margin-right:16px;">Button</button><button title="<Button rounded={true} pill={false} big={false} />" name="Button" class="Button" style="font-family:inherit;font-size:14px;font-weight:600;line-height:16px;text-decoration:none;display:inline-block;margin:0;padding:8px 16px;cursor:pointer;border:0;color:#fff;background-color:#08e;border-radius:2px;margin-right:16px;">Button</button></div></div></div></div><div style="max-width:100%;overflow-x:scroll;"><table style="font-size:14px;line-height:1.125;min-width:512px;border-collapse:separate;border-spacing:0;max-width:100%;width:100%;"><thead><tr><th style="text-align:left;padding:8px 8px 8px 0;vertical-align:bottom;border-bottom:2px solid rgba(0, 0, 0, .125);">Prop</th><th style="text-align:left;padding:8px 8px 8px 0;vertical-align:bottom;border-bottom:2px solid rgba(0, 0, 0, .125);">Type</th><th style="text-align:left;padding:8px 8px 8px 0;vertical-align:bottom;border-bottom:2px solid rgba(0, 0, 0, .125);">Description</th></tr></thead><tbody><tr><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;" title="false">href </td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;">string</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);">Pass an href prop to make the Button an <a> tag instead of a <button></td></tr><tr><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;" title="false">color </td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;">string</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);">Button color - can either be a key from the theme colors object or any color value</td></tr><tr><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;" title="false">backgroundColor </td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;">string</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);">Background color - can either be a key from the theme colors object or any color value</td></tr><tr><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;" title="false">rounded </td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;">oneOfType([bool, oneOf(['top', 'right', 'bottom', 'left'])])</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);">Controls the border radius for creating button groups</td></tr><tr><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;" title="false">pill </td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;">bool</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);">Creates a pill style button</td></tr><tr><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;" title="false">big </td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;">bool</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);">Creates a larger button</td></tr></tbody></table></div><div style="box-sizing:border-box;padding-top:16px;" class="Box"><div style="display:flex;margin-left:-8px;margin-right:-8px;" class="Flex"><div style="box-sizing:border-box;flex:1 1 auto;" class="Box"></div><a href="#" class="NavItem" style="font-size:12px;font-weight:600;line-height:1rem;text-decoration:none;display:flex;align-items:center;align-self:stretch;padding:4px 8px;color:inherit;cursor:pointer;">Back to Top</a></div></div></section><section id="ButtonCircle" class="Section" style="padding-top:64px;padding-bottom:64px;"><header class="SectionHeader" style="display:flex;align-items:center;padding-bottom:8px;margin-top:32px;margin-bottom:32px;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:rgba(0, 0, 0, .25);border-color:inherit;"><div style="flex:1 1 auto;"><h2 class="Heading" style="font-size:24px;font-weight:600;margin:0;"><a href="#ButtonCircle" style="color:inherit;text-decoration:none;">ButtonCircle</a></h2><p class="Text" style="font-size:16px;margin:0;">A circular button suited for use with icons</p></div></header><div class="Panel" style="padding:16px;margin-bottom:16px;background-color:#fff;border-width:1px;border-style:solid;border-color:#111;border-radius:2px;"><div class="PanelHeader" style="display:flex;align-items:center;font-weight:bold;margin-top:-17px;margin-right:-17px;margin-left:-17px;margin-bottom:16px;padding:16px;color:#fff;background-color:#111;border-radius:2px 2px 0 0;">Example</div><div class="mb2"><div style="display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;" class="Flex"><button title="Like" class="ButtonCircle" style="font-family:inherit;font-size:inherit;line-height:16px;text-decoration:none;box-sizing:border-box;display:inline-block;width:32px;height:32px;margin:0;padding:0;cursor:pointer;color:#fff;background-color:#08e;border:0;border-radius:99999px;"><div style="display:flex;width:32px;height:32px;align-items:center;justify-content:center;"><svg name="heart" width="1em" height="1em" fill="currentColor" viewBox="0 0 32 32"><path d="M0 10 C0 6, 3 2, 8 2 C12 2, 15 5, 16 6 C17 5, 20 2, 24 2 C30 2, 32 6, 32 10 C32 18, 18 29, 16 30 C14 29, 0 18, 0 10 "></path></svg></div></button><button title="Comment" class="ButtonCircle" style="font-family:inherit;font-size:inherit;line-height:16px;text-decoration:none;box-sizing:border-box;display:inline-block;width:32px;height:32px;margin:0;padding:0;cursor:pointer;color:#fff;background-color:#08e;border:0;border-radius:99999px;"><div style="display:flex;width:32px;height:32px;align-items:center;justify-content:center;"><svg name="chat" width="1em" height="1em" fill="currentColor" viewBox="0 0 32 32"><path d="M32 16 A16 12 0 0 0 0 16 A16 12 0 0 0 16 28 L18 28 C20 30 24 32 28 32 C27 31 26 28 26 25.375 L26 25.375 A16 12 0 0 0 32 16 "></path></svg></div></button><button title="Repost" class="ButtonCircle" style="font-family:inherit;font-size:inherit;line-height:16px;text-decoration:none;box-sizing:border-box;display:inline-block;width:32px;height:32px;margin:0;padding:0;cursor:pointer;color:#fff;background-color:#08e;border:0;border-radius:99999px;"><div style="display:flex;width:32px;height:32px;align-items:center;justify-content:center;"><svg name="repost" width="1em" height="1em" fill="currentColor" viewBox="0 0 32 32"><path d="M7 7 L14 14 L9 14 L9 20 L16 20 L16 24 L5 24 L5 14 L0 14 z M16 8 L27 8 L27 18 L32 18 L25 25 L18 18 L23 18 L23 12 L16 12z "></path></svg></div></button><button title="Bookmark" class="ButtonCircle" style="font-family:inherit;font-size:inherit;line-height:16px;text-decoration:none;box-sizing:border-box;display:inline-block;width:32px;height:32px;margin:0;padding:0;cursor:pointer;color:#fff;background-color:#08e;border:0;border-radius:99999px;"><div style="display:flex;width:32px;height:32px;align-items:center;justify-content:center;"><svg name="bookmark" width="1em" height="1em" fill="currentColor" viewBox="0 0 32 32"><path d="M6 2 L26 2 L26 30 L16 24 L6 30 Z "></path></svg></div></button><button title="Tag" class="ButtonCircle" style="font-family:inherit;font-size:inherit;line-height:16px;text-decoration:none;box-sizing:border-box;display:inline-block;width:32px;height:32px;margin:0;padding:0;cursor:pointer;color:#fff;background-color:#08e;border:0;border-radius:99999px;"><div style="display:flex;width:32px;height:32px;align-items:center;justify-content:center;"><svg name="tag" width="1em" height="1em" fill="currentColor" viewBox="0 0 32 32"><path d="M0 18 L16 2 L29 3 L30 16 L14 32 z M20 9 A3 3 0 0 0 26 9 A3 3 0 0 0 20 9 "></path></svg></div></button></div><pre class="Pre" style="font-family:'Roboto Mono', Menlo, Consolas, monospace;padding-left:16px;margin-bottom:16px;border-left:4px solid rgba(0, 0, 0, .25);overflow-x:scroll;"><Flex
align="center"
justify="space-between"
wrap={true}
>
<ButtonCircle title="Like">
<Icon
fill="currentColor"
height="1em"
name="heart"
width="1em"
/>
</ButtonCircle>
<ButtonCircle title="Comment">
<Icon
fill="currentColor"
height="1em"
name="chat"
width="1em"
/>
</ButtonCircle>
<ButtonCircle title="Repost">
<Icon
fill="currentColor"
height="1em"
name="repost"
width="1em"
/>
</ButtonCircle>
<ButtonCircle title="Bookmark">
<Icon
fill="currentColor"
height="1em"
name="bookmark"
width="1em"
/>
</ButtonCircle>
<ButtonCircle title="Tag">
<Icon
fill="currentColor"
height="1em"
name="tag"
width="1em"
/>
</ButtonCircle>
</Flex></pre></div><div></div></div><div style="max-width:100%;overflow-x:scroll;"><table style="font-size:14px;line-height:1.125;min-width:512px;border-collapse:separate;border-spacing:0;max-width:100%;width:100%;"><thead><tr><th style="text-align:left;padding:8px 8px 8px 0;vertical-align:bottom;border-bottom:2px solid rgba(0, 0, 0, .125);">Prop</th><th style="text-align:left;padding:8px 8px 8px 0;vertical-align:bottom;border-bottom:2px solid rgba(0, 0, 0, .125);">Type</th><th style="text-align:left;padding:8px 8px 8px 0;vertical-align:bottom;border-bottom:2px solid rgba(0, 0, 0, .125);">Description</th></tr></thead><tbody><tr><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;" title="false">href </td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;">string</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);">Pass an href prop to make the ButtonCircle an <a> tag instead of a <button></td></tr><tr><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;" title="false">color </td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;">string</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);">Text color - can either be a key from the theme colors object or any color value</td></tr><tr><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;" title="false">backgroundColor </td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;">string</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);">Background color - can either be a key from the theme colors object or any color value</td></tr><tr><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;" title="false">size </td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;">number</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);">Sets width and height of button</td></tr></tbody></table></div><div style="box-sizing:border-box;padding-top:16px;" class="Box"><div style="display:flex;margin-left:-8px;margin-right:-8px;" class="Flex"><div style="box-sizing:border-box;flex:1 1 auto;" class="Box"></div><a href="#" class="NavItem" style="font-size:12px;font-weight:600;line-height:1rem;text-decoration:none;display:flex;align-items:center;align-self:stretch;padding:4px 8px;color:inherit;cursor:pointer;">Back to Top</a></div></div></section><section id="ButtonOutline" class="Section" style="padding-top:64px;padding-bottom:64px;"><header class="SectionHeader" style="display:flex;align-items:center;padding-bottom:8px;margin-top:32px;margin-bottom:32px;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:rgba(0, 0, 0, .25);border-color:inherit;"><div style="flex:1 1 auto;"><h2 class="Heading" style="font-size:24px;font-weight:600;margin:0;"><a href="#ButtonOutline" style="color:inherit;text-decoration:none;">ButtonOutline</a></h2><p class="Text" style="font-size:16px;margin:0;">A general purpose outline style button element with customizable colors</p></div></header><div class="Panel" style="padding:16px;margin-bottom:16px;background-color:#fff;border-width:1px;border-style:solid;border-color:#111;border-radius:2px;"><div class="PanelHeader" style="display:flex;align-items:center;font-weight:bold;margin-top:-17px;margin-right:-17px;margin-left:-17px;margin-bottom:16px;padding:16px;color:#fff;background-color:#111;border-radius:2px 2px 0 0;">Example</div><div class="mb2"><div><button class="ButtonOutline" style="font-family:inherit;font-size:14px;font-weight:600;line-height:16px;text-decoration:none;display:inline-block;margin:0;padding:8px 16px;cursor:pointer;border:0;color:#08e;background-color:transparent;box-shadow:inset 0 0 0 1px;border-radius:2px 0 0 2px;">Button</button><button class="ButtonOutline" style="font-family:inherit;font-size:14px;font-weight:600;line-height:16px;text-decoration:none;display:inline-block;margin:0;padding:8px 16px;cursor:pointer;border:0;color:#08e;background-color:transparent;box-shadow:inset 0 0 0 1px;border-radius:0;margin-left:-1px;">Group</button><button class="Button" style="font-family:inherit;font-size:14px;font-weight:600;line-height:16px;text-decoration:none;display:inline-block;margin:0;padding:8px 16px;cursor:pointer;border:0;color:#fff;background-color:#08e;border-radius:0 2px 2px 0;margin-left:-1px;">Button</button></div><pre class="Pre" style="font-family:'Roboto Mono', Menlo, Consolas, monospace;padding-left:16px;margin-bottom:16px;border-left:4px solid rgba(0, 0, 0, .25);overflow-x:scroll;"><div>
<ButtonOutline rounded="left">
Button
</ButtonOutline>
<ButtonOutline
rounded={false}
style={{marginLeft: -1}}
>
Group
</ButtonOutline>
<Button
rounded="right"
style={{marginLeft: -1}}
>
Button
</Button>
</div></pre></div><div class="Permutations"><p class="Text" style="font-size:12px;margin:0;">Variations</p><div style="position:relative;margin-bottom:16px;"><div><button title="<ButtonOutline rounded={true} pill={true} big={true} />" name="ButtonOutline" class="ButtonOutline" style="font-family:inherit;font-size:14px;font-weight:600;line-height:16px;text-decoration:none;display:inline-block;margin:0;padding:16px;cursor:pointer;border:0;color:#08e;background-color:transparent;box-shadow:inset 0 0 0 1px;border-radius:99999px;margin-right:16px;">ButtonOutline</button><button title="<ButtonOutline rounded={true} pill={true} big={false} />" name="ButtonOutline" class="ButtonOutline" style="font-family:inherit;font-size:14px;font-weight:600;line-height:16px;text-decoration:none;display:inline-block;margin:0;padding:8px 16px;cursor:pointer;border:0;color:#08e;background-color:transparent;box-shadow:inset 0 0 0 1px;border-radius:99999px;margin-right:16px;">ButtonOutline</button><button title="<ButtonOutline rounded={true} pill={false} big={true} />" name="ButtonOutline" class="ButtonOutline" style="font-family:inherit;font-size:14px;font-weight:600;line-height:16px;text-decoration:none;display:inline-block;margin:0;padding:16px;cursor:pointer;border:0;color:#08e;background-color:transparent;box-shadow:inset 0 0 0 1px;border-radius:2px;margin-right:16px;">ButtonOutline</button><button title="<ButtonOutline rounded={true} pill={false} big={false} />" name="ButtonOutline" class="ButtonOutline" style="font-family:inherit;font-size:14px;font-weight:600;line-height:16px;text-decoration:none;display:inline-block;margin:0;padding:8px 16px;cursor:pointer;border:0;color:#08e;background-color:transparent;box-shadow:inset 0 0 0 1px;border-radius:2px;margin-right:16px;">ButtonOutline</button></div></div></div></div><div style="max-width:100%;overflow-x:scroll;"><table style="font-size:14px;line-height:1.125;min-width:512px;border-collapse:separate;border-spacing:0;max-width:100%;width:100%;"><thead><tr><th style="text-align:left;padding:8px 8px 8px 0;vertical-align:bottom;border-bottom:2px solid rgba(0, 0, 0, .125);">Prop</th><th style="text-align:left;padding:8px 8px 8px 0;vertical-align:bottom;border-bottom:2px solid rgba(0, 0, 0, .125);">Type</th><th style="text-align:left;padding:8px 8px 8px 0;vertical-align:bottom;border-bottom:2px solid rgba(0, 0, 0, .125);">Description</th></tr></thead><tbody><tr><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;" title="false">href </td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;">string</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);">Pass an href prop to make the ButtonOutline an <a> tag instead of a <button></td></tr><tr><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;" title="false">color </td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;">string</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);">Text color</td></tr><tr><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;" title="false">rounded </td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;">oneOfType([bool, oneOf(['top', 'right', 'bottom', 'left'])])</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);">Controls the border radius for creating button groups</td></tr><tr><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;" title="false">pill </td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;">bool</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);">Creates a pill style button</td></tr><tr><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;" title="false">big </td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;">bool</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);">Creates a larger button</td></tr></tbody></table></div><div style="box-sizing:border-box;padding-top:16px;" class="Box"><div style="display:flex;margin-left:-8px;margin-right:-8px;" class="Flex"><div style="box-sizing:border-box;flex:1 1 auto;" class="Box"></div><a href="#" class="NavItem" style="font-size:12px;font-weight:600;line-height:1rem;text-decoration:none;display:flex;align-items:center;align-self:stretch;padding:4px 8px;color:inherit;cursor:pointer;">Back to Top</a></div></div></section><section id="Card" class="Section" style="padding-top:64px;padding-bottom:64px;"><header class="SectionHeader" style="display:flex;align-items:center;padding-bottom:8px;margin-top:32px;margin-bottom:32px;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:rgba(0, 0, 0, .25);border-color:inherit;"><div style="flex:1 1 auto;"><h2 class="Heading" style="font-size:24px;font-weight:600;margin:0;"><a href="#Card" style="color:inherit;text-decoration:none;">Card</a></h2><p class="Text" style="font-size:16px;margin:0;">Styled box with border</p></div></header><div class="Panel" style="padding:16px;margin-bottom:16px;background-color:#fff;border-width:1px;border-style:solid;border-color:#111;border-radius:2px;"><div class="PanelHeader" style="display:flex;align-items:center;font-weight:bold;margin-top:-17px;margin-right:-17px;margin-left:-17px;margin-bottom:16px;padding:16px;color:#fff;background-color:#111;border-radius:2px 2px 0 0;">Example</div><div class="mb2"><div class="Card" style="display:flex;width:256px;flex-direction:column;padding:8px;margin-bottom:16px;border-radius:2px;border-width:1px;border-style:solid;border-color:rgba(0, 0, 0, .25);overflow:hidden;"><img class="CardImage" src="http://placehold.it/320/08e/fff" style="display:block;width:calc(100% + 16px);max-width:none;height:auto;margin:-8px;margin-bottom:8px;"/><h2 class="Heading" style="font-size:20px;font-weight:600;margin:0;">Card</h2><p class="Text" style="font-size:16px;margin:0;">Cats like cards too</p></div><pre class="Pre" style="font-family:'Roboto Mono', Menlo, Consolas, monospace;padding-left:16px;margin-bottom:16px;border-left:4px solid rgba(0, 0, 0, .25);overflow-x:scroll;"><Card width={256}>
<CardImage src="http://placehold.it/320/08e/fff" />
<Heading
level={2}
size={3}
>
Card
</Heading>
<Text>
Cats like cards too
</Text>
</Card></pre></div><div></div></div><div style="max-width:100%;overflow-x:scroll;"><table style="font-size:14px;line-height:1.125;min-width:512px;border-collapse:separate;border-spacing:0;max-width:100%;width:100%;"><thead><tr><th style="text-align:left;padding:8px 8px 8px 0;vertical-align:bottom;border-bottom:2px solid rgba(0, 0, 0, .125);">Prop</th><th style="text-align:left;padding:8px 8px 8px 0;vertical-align:bottom;border-bottom:2px solid rgba(0, 0, 0, .125);">Type</th><th style="text-align:left;padding:8px 8px 8px 0;vertical-align:bottom;border-bottom:2px solid rgba(0, 0, 0, .125);">Description</th></tr></thead><tbody><tr><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;" title="false">width </td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;">oneOfType([number, string])</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);">Width of card</td></tr></tbody></table></div><div style="box-sizing:border-box;padding-top:16px;" class="Box"><div style="display:flex;margin-left:-8px;margin-right:-8px;" class="Flex"><div style="box-sizing:border-box;flex:1 1 auto;" class="Box"></div><a href="#" class="NavItem" style="font-size:12px;font-weight:600;line-height:1rem;text-decoration:none;display:flex;align-items:center;align-self:stretch;padding:4px 8px;color:inherit;cursor:pointer;">Back to Top</a></div></div></section><section id="CardImage" class="Section" style="padding-top:64px;padding-bottom:64px;"><header class="SectionHeader" style="display:flex;align-items:center;padding-bottom:8px;margin-top:32px;margin-bottom:32px;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:rgba(0, 0, 0, .25);border-color:inherit;"><div style="flex:1 1 auto;"><h2 class="Heading" style="font-size:24px;font-weight:600;margin:0;"><a href="#CardImage" style="color:inherit;text-decoration:none;">CardImage</a></h2><p class="Text" style="font-size:16px;margin:0;">Image for use within the Card component</p></div></header><div class="Panel" style="padding:16px;margin-bottom:16px;background-color:#fff;border-width:1px;border-style:solid;border-color:#111;border-radius:2px;"><div class="PanelHeader" style="display:flex;align-items:center;font-weight:bold;margin-top:-17px;margin-right:-17px;margin-left:-17px;margin-bottom:16px;padding:16px;color:#fff;background-color:#111;border-radius:2px 2px 0 0;">Example</div><div class="mb2"><div style="max-width:192px;"><img class="CardImage" src="http://placehold.it/320/08e/fff" style="display:block;width:calc(100% + 16px);max-width:none;height:auto;margin:-8px;margin-bottom:8px;"/></div><pre class="Pre" style="font-family:'Roboto Mono', Menlo, Consolas, monospace;padding-left:16px;margin-bottom:16px;border-left:4px solid rgba(0, 0, 0, .25);overflow-x:scroll;"><div style={{maxWidth: 192}}>
<CardImage src="http://placehold.it/320/08e/fff" />
</div></pre></div><div></div></div><div style="max-width:100%;overflow-x:scroll;"><table style="font-size:14px;line-height:1.125;min-width:512px;border-collapse:separate;border-spacing:0;max-width:100%;width:100%;"><thead><tr><th style="text-align:left;padding:8px 8px 8px 0;vertical-align:bottom;border-bottom:2px solid rgba(0, 0, 0, .125);">Prop</th><th style="text-align:left;padding:8px 8px 8px 0;vertical-align:bottom;border-bottom:2px solid rgba(0, 0, 0, .125);">Type</th><th style="text-align:left;padding:8px 8px 8px 0;vertical-align:bottom;border-bottom:2px solid rgba(0, 0, 0, .125);">Description</th></tr></thead><tbody><tr><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;" title="Required">src *</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;">string</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);">Image source</td></tr></tbody></table></div><div style="box-sizing:border-box;padding-top:16px;" class="Box"><div style="display:flex;margin-left:-8px;margin-right:-8px;" class="Flex"><div style="box-sizing:border-box;flex:1 1 auto;" class="Box"></div><a href="#" class="NavItem" style="font-size:12px;font-weight:600;line-height:1rem;text-decoration:none;display:flex;align-items:center;align-self:stretch;padding:4px 8px;color:inherit;cursor:pointer;">Back to Top</a></div></div></section><section id="Checkbox" class="Section" style="padding-top:64px;padding-bottom:64px;"><header class="SectionHeader" style="display:flex;align-items:center;padding-bottom:8px;margin-top:32px;margin-bottom:32px;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:rgba(0, 0, 0, .25);border-color:inherit;"><div style="flex:1 1 auto;"><h2 class="Heading" style="font-size:24px;font-weight:600;margin:0;"><a href="#Checkbox" style="color:inherit;text-decoration:none;">Checkbox</a></h2><p class="Text" style="font-size:16px;margin:0;">Checkbox input with label</p></div></header><div class="Panel" style="padding:16px;margin-bottom:16px;background-color:#fff;border-width:1px;border-style:solid;border-color:#111;border-radius:2px;"><div class="PanelHeader" style="display:flex;align-items:center;font-weight:bold;margin-top:-17px;margin-right:-17px;margin-left:-17px;margin-bottom:16px;padding:16px;color:#fff;background-color:#111;border-radius:2px 2px 0 0;">Example</div><div class="mb2"><div class="Checkbox"><label class="Label" style="font-size:14px;font-weight:600;display:flex;align-items:baseline;cursor:pointer;"><input type="checkbox" style="margin-right:8px;"/>Checkbox</label></div><pre class="Pre" style="font-family:'Roboto Mono', Menlo, Consolas, monospace;padding-left:16px;margin-bottom:16px;border-left:4px solid rgba(0, 0, 0, .25);overflow-x:scroll;"><Checkbox
label="Checkbox"
name="checkbox_example"
/></pre></div><div></div></div><div style="max-width:100%;overflow-x:scroll;"><table style="font-size:14px;line-height:1.125;min-width:512px;border-collapse:separate;border-spacing:0;max-width:100%;width:100%;"><thead><tr><th style="text-align:left;padding:8px 8px 8px 0;vertical-align:bottom;border-bottom:2px solid rgba(0, 0, 0, .125);">Prop</th><th style="text-align:left;padding:8px 8px 8px 0;vertical-align:bottom;border-bottom:2px solid rgba(0, 0, 0, .125);">Type</th><th style="text-align:left;padding:8px 8px 8px 0;vertical-align:bottom;border-bottom:2px solid rgba(0, 0, 0, .125);">Description</th></tr></thead><tbody><tr><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;" title="Required">label *</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;">string</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);">Label for form element</td></tr><tr><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;" title="Required">name *</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;">string</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);">Name attribute for form element</td></tr></tbody></table></div><div style="box-sizing:border-box;padding-top:16px;" class="Box"><div style="display:flex;margin-left:-8px;margin-right:-8px;" class="Flex"><div style="box-sizing:border-box;flex:1 1 auto;" class="Box"></div><a href="#" class="NavItem" style="font-size:12px;font-weight:600;line-height:1rem;text-decoration:none;display:flex;align-items:center;align-self:stretch;padding:4px 8px;color:inherit;cursor:pointer;">Back to Top</a></div></div></section><section id="Close" class="Section" style="padding-top:64px;padding-bottom:64px;"><header class="SectionHeader" style="display:flex;align-items:center;padding-bottom:8px;margin-top:32px;margin-bottom:32px;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:rgba(0, 0, 0, .25);border-color:inherit;"><div style="flex:1 1 auto;"><h2 class="Heading" style="font-size:24px;font-weight:600;margin:0;"><a href="#Close" style="color:inherit;text-decoration:none;">Close</a></h2><p class="Text" style="font-size:16px;margin:0;">A button with an × for close and dismiss actions</p></div></header><div class="Panel" style="padding:16px;margin-bottom:16px;background-color:#fff;border-width:1px;border-style:solid;border-color:#111;border-radius:2px;"><div class="PanelHeader" style="display:flex;align-items:center;font-weight:bold;margin-top:-17px;margin-right:-17px;margin-left:-17px;margin-bottom:16px;padding:16px;color:#fff;background-color:#111;border-radius:2px 2px 0 0;">Example</div><div class="mb2"><button class="Close" title="Close" style="font-size:1.5em;line-height:1;font-weight:bold;margin:0;padding:0;cursor:pointer;color:inherit;background-color:transparent;border:0;-webkit-appearance:none;">×</button><pre class="Pre" style="font-family:'Roboto Mono', Menlo, Consolas, monospace;padding-left:16px;margin-bottom:16px;border-left:4px solid rgba(0, 0, 0, .25);overflow-x:scroll;"><Close /></pre></div><div></div></div><div></div><div style="box-sizing:border-box;padding-top:16px;" class="Box"><div style="display:flex;margin-left:-8px;margin-right:-8px;" class="Flex"><div style="box-sizing:border-box;flex:1 1 auto;" class="Box"></div><a href="#" class="NavItem" style="font-size:12px;font-weight:600;line-height:1rem;text-decoration:none;display:flex;align-items:center;align-self:stretch;padding:4px 8px;color:inherit;cursor:pointer;">Back to Top</a></div></div></section><section id="Container" class="Section" style="padding-top:64px;padding-bottom:64px;"><header class="SectionHeader" style="display:flex;align-items:center;padding-bottom:8px;margin-top:32px;margin-bottom:32px;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:rgba(0, 0, 0, .25);border-color:inherit;"><div style="flex:1 1 auto;"><h2 class="Heading" style="font-size:24px;font-weight:600;margin:0;"><a href="#Container" style="color:inherit;text-decoration:none;">Container</a></h2><p class="Text" style="font-size:16px;margin:0;">Div with max-width and margin auto for centering content</p></div></header><div class="Panel" style="padding:16px;margin-bottom:16px;background-color:#fff;border-width:1px;border-style:solid;border-color:#111;border-radius:2px;"><div class="PanelHeader" style="display:flex;align-items:center;font-weight:bold;margin-top:-17px;margin-right:-17px;margin-left:-17px;margin-bottom:16px;padding:16px;color:#fff;background-color:#111;border-radius:2px 2px 0 0;">Example</div><div class="mb2"><div class="Container" style="max-width:1024px;padding-left:16px;padding-right:16px;margin:auto;">Container</div><pre class="Pre" style="font-family:'Roboto Mono', Menlo, Consolas, monospace;padding-left:16px;margin-bottom:16px;border-left:4px solid rgba(0, 0, 0, .25);overflow-x:scroll;"><Container>
Container
</Container></pre></div><div></div></div><div></div><div style="box-sizing:border-box;padding-top:16px;" class="Box"><div style="display:flex;margin-left:-8px;margin-right:-8px;" class="Flex"><div style="box-sizing:border-box;flex:1 1 auto;" class="Box"></div><a href="#" class="NavItem" style="font-size:12px;font-weight:600;line-height:1rem;text-decoration:none;display:flex;align-items:center;align-self:stretch;padding:4px 8px;color:inherit;cursor:pointer;">Back to Top</a></div></div></section><section id="Divider" class="Section" style="padding-top:64px;padding-bottom:64px;"><header class="SectionHeader" style="display:flex;align-items:center;padding-bottom:8px;margin-top:32px;margin-bottom:32px;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:rgba(0, 0, 0, .25);border-color:inherit;"><div style="flex:1 1 auto;"><h2 class="Heading" style="font-size:24px;font-weight:600;margin:0;"><a href="#Divider" style="color:inherit;text-decoration:none;">Divider</a></h2><p class="Text" style="font-size:16px;margin:0;">Styled hr element</p></div></header><div class="Panel" style="padding:16px;margin-bottom:16px;background-color:#fff;border-width:1px;border-style:solid;border-color:#111;border-radius:2px;"><div class="PanelHeader" style="display:flex;align-items:center;font-weight:bold;margin-top:-17px;margin-right:-17px;margin-left:-17px;margin-bottom:16px;padding:16px;color:#fff;background-color:#111;border-radius:2px 2px 0 0;">Example</div><div class="mb2"><div><hr class="Divider" style="margin-top:16px;margin-bottom:16px;border:0;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:rgba(0, 0, 0, .25);border-color:inherit;"/><hr class="Divider" style="width:128px;margin-top:16px;margin-bottom:16px;border:0;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:rgba(0, 0, 0, .25);border-color:inherit;margin-left:0;"/></div><pre class="Pre" style="font-family:'Roboto Mono', Menlo, Consolas, monospace;padding-left:16px;margin-bottom:16px;border-left:4px solid rgba(0, 0, 0, .25);overflow-x:scroll;"><div>
<Divider />
<Divider
ml={0}
width={128}
/>
</div></pre></div><div></div></div><div style="max-width:100%;overflow-x:scroll;"><table style="font-size:14px;line-height:1.125;min-width:512px;border-collapse:separate;border-spacing:0;max-width:100%;width:100%;"><thead><tr><th style="text-align:left;padding:8px 8px 8px 0;vertical-align:bottom;border-bottom:2px solid rgba(0, 0, 0, .125);">Prop</th><th style="text-align:left;padding:8px 8px 8px 0;vertical-align:bottom;border-bottom:2px solid rgba(0, 0, 0, .125);">Type</th><th style="text-align:left;padding:8px 8px 8px 0;vertical-align:bottom;border-bottom:2px solid rgba(0, 0, 0, .125);">Description</th></tr></thead><tbody><tr><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;" title="false">width </td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;">number</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);">Sets a fixed width for stylistic options</td></tr></tbody></table></div><div style="box-sizing:border-box;padding-top:16px;" class="Box"><div style="display:flex;margin-left:-8px;margin-right:-8px;" class="Flex"><div style="box-sizing:border-box;flex:1 1 auto;" class="Box"></div><a href="#" class="NavItem" style="font-size:12px;font-weight:600;line-height:1rem;text-decoration:none;display:flex;align-items:center;align-self:stretch;padding:4px 8px;color:inherit;cursor:pointer;">Back to Top</a></div></div></section><section id="Donut" class="Section" style="padding-top:64px;padding-bottom:64px;"><header class="SectionHeader" style="display:flex;align-items:center;padding-bottom:8px;margin-top:32px;margin-bottom:32px;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:rgba(0, 0, 0, .25);border-color:inherit;"><div style="flex:1 1 auto;"><h2 class="Heading" style="font-size:24px;font-weight:600;margin:0;"><a href="#Donut" style="color:inherit;text-decoration:none;">Donut</a></h2><p class="Text" style="font-size:16px;margin:0;">A single-value donut chart with percentage</p></div></header><div class="Panel" style="padding:16px;margin-bottom:16px;background-color:#fff;border-width:1px;border-style:solid;border-color:#111;border-radius:2px;"><div class="PanelHeader" style="display:flex;align-items:center;font-weight:bold;margin-top:-17px;margin-right:-17px;margin-left:-17px;margin-bottom:16px;padding:16px;color:#fff;background-color:#111;border-radius:2px 2px 0 0;">Example</div><div class="mb2"><div style="display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;" class="Flex"><div class="Donut" style="position:relative;display:inline-flex;align-items:center;justify-content:center;font-size:64px;font-weight:600;line-height:1;width:256px;height:256px;color:#08e;"><svg viewBox="0 0 256 256" width="256" height="256" style="position:absolute;top:0;right:0;bottom:0;left:0;fill:currentcolor;"><path d="M 128 0 A 128 128 0 0 1 128 256 A 128 128 0 0 1 128 0 M 128 32 A 96 96 0 0 0 128 224 A 96 96 0 0 0 128 32" style="opacity:0.0625;"></path><path d="M 128 0 A 128 128 0 1 1 79.01652065726852 246.2565801614447 L 91.26239049295138 216.69243512108352 A 96 96 0 1 0 128 32"></path></svg><span style="margin-right:-.25em;">56<span style="font-size:.5em;vertical-align:super;">%</span></span></div><div class="Donut" style="position:relative;display:inline-flex;align-items:center;justify-content:center;font-size:32px;font-weight:600;line-height:1;width:128px;height:128px;color:#08e;"><svg viewBox="0 0 128 128" width="128" height="128" style="position:absolute;top:0;right:0;bottom:0;left:0;fill:currentcolor;"><path d="M 64 0 A 64 64 0 0 1 64 128 A 64 64 0 0 1 64 0 M 64 8 A 56 56 0 0 0 64 120 A 56 56 0 0 0 64 8" style="opacity:0.0625;"></path><path d="M 64 0 A 64 64 0 1 1 39.50826032863426 123.12829008072235 L 42.569727787554974 115.73725382063205 A 56 56 0 1 0 64 8"></path></svg>9/16</div><div class="Donut" style="position:relative;display:inline-flex;align-items:center;justify-content:center;font-size:32px;font-weight:600;line-height:1;width:128px;height:128px;color:#08e;"><svg viewBox="0 0 128 128" width="128" height="128" style="position:absolute;top:0;right:0;bottom:0;left:0;fill:currentcolor;"><path d="M 64 0 A 64 64 0 0 1 64 128 A 64 64 0 0 1 64 0 M 64 8 A 56 56 0 0 0 64 120 A 56 56 0 0 0 64 8" style="opacity:0.0625;"></path><path d="M 64 0 A 64 64 0 1 1 18.745166004060962 109.25483399593904 L 24.402020253553346 103.59797974644667 A 56 56 0 1 0 64 8"></path></svg><span style="margin-right:-.25em;">63<span style="font-size:.5em;vertical-align:super;">%</span></span></div><div class="Donut" style="position:relative;display:inline-flex;align-items:center;justify-content:center;font-size:32px;font-weight:600;line-height:1;width:128px;height:128px;color:#08e;"><svg viewBox="0 0 128 128" width="128" height="128" style="position:absolute;top:0;right:0;bottom:0;left:0;fill:currentcolor;"><path d="M 64 0 A 64 64 0 0 1 64 128 A 64 64 0 0 1 64 0 M 64 8 A 56 56 0 0 0 64 120 A 56 56 0 0 0 64 8" style="opacity:0.0625;"></path><path d="M 64 0 A 64 64 0 0 1 109.25483399593904 18.745166004060962 L 103.59797974644667 24.402020253553346 A 56 56 0 0 0 64 8"></path></svg><span style="margin-right:-.25em;">13<span style="font-size:.5em;vertical-align:super;">%</span></span></div></div><pre class="Pre" style="font-family:'Roboto Mono', Menlo, Consolas, monospace;padding-left:16px;margin-bottom:16px;border-left:4px solid rgba(0, 0, 0, .25);overflow-x:scroll;"><Flex
align="center"
justify="space-between"
wrap={true}
>
<Donut
size={256}
strokeWidth={32}
value={0.5625}
/>
<Donut
size={128}
strokeWidth={8}
value={0.5625}
>
9/16
</Donut>
<Donut
size={128}
strokeWidth={8}
value={0.625}
/>
<Donut
size={128}
strokeWidth={8}
value={0.125}
/>
</Flex></pre></div><div></div></div><div style="max-width:100%;overflow-x:scroll;"><table style="font-size:14px;line-height:1.125;min-width:512px;border-collapse:separate;border-spacing:0;max-width:100%;width:100%;"><thead><tr><th style="text-align:left;padding:8px 8px 8px 0;vertical-align:bottom;border-bottom:2px solid rgba(0, 0, 0, .125);">Prop</th><th style="text-align:left;padding:8px 8px 8px 0;vertical-align:bottom;border-bottom:2px solid rgba(0, 0, 0, .125);">Type</th><th style="text-align:left;padding:8px 8px 8px 0;vertical-align:bottom;border-bottom:2px solid rgba(0, 0, 0, .125);">Description</th></tr></thead><tbody><tr><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;" title="false">value </td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;">number</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);">Value from 0 to 1</td></tr><tr><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;" title="false">size </td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;">number</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);">Sets width and height</td></tr><tr><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;" title="false">strokeWidth </td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;">number</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);">Sets width of stroke</td></tr></tbody></table></div><div style="box-sizing:border-box;padding-top:16px;" class="Box"><div style="display:flex;margin-left:-8px;margin-right:-8px;" class="Flex"><div style="box-sizing:border-box;flex:1 1 auto;" class="Box"></div><a href="#" class="NavItem" style="font-size:12px;font-weight:600;line-height:1rem;text-decoration:none;display:flex;align-items:center;align-self:stretch;padding:4px 8px;color:inherit;cursor:pointer;">Back to Top</a></div></div></section><section id="DotIndicator" class="Section" style="padding-top:64px;padding-bottom:64px;"><header class="SectionHeader" style="display:flex;align-items:center;padding-bottom:8px;margin-top:32px;margin-bottom:32px;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:rgba(0, 0, 0, .25);border-color:inherit;"><div style="flex:1 1 auto;"><h2 class="Heading" style="font-size:24px;font-weight:600;margin:0;"><a href="#DotIndicator" style="color:inherit;text-decoration:none;">DotIndicator</a></h2><p class="Text" style="font-size:16px;margin:0;">Dot indicator buttons for use in carousels</p></div></header><div class="Panel" style="padding:16px;margin-bottom:16px;background-color:#fff;border-width:1px;border-style:solid;border-color:#111;border-radius:2px;"><div class="PanelHeader" style="display:flex;align-items:center;font-weight:bold;margin-top:-17px;margin-right:-17px;margin-left:-17px;margin-bottom:16px;padding:16px;color:#fff;background-color:#111;border-radius:2px 2px 0 0;">Example</div><div class="mb2"><div><div class="DotIndicator" style="display:inline-flex;margin-bottom:16px;"><button title="" style="font-size:16px;display:flex;align-items:center;justify-content:center;margin:0;padding:0;width:16px;height:32px;color:inherit;background-color:transparent;border:0;cursor:pointer;opacity:0.875;"><div style="width:8px;height:8px;margin:auto;background-color:currentcolor;border-radius:99999px;"></div></button><button title="" style="font-size:16px;display:flex;align-items:center;justify-content:center;margin:0;padding:0;width:16px;height:32px;color:inherit;background-color:transparent;border:0;cursor:pointer;opacity:0.375;"><div style="width:8px;height:8px;margin:auto;background-color:currentcolor;border-radius:99999px;"></div></button><button title="" style="font-size:16px;display:flex;align-items:center;justify-content:center;margin:0;padding:0;width:16px;height:32px;color:inherit;background-color:transparent;border:0;cursor:pointer;opacity:0.375;"><div style="width:8px;height:8px;margin:auto;background-color:currentcolor;border-radius:99999px;"></div></button></div></div><pre class="Pre" style="font-family:'Roboto Mono', Menlo, Consolas, monospace;padding-left:16px;margin-bottom:16px;border-left:4px solid rgba(0, 0, 0, .25);overflow-x:scroll;"><div>
<DotIndicator
active={0}
length={3}
onClick={function noRefCheck() {}}
/>
</div></pre></div><div></div></div><div style="max-width:100%;overflow-x:scroll;"><table style="font-size:14px;line-height:1.125;min-width:512px;border-collapse:separate;border-spacing:0;max-width:100%;width:100%;"><thead><tr><th style="text-align:left;padding:8px 8px 8px 0;vertical-align:bottom;border-bottom:2px solid rgba(0, 0, 0, .125);">Prop</th><th style="text-align:left;padding:8px 8px 8px 0;vertical-align:bottom;border-bottom:2px solid rgba(0, 0, 0, .125);">Type</th><th style="text-align:left;padding:8px 8px 8px 0;vertical-align:bottom;border-bottom:2px solid rgba(0, 0, 0, .125);">Description</th></tr></thead><tbody><tr><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;" title="false">length </td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;">number</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);">Number of dot buttons to show</td></tr><tr><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;" title="false">active </td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;">number</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);">Index of the currently active dot</td></tr><tr><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;" title="false">onClick </td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;">func</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);">Click event callback - returns index of clicked button</td></tr></tbody></table></div><div style="box-sizing:border-box;padding-top:16px;" class="Box"><div style="display:flex;margin-left:-8px;margin-right:-8px;" class="Flex"><div style="box-sizing:border-box;flex:1 1 auto;" class="Box"></div><a href="#" class="NavItem" style="font-size:12px;font-weight:600;line-height:1rem;text-decoration:none;display:flex;align-items:center;align-self:stretch;padding:4px 8px;color:inherit;cursor:pointer;">Back to Top</a></div></div></section><section id="Drawer" class="Section" style="padding-top:64px;padding-bottom:64px;"><header class="SectionHeader" style="display:flex;align-items:center;padding-bottom:8px;margin-top:32px;margin-bottom:32px;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:rgba(0, 0, 0, .25);border-color:inherit;"><div style="flex:1 1 auto;"><h2 class="Heading" style="font-size:24px;font-weight:600;margin:0;"><a href="#Drawer" style="color:inherit;text-decoration:none;">Drawer</a></h2><p class="Text" style="font-size:16px;margin:0;">An off-canvas drawer component</p></div></header><div class="Panel" style="padding:16px;margin-bottom:16px;background-color:#fff;border-width:1px;border-style:solid;border-color:#111;border-radius:2px;"><div class="PanelHeader" style="display:flex;align-items:center;font-weight:bold;margin-top:-17px;margin-right:-17px;margin-left:-17px;margin-bottom:16px;padding:16px;color:#fff;background-color:#111;border-radius:2px 2px 0 0;">Example</div><div class="mb2"><a href="demo">See demo</a><pre class="Pre" style="font-family:'Roboto Mono', Menlo, Consolas, monospace;padding-left:16px;margin-bottom:16px;border-left:4px solid rgba(0, 0, 0, .25);overflow-x:scroll;"><a href="demo">
See demo
</a></pre></div><div></div></div><div style="max-width:100%;overflow-x:scroll;"><table style="font-size:14px;line-height:1.125;min-width:512px;border-collapse:separate;border-spacing:0;max-width:100%;width:100%;"><thead><tr><th style="text-align:left;padding:8px 8px 8px 0;vertical-align:bottom;border-bottom:2px solid rgba(0, 0, 0, .125);">Prop</th><th style="text-align:left;padding:8px 8px 8px 0;vertical-align:bottom;border-bottom:2px solid rgba(0, 0, 0, .125);">Type</th><th style="text-align:left;padding:8px 8px 8px 0;vertical-align:bottom;border-bottom:2px solid rgba(0, 0, 0, .125);">Description</th></tr></thead><tbody><tr><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;" title="false">size </td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;">number</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);">Width or height of drawer, depending on placement</td></tr><tr><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;" title="false">open </td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;">bool</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);">Shows and hides the drawer</td></tr><tr><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;" title="false">position </td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;">oneOf(['top', 'right', 'bottom', 'left'])</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);">Position relative to the viewport</td></tr><tr><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;" title="false">onDismiss </td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;">func</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);">Click event callback for the background overlay</td></tr></tbody></table></div><div style="box-sizing:border-box;padding-top:16px;" class="Box"><div style="display:flex;margin-left:-8px;margin-right:-8px;" class="Flex"><div style="box-sizing:border-box;flex:1 1 auto;" class="Box"></div><a href="#" class="NavItem" style="font-size:12px;font-weight:600;line-height:1rem;text-decoration:none;display:flex;align-items:center;align-self:stretch;padding:4px 8px;color:inherit;cursor:pointer;">Back to Top</a></div></div></section><section id="Dropdown" class="Section" style="padding-top:64px;padding-bottom:64px;"><header class="SectionHeader" style="display:flex;align-items:center;padding-bottom:8px;margin-top:32px;margin-bottom:32px;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:rgba(0, 0, 0, .25);border-color:inherit;"><div style="flex:1 1 auto;"><h2 class="Heading" style="font-size:24px;font-weight:600;margin:0;"><a href="#Dropdown" style="color:inherit;text-decoration:none;">Dropdown</a></h2><p class="Text" style="font-size:16px;margin:0;">Position relative container for positioning DropdownMenu component</p></div></header><div class="Panel" style="padding:16px;margin-bottom:16px;background-color:#fff;border-width:1px;border-style:solid;border-color:#111;border-radius:2px;"><div class="PanelHeader" style="display:flex;align-items:center;font-weight:bold;margin-top:-17px;margin-right:-17px;margin-left:-17px;margin-bottom:16px;padding:16px;color:#fff;background-color:#111;border-radius:2px 2px 0 0;">Example</div><div class="mb2"><div class="Block" style="box-sizing:border-box;padding:16px;margin-bottom:16px;border-style:none;border-width:4px;border-color:#08e;color:inherit;"><div class="Dropdown" style="position:relative;"><button class="Button" style="font-family:inherit;font-size:14px;font-weight:600;line-height:16px;text-decoration:none;display:inline-block;margin:0;padding:8px 16px;cursor:pointer;border:0;color:#fff;background-color:#08e;border-radius:2px;">Dropdown <div class="Arrow" style="display:inline-block;width:0;height:0;margin-left:.5em;vertical-align:middle;border-right:.3125em solid transparent;border-left:.3125em solid transparent;border-top:.4375em solid;"></div></button><div class="DropdownMenu" style="position:absolute;left:0;right:auto;top:100%;bottom:auto;z-index:4;"><div class="Menu" style="display:flex;flex-direction:column;min-width:128px;margin-bottom:16px;overflow:hidden;border-radius:2px;border-width:1px;border-style:solid;background-color:#fff;border-color:rgba(0, 0, 0, .25);"><a class="NavItem" style="font-size:14px;font-weight:600;line-height:1rem;text-decoration:none;display:flex;align-items:center;align-self:stretch;padding:8px;color:inherit;cursor:pointer;">Hello</a><a class="NavItem" style="font-size:14px;font-weight:600;line-height:1rem;text-decoration:none;display:flex;align-items:center;align-self:stretch;padding:8px;color:inherit;cursor:pointer;">Hi</a></div></div></div></div><pre class="Pre" style="font-family:'Roboto Mono', Menlo, Consolas, monospace;padding-left:16px;margin-bottom:16px;border-left:4px solid rgba(0, 0, 0, .25);overflow-x:scroll;"><Block>
<Dropdown>
<Button rounded={true}>
Dropdown
<Arrow direction="down" />
</Button>
<DropdownMenu open={true}>
<NavItem Component="a">
Hello
</NavItem>
<NavItem Component="a">
Hi
</NavItem>
</DropdownMenu>
</Dropdown>
</Block></pre></div><div></div></div><div></div><div style="box-sizing:border-box;padding-top:16px;" class="Box"><div style="display:flex;margin-left:-8px;margin-right:-8px;" class="Flex"><div style="box-sizing:border-box;flex:1 1 auto;" class="Box"></div><a href="#" class="NavItem" style="font-size:12px;font-weight:600;line-height:1rem;text-decoration:none;display:flex;align-items:center;align-self:stretch;padding:4px 8px;color:inherit;cursor:pointer;">Back to Top</a></div></div></section><section id="DropdownMenu" class="Section" style="padding-top:64px;padding-bottom:64px;"><header class="SectionHeader" style="display:flex;align-items:center;padding-bottom:8px;margin-top:32px;margin-bottom:32px;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:rgba(0, 0, 0, .25);border-color:inherit;"><div style="flex:1 1 auto;"><h2 class="Heading" style="font-size:24px;font-weight:600;margin:0;"><a href="#DropdownMenu" style="color:inherit;text-decoration:none;">DropdownMenu</a></h2><p class="Text" style="font-size:16px;margin:0;">Absolutely positioned Menu component for use within Dropdown component</p></div></header><div class="Panel" style="padding:16px;margin-bottom:16px;background-color:#fff;border-width:1px;border-style:solid;border-color:#111;border-radius:2px;"><div class="PanelHeader" style="display:flex;align-items:center;font-weight:bold;margin-top:-17px;margin-right:-17px;margin-left:-17px;margin-bottom:16px;padding:16px;color:#fff;background-color:#111;border-radius:2px 2px 0 0;">Example</div><div class="mb2"><a href="#Dropdown">See Dropdown example</a><pre class="Pre" style="font-family:'Roboto Mono', Menlo, Consolas, monospace;padding-left:16px;margin-bottom:16px;border-left:4px solid rgba(0, 0, 0, .25);overflow-x:scroll;"><a href="#Dropdown">
See Dropdown example
</a></pre></div><div></div></div><div style="max-width:100%;overflow-x:scroll;"><table style="font-size:14px;line-height:1.125;min-width:512px;border-collapse:separate;border-spacing:0;max-width:100%;width:100%;"><thead><tr><th style="text-align:left;padding:8px 8px 8px 0;vertical-align:bottom;border-bottom:2px solid rgba(0, 0, 0, .125);">Prop</th><th style="text-align:left;padding:8px 8px 8px 0;vertical-align:bottom;border-bottom:2px solid rgba(0, 0, 0, .125);">Type</th><th style="text-align:left;padding:8px 8px 8px 0;vertical-align:bottom;border-bottom:2px solid rgba(0, 0, 0, .125);">Description</th></tr></thead><tbody><tr><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;" title="false">open </td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;">bool</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);">Toggles visibility of DropdownMenu</td></tr><tr><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;" title="false">right </td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;">bool</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);">Anchors menu to the right</td></tr><tr><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;" title="false">top </td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;">bool</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);">Anchors menu to the top</td></tr></tbody></table></div><div style="box-sizing:border-box;padding-top:16px;" class="Box"><div style="display:flex;margin-left:-8px;margin-right:-8px;" class="Flex"><div style="box-sizing:border-box;flex:1 1 auto;" class="Box"></div><a href="#" class="NavItem" style="font-size:12px;font-weight:600;line-height:1rem;text-decoration:none;display:flex;align-items:center;align-self:stretch;padding:4px 8px;color:inherit;cursor:pointer;">Back to Top</a></div></div></section><section id="Embed" class="Section" style="padding-top:64px;padding-bottom:64px;"><header class="SectionHeader" style="display:flex;align-items:center;padding-bottom:8px;margin-top:32px;margin-bottom:32px;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:rgba(0, 0, 0, .25);border-color:inherit;"><div style="flex:1 1 auto;"><h2 class="Heading" style="font-size:24px;font-weight:600;margin:0;"><a href="#Embed" style="color:inherit;text-decoration:none;">Embed</a></h2><p class="Text" style="font-size:16px;margin:0;">Responsive media embed wrapper</p></div></header><div class="Panel" style="padding:16px;margin-bottom:16px;background-color:#fff;border-width:1px;border-style:solid;border-color:#111;border-radius:2px;"><div class="PanelHeader" style="display:flex;align-items:center;font-weight:bold;margin-top:-17px;margin-right:-17px;margin-left:-17px;margin-bottom:16px;padding:16px;color:#fff;background-color:#111;border-radius:2px 2px 0 0;">Example</div><div class="mb2"><div class="Embed" style="position:relative;height:0;padding:0;padding-bottom:56.25%;margin-bottom:16px;overflow:hidden;"><iframe src="https://www.youtube.com/embed/KO_3Qgib6RQ" allowfullscreen="" style="position:absolute;width:100%;height:100%;top:0;bottom:0;left:0;border:0;"></iframe></div><pre class="Pre" style="font-family:'Roboto Mono', Menlo, Consolas, monospace;padding-left:16px;margin-bottom:16px;border-left:4px solid rgba(0, 0, 0, .25);overflow-x:scroll;"><Embed ratio={0.5625}>
<iframe
allowFullScreen={true}
src="https://www.youtube.com/embed/KO_3Qgib6RQ"
/>
</Embed></pre></div><div></div></div><div style="max-width:100%;overflow-x:scroll;"><table style="font-size:14px;line-height:1.125;min-width:512px;border-collapse:separate;border-spacing:0;max-width:100%;width:100%;"><thead><tr><th style="text-align:left;padding:8px 8px 8px 0;vertical-align:bottom;border-bottom:2px solid rgba(0, 0, 0, .125);">Prop</th><th style="text-align:left;padding:8px 8px 8px 0;vertical-align:bottom;border-bottom:2px solid rgba(0, 0, 0, .125);">Type</th><th style="text-align:left;padding:8px 8px 8px 0;vertical-align:bottom;border-bottom:2px solid rgba(0, 0, 0, .125);">Description</th></tr></thead><tbody><tr><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;" title="false">ratio </td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;">number</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);">Aspect ratio for the embed.
Divide height over width to calculate.
E.g. ratio={9/16}</td></tr></tbody></table></div><div style="box-sizing:border-box;padding-top:16px;" class="Box"><div style="display:flex;margin-left:-8px;margin-right:-8px;" class="Flex"><div style="box-sizing:border-box;flex:1 1 auto;" class="Box"></div><a href="#" class="NavItem" style="font-size:12px;font-weight:600;line-height:1rem;text-decoration:none;display:flex;align-items:center;align-self:stretch;padding:4px 8px;color:inherit;cursor:pointer;">Back to Top</a></div></div></section><section id="Fixed" class="Section" style="padding-top:64px;padding-bottom:64px;"><header class="SectionHeader" style="display:flex;align-items:center;padding-bottom:8px;margin-top:32px;margin-bottom:32px;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:rgba(0, 0, 0, .25);border-color:inherit;"><div style="flex:1 1 auto;"><h2 class="Heading" style="font-size:24px;font-weight:600;margin:0;"><a href="#Fixed" style="color:inherit;text-decoration:none;">Fixed</a></h2><p class="Text" style="font-size:16px;margin:0;">Layout container for fixed positioning children</p></div></header><div class="Panel" style="padding:16px;margin-bottom:16px;background-color:#fff;border-width:1px;border-style:solid;border-color:#111;border-radius:2px;"><div class="PanelHeader" style="display:flex;align-items:center;font-weight:bold;margin-top:-17px;margin-right:-17px;margin-left:-17px;margin-bottom:16px;padding:16px;color:#fff;background-color:#111;border-radius:2px 2px 0 0;">Example</div><div class="mb2"><a href="demo">See demo</a><pre class="Pre" style="font-family:'Roboto Mono', Menlo, Consolas, monospace;padding-left:16px;margin-bottom:16px;border-left:4px solid rgba(0, 0, 0, .25);overflow-x:scroll;"><a href="demo">
See demo
</a></pre></div><div></div></div><div style="max-width:100%;overflow-x:scroll;"><table style="font-size:14px;line-height:1.125;min-width:512px;border-collapse:separate;border-spacing:0;max-width:100%;width:100%;"><thead><tr><th style="text-align:left;padding:8px 8px 8px 0;vertical-align:bottom;border-bottom:2px solid rgba(0, 0, 0, .125);">Prop</th><th style="text-align:left;padding:8px 8px 8px 0;vertical-align:bottom;border-bottom:2px solid rgba(0, 0, 0, .125);">Type</th><th style="text-align:left;padding:8px 8px 8px 0;vertical-align:bottom;border-bottom:2px solid rgba(0, 0, 0, .125);">Description</th></tr></thead><tbody><tr><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;" title="false">top </td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;">bool</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);">Sets top: 0</td></tr><tr><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;" title="false">right </td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;">bool</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);">Sets right: 0</td></tr><tr><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;" title="false">bottom </td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;">bool</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);">Sets bottom: 0</td></tr><tr><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;" title="false">left </td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;">bool</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);">Sets left: 0</td></tr><tr><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;" title="false">zIndex </td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;">number</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);">Sets z-index</td></tr><tr><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;" title="false">m </td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;">oneOf([0, 1, 2, 3, 4])</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);">Applies margin with the margin utility based on the theme spacing scale</td></tr><tr><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;" title="false">mt </td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;">oneOf([0, 1, 2, 3, 4])</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);">Applies margin top based on the theme spacing scale</td></tr><tr><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;" title="false">mr </td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;">oneOf([0, 1, 2, 3, 4])</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);">Applies margin right based on the theme spacing scale</td></tr><tr><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;" title="false">mb </td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;">oneOf([0, 1, 2, 3, 4])</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);">Applies margin bottom based on the theme spacing scale</td></tr><tr><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;" title="false">ml </td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;">oneOf([0, 1, 2, 3, 4])</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);">Applies margin left based on the theme spacing scale</td></tr><tr><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;" title="false">mx </td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;">oneOf([0, 1, 2, 3, 4])</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);">Applies margin left and right based on the theme spacing scale</td></tr><tr><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;" title="false">my </td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;">oneOf([0, 1, 2, 3, 4])</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);">Applies margin top and bottom based on the theme spacing scale</td></tr></tbody></table></div><div style="box-sizing:border-box;padding-top:16px;" class="Box"><div style="display:flex;margin-left:-8px;margin-right:-8px;" class="Flex"><div style="box-sizing:border-box;flex:1 1 auto;" class="Box"></div><a href="#" class="NavItem" style="font-size:12px;font-weight:600;line-height:1rem;text-decoration:none;display:flex;align-items:center;align-self:stretch;padding:4px 8px;color:inherit;cursor:pointer;">Back to Top</a></div></div></section><section id="Footer" class="Section" style="padding-top:64px;padding-bottom:64px;"><header class="SectionHeader" style="display:flex;align-items:center;padding-bottom:8px;margin-top:32px;margin-bottom:32px;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:rgba(0, 0, 0, .25);border-color:inherit;"><div style="flex:1 1 auto;"><h2 class="Heading" style="font-size:24px;font-weight:600;margin:0;"><a href="#Footer" style="color:inherit;text-decoration:none;">Footer</a></h2><p class="Text" style="font-size:16px;margin:0;">Minimal footer component with top border</p></div></header><div class="Panel" style="padding:16px;margin-bottom:16px;background-color:#fff;border-width:1px;border-style:solid;border-color:#111;border-radius:2px;"><div class="PanelHeader" style="display:flex;align-items:center;font-weight:bold;margin-top:-17px;margin-right:-17px;margin-left:-17px;margin-bottom:16px;padding:16px;color:#fff;background-color:#111;border-radius:2px 2px 0 0;">Example</div><div class="mb2"><footer class="Footer" style="display:flex;flex-wrap:wrap;align-items:center;font-size:14px;margin-top:32px;padding-top:32px;padding-bottom:32px;border-top-width:1px;border-top-style:solid;border-top-color:rgba(0, 0, 0, .25);">Footer™ ©2016 Jxnblk</footer><pre class="Pre" style="font-family:'Roboto Mono', Menlo, Consolas, monospace;padding-left:16px;margin-bottom:16px;border-left:4px solid rgba(0, 0, 0, .25);overflow-x:scroll;"><Footer>
Footer™ ©2016 Jxnblk
</Footer></pre></div><div></div></div><div></div><div style="box-sizing:border-box;padding-top:16px;" class="Box"><div style="display:flex;margin-left:-8px;margin-right:-8px;" class="Flex"><div style="box-sizing:border-box;flex:1 1 auto;" class="Box"></div><a href="#" class="NavItem" style="font-size:12px;font-weight:600;line-height:1rem;text-decoration:none;display:flex;align-items:center;align-self:stretch;padding:4px 8px;color:inherit;cursor:pointer;">Back to Top</a></div></div></section><section id="Heading" class="Section" style="padding-top:64px;padding-bottom:64px;"><header class="SectionHeader" style="display:flex;align-items:center;padding-bottom:8px;margin-top:32px;margin-bottom:32px;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:rgba(0, 0, 0, .25);border-color:inherit;"><div style="flex:1 1 auto;"><h2 class="Heading" style="font-size:24px;font-weight:600;margin:0;"><a href="#Heading" style="color:inherit;text-decoration:none;">Heading</a></h2><p class="Text" style="font-size:16px;margin:0;">Heading element with no margin and size based on fontSizes scale</p></div></header><div class="Panel" style="padding:16px;margin-bottom:16px;background-color:#fff;border-width:1px;border-style:solid;border-color:#111;border-radius:2px;"><div class="PanelHeader" style="display:flex;align-items:center;font-weight:bold;margin-top:-17px;margin-right:-17px;margin-left:-17px;margin-bottom:16px;padding:16px;color:#fff;background-color:#111;border-radius:2px 2px 0 0;">Example</div><div class="Permutations"><p class="Text" style="font-size:12px;margin:0;">Variations</p><div style="position:relative;margin-bottom:16px;"><div><h1 title="<Heading level={1} />" name="Heading" class="Heading" style="font-size:32px;font-weight:600;margin:0;margin-right:16px;">Heading</h1><h2 title="<Heading level={2} />" name="Heading" class="Heading" style="font-size:24px;font-weight:600;margin:0;margin-right:16px;">Heading</h2><h3 title="<Heading level={3} />" name="Heading" class="Heading" style="font-size:20px;font-weight:600;margin:0;margin-right:16px;">Heading</h3><h4 title="<Heading level={4} />" name="Heading" class="Heading" style="font-size:16px;font-weight:600;margin:0;margin-right:16px;">Heading</h4><h5 title="<Heading level={5} />" name="Heading" class="Heading" style="font-size:14px;font-weight:600;margin:0;margin-right:16px;">Heading</h5><h6 title="<Heading level={6} />" name="Heading" class="Heading" style="font-size:12px;font-weight:600;margin:0;margin-right:16px;">Heading</h6></div></div></div></div><div style="max-width:100%;overflow-x:scroll;"><table style="font-size:14px;line-height:1.125;min-width:512px;border-collapse:separate;border-spacing:0;max-width:100%;width:100%;"><thead><tr><th style="text-align:left;padding:8px 8px 8px 0;vertical-align:bottom;border-bottom:2px solid rgba(0, 0, 0, .125);">Prop</th><th style="text-align:left;padding:8px 8px 8px 0;vertical-align:bottom;border-bottom:2px solid rgba(0, 0, 0, .125);">Type</th><th style="text-align:left;padding:8px 8px 8px 0;vertical-align:bottom;border-bottom:2px solid rgba(0, 0, 0, .125);">Description</th></tr></thead><tbody><tr><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;" title="false">level </td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;">oneOf([1, 2, 3, 4, 5, 6])</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);">Heading level, e.g. level={1} for <h1></td></tr><tr><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;" title="false">size </td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;">oneOf([0, 1, 2, 3, 4, 5, 6])</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);">Visual size of heading</td></tr></tbody></table></div><div style="box-sizing:border-box;padding-top:16px;" class="Box"><div style="display:flex;margin-left:-8px;margin-right:-8px;" class="Flex"><div style="box-sizing:border-box;flex:1 1 auto;" class="Box"></div><a href="#" class="NavItem" style="font-size:12px;font-weight:600;line-height:1rem;text-decoration:none;display:flex;align-items:center;align-self:stretch;padding:4px 8px;color:inherit;cursor:pointer;">Back to Top</a></div></div></section><section id="HeadingLink" class="Section" style="padding-top:64px;padding-bottom:64px;"><header class="SectionHeader" style="display:flex;align-items:center;padding-bottom:8px;margin-top:32px;margin-bottom:32px;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:rgba(0, 0, 0, .25);border-color:inherit;"><div style="flex:1 1 auto;"><h2 class="Heading" style="font-size:24px;font-weight:600;margin:0;"><a href="#HeadingLink" style="color:inherit;text-decoration:none;">HeadingLink</a></h2><p class="Text" style="font-size:16px;margin:0;">Heading element with unstyled link. Useful for in-page navigation</p></div></header><div class="Panel" style="padding:16px;margin-bottom:16px;background-color:#fff;border-width:1px;border-style:solid;border-color:#111;border-radius:2px;"><div class="PanelHeader" style="display:flex;align-items:center;font-weight:bold;margin-top:-17px;margin-right:-17px;margin-left:-17px;margin-bottom:16px;padding:16px;color:#fff;background-color:#111;border-radius:2px 2px 0 0;">Example</div><div class="Permutations"><p class="Text" style="font-size:12px;margin:0;">Variations</p><div style="position:relative;margin-bottom:16px;"><div><h1 class="Heading" style="font-size:32px;font-weight:600;margin:0;margin-right:16px;"><a title="<HeadingLink level={1} />" name="HeadingLink" href="#!" style="color:inherit;text-decoration:none;">HeadingLink</a></h1><h2 class="Heading" style="font-size:24px;font-weight:600;margin:0;margin-right:16px;"><a title="<HeadingLink level={2} />" name="HeadingLink" href="#!" style="color:inherit;text-decoration:none;">HeadingLink</a></h2><h3 class="Heading" style="font-size:20px;font-weight:600;margin:0;margin-right:16px;"><a title="<HeadingLink level={3} />" name="HeadingLink" href="#!" style="color:inherit;text-decoration:none;">HeadingLink</a></h3><h4 class="Heading" style="font-size:16px;font-weight:600;margin:0;margin-right:16px;"><a title="<HeadingLink level={4} />" name="HeadingLink" href="#!" style="color:inherit;text-decoration:none;">HeadingLink</a></h4><h5 class="Heading" style="font-size:14px;font-weight:600;margin:0;margin-right:16px;"><a title="<HeadingLink level={5} />" name="HeadingLink" href="#!" style="color:inherit;text-decoration:none;">HeadingLink</a></h5><h6 class="Heading" style="font-size:12px;font-weight:600;margin:0;margin-right:16px;"><a title="<HeadingLink level={6} />" name="HeadingLink" href="#!" style="color:inherit;text-decoration:none;">HeadingLink</a></h6></div></div></div></div><div style="max-width:100%;overflow-x:scroll;"><table style="font-size:14px;line-height:1.125;min-width:512px;border-collapse:separate;border-spacing:0;max-width:100%;width:100%;"><thead><tr><th style="text-align:left;padding:8px 8px 8px 0;vertical-align:bottom;border-bottom:2px solid rgba(0, 0, 0, .125);">Prop</th><th style="text-align:left;padding:8px 8px 8px 0;vertical-align:bottom;border-bottom:2px solid rgba(0, 0, 0, .125);">Type</th><th style="text-align:left;padding:8px 8px 8px 0;vertical-align:bottom;border-bottom:2px solid rgba(0, 0, 0, .125);">Description</th></tr></thead><tbody><tr><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;" title="false">level </td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;">oneOf([1, 2, 3, 4, 5, 6])</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);">Heading level, e.g. level={1} for <h1></td></tr><tr><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;" title="false">size </td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;">oneOf([1, 2, 3, 4, 5, 6])</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);">Visual size of heading</td></tr><tr><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;" title="false">href </td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;">string</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);">href for link</td></tr></tbody></table></div><div style="box-sizing:border-box;padding-top:16px;" class="Box"><div style="display:flex;margin-left:-8px;margin-right:-8px;" class="Flex"><div style="box-sizing:border-box;flex:1 1 auto;" class="Box"></div><a href="#" class="NavItem" style="font-size:12px;font-weight:600;line-height:1rem;text-decoration:none;display:flex;align-items:center;align-self:stretch;padding:4px 8px;color:inherit;cursor:pointer;">Back to Top</a></div></div></section><section id="InlineForm" class="Section" style="padding-top:64px;padding-bottom:64px;"><header class="SectionHeader" style="display:flex;align-items:center;padding-bottom:8px;margin-top:32px;margin-bottom:32px;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:rgba(0, 0, 0, .25);border-color:inherit;"><div style="flex:1 1 auto;"><h2 class="Heading" style="font-size:24px;font-weight:600;margin:0;"><a href="#InlineForm" style="color:inherit;text-decoration:none;">InlineForm</a></h2><p class="Text" style="font-size:16px;margin:0;">Inline grouped form for search or other simple forms</p></div></header><div class="Panel" style="padding:16px;margin-bottom:16px;background-color:#fff;border-width:1px;border-style:solid;border-color:#111;border-radius:2px;"><div class="PanelHeader" style="display:flex;align-items:center;font-weight:bold;margin-top:-17px;margin-right:-17px;margin-left:-17px;margin-bottom:16px;padding:16px;color:#fff;background-color:#111;border-radius:2px 2px 0 0;">Example</div><div class="mb2"><form class="InlineForm" style="display:flex;align-items:center;"><div class="Input" style="margin-bottom:16px;flex:1 1 auto;margin:0;"><label for="inline_form" class="Label" style="font-size:14px;font-weight:600;position:absolute;height:1px;width:1px;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);">InlineForm</label><input type="text" name="inline_form" style="font-family:inherit;font-size:inherit;box-sizing:border-box;display:block;width:100%;height:32px;padding-left:8px;padding-right:8px;margin:0;color:inherit;background-color:rgba(255, 255, 255, .25);border-radius:2px 0 0 2px;border-width:1px;border-style:solid;border-color:rgba(0, 0, 0, .25);"/></div><button type="submit" class="ButtonOutline" style="font-family:inherit;font-size:14px;font-weight:600;line-height:16px;text-decoration:none;display:inline-block;margin:0;padding:8px 16px;cursor:pointer;border:0;color:#08e;background-color:transparent;box-shadow:inset 0 0 0 1px;border-radius:0 2px 2px 0;margin-left:-1px;">Go</button></form><pre class="Pre" style="font-family:'Roboto Mono', Menlo, Consolas, monospace;padding-left:16px;margin-bottom:16px;border-left:4px solid rgba(0, 0, 0, .25);overflow-x:scroll;"><InlineForm
buttonLabel="Go"
label="InlineForm"
name="inline_form"
onChange={function noRefCheck() {}}
onClick={function noRefCheck() {}}
/></pre></div><div></div></div><div style="max-width:100%;overflow-x:scroll;"><table style="font-size:14px;line-height:1.125;min-width:512px;border-collapse:separate;border-spacing:0;max-width:100%;width:100%;"><thead><tr><th style="text-align:left;padding:8px 8px 8px 0;vertical-align:bottom;border-bottom:2px solid rgba(0, 0, 0, .125);">Prop</th><th style="text-align:left;padding:8px 8px 8px 0;vertical-align:bottom;border-bottom:2px solid rgba(0, 0, 0, .125);">Type</th><th style="text-align:left;padding:8px 8px 8px 0;vertical-align:bottom;border-bottom:2px solid rgba(0, 0, 0, .125);">Description</th></tr></thead><tbody><tr><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;" title="Required">label *</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;">string</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);">Input label</td></tr><tr><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;" title="Required">name *</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;">string</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);">Input name</td></tr><tr><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;" title="false">value </td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;">oneOfType([number, string])</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);">Input value</td></tr><tr><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;" title="false">placeholder </td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;">string</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);">Input placeholder</td></tr><tr><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;" title="false">onChange </td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;">func</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);">onChange handler for input</td></tr><tr><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;" title="false">buttonLabel </td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;">string</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);">Text for button</td></tr><tr><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;" title="false">onClick </td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;">func</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);">onClick handler for button</td></tr></tbody></table></div><div style="box-sizing:border-box;padding-top:16px;" class="Box"><div style="display:flex;margin-left:-8px;margin-right:-8px;" class="Flex"><div style="box-sizing:border-box;flex:1 1 auto;" class="Box"></div><a href="#" class="NavItem" style="font-size:12px;font-weight:600;line-height:1rem;text-decoration:none;display:flex;align-items:center;align-self:stretch;padding:4px 8px;color:inherit;cursor:pointer;">Back to Top</a></div></div></section><section id="Input" class="Section" style="padding-top:64px;padding-bottom:64px;"><header class="SectionHeader" style="display:flex;align-items:center;padding-bottom:8px;margin-top:32px;margin-bottom:32px;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:rgba(0, 0, 0, .25);border-color:inherit;"><div style="flex:1 1 auto;"><h2 class="Heading" style="font-size:24px;font-weight:600;margin:0;"><a href="#Input" style="color:inherit;text-decoration:none;">Input</a></h2><p class="Text" style="font-size:16px;margin:0;">Input element with label with support for aria-invalid, disabled, and readOnly HTML attributes</p></div></header><div class="Panel" style="padding:16px;margin-bottom:16px;background-color:#fff;border-width:1px;border-style:solid;border-color:#111;border-radius:2px;"><div class="PanelHeader" style="display:flex;align-items:center;font-weight:bold;margin-top:-17px;margin-right:-17px;margin-left:-17px;margin-bottom:16px;padding:16px;color:#fff;background-color:#111;border-radius:2px 2px 0 0;">Example</div><div class="mb2"><div class="Input" style="margin-bottom:16px;"><label for="input_example" class="Label" style="font-size:14px;font-weight:600;">Input</label><input placeholder="Placeholder" type="text" name="input_example" style="font-family:inherit;font-size:inherit;box-sizing:border-box;display:block;width:100%;height:32px;padding-left:8px;padding-right:8px;margin:0;color:inherit;background-color:rgba(255, 255, 255, .25);border-radius:2px;border-width:1px;border-style:solid;border-color:rgba(0, 0, 0, .25);"/></div><pre class="Pre" style="font-family:'Roboto Mono', Menlo, Consolas, monospace;padding-left:16px;margin-bottom:16px;border-left:4px solid rgba(0, 0, 0, .25);overflow-x:scroll;"><Input
label="Input"
name="input_example"
placeholder="Placeholder"
rounded={true}
type="text"
/></pre></div><div class="Permutations"><p class="Text" style="font-size:12px;margin:0;">Variations</p><div style="position:relative;margin-bottom:16px;"><div><div class="Input" style="margin-bottom:16px;margin-right:16px;"><label for="Input" class="Label" style="font-size:14px;font-weight:600;position:absolute;height:1px;width:1px;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);">Input</label><input title="<Input label='Input' hideLabel={true} rounded={true} />" type="text" name="Input" style="font-family:inherit;font-size:inherit;box-sizing:border-box;display:block;width:100%;height:32px;padding-left:8px;padding-right:8px;margin:0;color:inherit;background-color:rgba(255, 255, 255, .25);border-radius:2px;border-width:1px;border-style:solid;border-color:rgba(0, 0, 0, .25);"/></div><div class="Input" style="margin-bottom:16px;margin-right:16px;"><label for="Input" class="Label" style="font-size:14px;font-weight:600;">Input</label><input title="<Input label='Input' hideLabel={false} rounded={true} />" type="text" name="Input" style="font-family:inherit;font-size:inherit;box-sizing:border-box;display:block;width:100%;height:32px;padding-left:8px;padding-right:8px;margin:0;color:inherit;background-color:rgba(255, 255, 255, .25);border-radius:2px;border-width:1px;border-style:solid;border-color:rgba(0, 0, 0, .25);"/></div></div></div></div></div><div style="max-width:100%;overflow-x:scroll;"><table style="font-size:14px;line-height:1.125;min-width:512px;border-collapse:separate;border-spacing:0;max-width:100%;width:100%;"><thead><tr><th style="text-align:left;padding:8px 8px 8px 0;vertical-align:bottom;border-bottom:2px solid rgba(0, 0, 0, .125);">Prop</th><th style="text-align:left;padding:8px 8px 8px 0;vertical-align:bottom;border-bottom:2px solid rgba(0, 0, 0, .125);">Type</th><th style="text-align:left;padding:8px 8px 8px 0;vertical-align:bottom;border-bottom:2px solid rgba(0, 0, 0, .125);">Description</th></tr></thead><tbody><tr><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;" title="Required">label *</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;">string</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);">Label for form element</td></tr><tr><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;" title="Required">name *</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;">string</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);">Name attribute for form element</td></tr><tr><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;" title="false">type </td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;">string</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);">Form element type</td></tr><tr><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;" title="false">message </td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;">string</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);">Adds a helper or error message below the input</td></tr><tr><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;" title="false">hideLabel </td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;">bool</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);">Hides the form element label</td></tr><tr><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;" title="false">rounded </td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;">oneOfType([bool, oneOf(['top', 'right', 'bottom', 'left'])])</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);">Controls the border radius for creating grouped elements</td></tr></tbody></table></div><div style="box-sizing:border-box;padding-top:16px;" class="Box"><div style="display:flex;margin-left:-8px;margin-right:-8px;" class="Flex"><div style="box-sizing:border-box;flex:1 1 auto;" class="Box"></div><a href="#" class="NavItem" style="font-size:12px;font-weight:600;line-height:1rem;text-decoration:none;display:flex;align-items:center;align-self:stretch;padding:4px 8px;color:inherit;cursor:pointer;">Back to Top</a></div></div></section><section id="InputRange" class="Section" style="padding-top:64px;padding-bottom:64px;"><header class="SectionHeader" style="display:flex;align-items:center;padding-bottom:8px;margin-top:32px;margin-bottom:32px;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:rgba(0, 0, 0, .25);border-color:inherit;"><div style="flex:1 1 auto;"><h2 class="Heading" style="font-size:24px;font-weight:600;margin:0;"><a href="#InputRange" style="color:inherit;text-decoration:none;">InputRange</a></h2><p class="Text" style="font-size:16px;margin:0;">Input type range with label</p></div></header><div class="Panel" style="padding:16px;margin-bottom:16px;background-color:#fff;border-width:1px;border-style:solid;border-color:#111;border-radius:2px;"><div class="PanelHeader" style="display:flex;align-items:center;font-weight:bold;margin-top:-17px;margin-right:-17px;margin-left:-17px;margin-bottom:16px;padding:16px;color:#fff;background-color:#111;border-radius:2px 2px 0 0;">Example</div><div class="Permutations"><p class="Text" style="font-size:12px;margin:0;">Variations</p><div style="position:relative;margin-bottom:16px;"><div><div class="InputRange" style="margin-bottom:16px;margin-right:16px;"><style> .InputRange-input::-webkit-slider-thumb { width: 8px; height: 20px; margin-top: -8px; background-color: currentcolor; border: 0; border-radius: 4px; -webkit-appearance: none; } .InputRange-input::-moz-range-thumb { width: 8px; height: 20px; margin-top: -8px; background-color: currentcolor; border: 0; border-radius: 4px; -webkit-appearance: none; } .InputRange-input::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background-color: rgba(0, 0, 0, .25); } .InputRange-input::-moz-range-track { height: 4px; border-radius: 2px; background-color: rgba(0, 0, 0, .25); } </style><label for="InputRange" class="Label" style="font-size:14px;font-weight:600;position:absolute;height:1px;width:1px;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);">InputRange</label><input title="<InputRange label='InputRange' hideLabel={true} />" type="range" name="InputRange" class="InputRange-input" style="box-sizing:border-box;display:block;width:100%;margin:0;padding-top:8px;padding-bottom:8px;cursor:pointer;color:inherit;background-color:transparent;-webkit-appearance:none;appearance:none;"/></div><div class="InputRange" style="margin-bottom:16px;margin-right:16px;"><style> .InputRange-input::-webkit-slider-thumb { width: 8px; height: 20px; margin-top: -8px; background-color: currentcolor; border: 0; border-radius: 4px; -webkit-appearance: none; } .InputRange-input::-moz-range-thumb { width: 8px; height: 20px; margin-top: -8px; background-color: currentcolor; border: 0; border-radius: 4px; -webkit-appearance: none; } .InputRange-input::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background-color: rgba(0, 0, 0, .25); } .InputRange-input::-moz-range-track { height: 4px; border-radius: 2px; background-color: rgba(0, 0, 0, .25); } </style><label for="InputRange" class="Label" style="font-size:14px;font-weight:600;">InputRange</label><input title="<InputRange label='InputRange' hideLabel={false} />" type="range" name="InputRange" class="InputRange-input" style="box-sizing:border-box;display:block;width:100%;margin:0;padding-top:8px;padding-bottom:8px;cursor:pointer;color:inherit;background-color:transparent;-webkit-appearance:none;appearance:none;"/></div></div></div></div></div><div style="max-width:100%;overflow-x:scroll;"><table style="font-size:14px;line-height:1.125;min-width:512px;border-collapse:separate;border-spacing:0;max-width:100%;width:100%;"><thead><tr><th style="text-align:left;padding:8px 8px 8px 0;vertical-align:bottom;border-bottom:2px solid rgba(0, 0, 0, .125);">Prop</th><th style="text-align:left;padding:8px 8px 8px 0;vertical-align:bottom;border-bottom:2px solid rgba(0, 0, 0, .125);">Type</th><th style="text-align:left;padding:8px 8px 8px 0;vertical-align:bottom;border-bottom:2px solid rgba(0, 0, 0, .125);">Description</th></tr></thead><tbody><tr><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;" title="Required">label *</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;">string</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);">Label for form element</td></tr><tr><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;" title="Required">name *</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;">string</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);">Name attribute for form element</td></tr><tr><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;" title="false">hideLabel </td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;">bool</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);">Hides the form element label</td></tr></tbody></table></div><div style="box-sizing:border-box;padding-top:16px;" class="Box"><div style="display:flex;margin-left:-8px;margin-right:-8px;" class="Flex"><div style="box-sizing:border-box;flex:1 1 auto;" class="Box"></div><a href="#" class="NavItem" style="font-size:12px;font-weight:600;line-height:1rem;text-decoration:none;display:flex;align-items:center;align-self:stretch;padding:4px 8px;color:inherit;cursor:pointer;">Back to Top</a></div></div></section><section id="Label" class="Section" style="padding-top:64px;padding-bottom:64px;"><header class="SectionHeader" style="display:flex;align-items:center;padding-bottom:8px;margin-top:32px;margin-bottom:32px;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:rgba(0, 0, 0, .25);border-color:inherit;"><div style="flex:1 1 auto;"><h2 class="Heading" style="font-size:24px;font-weight:600;margin:0;"><a href="#Label" style="color:inherit;text-decoration:none;">Label</a></h2><p class="Text" style="font-size:16px;margin:0;">Label element for form controls</p></div></header><div class="Panel" style="padding:16px;margin-bottom:16px;background-color:#fff;border-width:1px;border-style:solid;border-color:#111;border-radius:2px;"><div class="PanelHeader" style="display:flex;align-items:center;font-weight:bold;margin-top:-17px;margin-right:-17px;margin-left:-17px;margin-bottom:16px;padding:16px;color:#fff;background-color:#111;border-radius:2px 2px 0 0;">Example</div><div class="mb2"><label class="Label" style="font-size:14px;font-weight:600;">Label for form elements</label><pre class="Pre" style="font-family:'Roboto Mono', Menlo, Consolas, monospace;padding-left:16px;margin-bottom:16px;border-left:4px solid rgba(0, 0, 0, .25);overflow-x:scroll;"><Label>
Label for form elements
</Label></pre></div><div></div></div><div style="max-width:100%;overflow-x:scroll;"><table style="font-size:14px;line-height:1.125;min-width:512px;border-collapse:separate;border-spacing:0;max-width:100%;width:100%;"><thead><tr><th style="text-align:left;padding:8px 8px 8px 0;vertical-align:bottom;border-bottom:2px solid rgba(0, 0, 0, .125);">Prop</th><th style="text-align:left;padding:8px 8px 8px 0;vertical-align:bottom;border-bottom:2px solid rgba(0, 0, 0, .125);">Type</th><th style="text-align:left;padding:8px 8px 8px 0;vertical-align:bottom;border-bottom:2px solid rgba(0, 0, 0, .125);">Description</th></tr></thead><tbody><tr><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;" title="false">hide </td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;">bool</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);">Accessibly hide label for use in high density UI.
This can still cause accessibility issues. Use this with caution.</td></tr></tbody></table></div><div style="box-sizing:border-box;padding-top:16px;" class="Box"><div style="display:flex;margin-left:-8px;margin-right:-8px;" class="Flex"><div style="box-sizing:border-box;flex:1 1 auto;" class="Box"></div><a href="#" class="NavItem" style="font-size:12px;font-weight:600;line-height:1rem;text-decoration:none;display:flex;align-items:center;align-self:stretch;padding:4px 8px;color:inherit;cursor:pointer;">Back to Top</a></div></div></section><section id="LinkBlock" class="Section" style="padding-top:64px;padding-bottom:64px;"><header class="SectionHeader" style="display:flex;align-items:center;padding-bottom:8px;margin-top:32px;margin-bottom:32px;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:rgba(0, 0, 0, .25);border-color:inherit;"><div style="flex:1 1 auto;"><h2 class="Heading" style="font-size:24px;font-weight:600;margin:0;"><a href="#LinkBlock" style="color:inherit;text-decoration:none;">LinkBlock</a></h2><p class="Text" style="font-size:16px;margin:0;">Unstyled display block link</p></div></header><div class="Panel" style="padding:16px;margin-bottom:16px;background-color:#fff;border-width:1px;border-style:solid;border-color:#111;border-radius:2px;"><div class="PanelHeader" style="display:flex;align-items:center;font-weight:bold;margin-top:-17px;margin-right:-17px;margin-left:-17px;margin-bottom:16px;padding:16px;color:#fff;background-color:#111;border-radius:2px 2px 0 0;">Example</div><div class="mb2"><a href="#LinkBlock" class="LinkBlock" style="display:block;text-decoration:none;color:inherit;"><div class="Media" style="display:flex;margin-bottom:16px;align-items:center;"><img src="http://placehold.it/96/08e/fff" style="flex:none;max-width:none;margin-right:16px;margin-left:0;"/><div><h3 class="Heading" style="font-size:20px;font-weight:600;margin:0;">LinkBlock</h3></div></div></a><pre class="Pre" style="font-family:'Roboto Mono', Menlo, Consolas, monospace;padding-left:16px;margin-bottom:16px;border-left:4px solid rgba(0, 0, 0, .25);overflow-x:scroll;"><LinkBlock
Component="a"
href="#LinkBlock"
>
<Media
align="center"
img="http://placehold.it/96/08e/fff"
>
<Heading level={3}>
LinkBlock
</Heading>
</Media>
</LinkBlock></pre></div><div></div></div><div style="max-width:100%;overflow-x:scroll;"><table style="font-size:14px;line-height:1.125;min-width:512px;border-collapse:separate;border-spacing:0;max-width:100%;width:100%;"><thead><tr><th style="text-align:left;padding:8px 8px 8px 0;vertical-align:bottom;border-bottom:2px solid rgba(0, 0, 0, .125);">Prop</th><th style="text-align:left;padding:8px 8px 8px 0;vertical-align:bottom;border-bottom:2px solid rgba(0, 0, 0, .125);">Type</th><th style="text-align:left;padding:8px 8px 8px 0;vertical-align:bottom;border-bottom:2px solid rgba(0, 0, 0, .125);">Description</th></tr></thead><tbody><tr><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;" title="false">Component </td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;">node</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);">Root component - useful for use with react-router's Link component</td></tr></tbody></table></div><div style="box-sizing:border-box;padding-top:16px;" class="Box"><div style="display:flex;margin-left:-8px;margin-right:-8px;" class="Flex"><div style="box-sizing:border-box;flex:1 1 auto;" class="Box"></div><a href="#" class="NavItem" style="font-size:12px;font-weight:600;line-height:1rem;text-decoration:none;display:flex;align-items:center;align-self:stretch;padding:4px 8px;color:inherit;cursor:pointer;">Back to Top</a></div></div></section><section id="Media" class="Section" style="padding-top:64px;padding-bottom:64px;"><header class="SectionHeader" style="display:flex;align-items:center;padding-bottom:8px;margin-top:32px;margin-bottom:32px;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:rgba(0, 0, 0, .25);border-color:inherit;"><div style="flex:1 1 auto;"><h2 class="Heading" style="font-size:24px;font-weight:600;margin:0;"><a href="#Media" style="color:inherit;text-decoration:none;">Media</a></h2><p class="Text" style="font-size:16px;margin:0;">Media object with vertical alignment using flexbox</p></div></header><div class="Panel" style="padding:16px;margin-bottom:16px;background-color:#fff;border-width:1px;border-style:solid;border-color:#111;border-radius:2px;"><div class="PanelHeader" style="display:flex;align-items:center;font-weight:bold;margin-top:-17px;margin-right:-17px;margin-left:-17px;margin-bottom:16px;padding:16px;color:#fff;background-color:#111;border-radius:2px 2px 0 0;">Example</div><div class="mb2"><div class="Media" style="display:flex;margin-bottom:16px;align-items:center;"><img src="http://placehold.it/128/08e/fff" style="flex:none;max-width:none;margin-right:16px;margin-left:0;"/><div><h3 class="Heading" style="font-size:20px;font-weight:600;margin:0;">Media Object</h3><p class="Text" style="font-size:16px;margin:0;">With alignment options</p></div></div><pre class="Pre" style="font-family:'Roboto Mono', Menlo, Consolas, monospace;padding-left:16px;margin-bottom:16px;border-left:4px solid rgba(0, 0, 0, .25);overflow-x:scroll;"><Media
align="center"
img="http://placehold.it/128/08e/fff"
>
<Heading level={3}>
Media Object
</Heading>
<Text>
With alignment options
</Text>
</Media></pre></div><div class="Permutations"><p class="Text" style="font-size:12px;margin:0;">Variations</p><div style="position:relative;margin-bottom:16px;"><div><div title="<Media img='http://placehold.it/96' right={true} align='top' />" name="Media" class="Media" style="display:flex;margin-bottom:16px;align-items:flex-start;margin-right:16px;"><img src="http://placehold.it/96" style="flex:none;max-width:none;margin-right:0;margin-left:16px;order:9999;"/><div>Media</div></div><div title="<Media img='http://placehold.it/96' right={true} align='center' />" name="Media" class="Media" style="display:flex;margin-bottom:16px;align-items:center;margin-right:16px;"><img src="http://placehold.it/96" style="flex:none;max-width:none;margin-right:0;margin-left:16px;order:9999;"/><div>Media</div></div><div title="<Media img='http://placehold.it/96' right={true} align='bottom' />" name="Media" class="Media" style="display:flex;margin-bottom:16px;align-items:flex-end;margin-right:16px;"><img src="http://placehold.it/96" style="flex:none;max-width:none;margin-right:0;margin-left:16px;order:9999;"/><div>Media</div></div><div title="<Media img='http://placehold.it/96' right={false} align='top' />" name="Media" class="Media" style="display:flex;margin-bottom:16px;align-items:flex-start;margin-right:16px;"><img src="http://placehold.it/96" style="flex:none;max-width:none;margin-right:16px;margin-left:0;"/><div>Media</div></div><div title="<Media img='http://placehold.it/96' right={false} align='center' />" name="Media" class="Media" style="display:flex;margin-bottom:16px;align-items:center;margin-right:16px;"><img src="http://placehold.it/96" style="flex:none;max-width:none;margin-right:16px;margin-left:0;"/><div>Media</div></div><div title="<Media img='http://placehold.it/96' right={false} align='bottom' />" name="Media" class="Media" style="display:flex;margin-bottom:16px;align-items:flex-end;margin-right:16px;"><img src="http://placehold.it/96" style="flex:none;max-width:none;margin-right:16px;margin-left:0;"/><div>Media</div></div></div></div></div></div><div style="max-width:100%;overflow-x:scroll;"><table style="font-size:14px;line-height:1.125;min-width:512px;border-collapse:separate;border-spacing:0;max-width:100%;width:100%;"><thead><tr><th style="text-align:left;padding:8px 8px 8px 0;vertical-align:bottom;border-bottom:2px solid rgba(0, 0, 0, .125);">Prop</th><th style="text-align:left;padding:8px 8px 8px 0;vertical-align:bottom;border-bottom:2px solid rgba(0, 0, 0, .125);">Type</th><th style="text-align:left;padding:8px 8px 8px 0;vertical-align:bottom;border-bottom:2px solid rgba(0, 0, 0, .125);">Description</th></tr></thead><tbody><tr><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;" title="false">img </td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;">string</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);">Image source</td></tr><tr><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;" title="false">right </td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;">bool</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);">Displays image to the right</td></tr><tr><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;" title="false">align </td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;">oneOf(['top', 'center', 'bottom'])</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);">Vertical alignment</td></tr></tbody></table></div><div style="box-sizing:border-box;padding-top:16px;" class="Box"><div style="display:flex;margin-left:-8px;margin-right:-8px;" class="Flex"><div style="box-sizing:border-box;flex:1 1 auto;" class="Box"></div><a href="#" class="NavItem" style="font-size:12px;font-weight:600;line-height:1rem;text-decoration:none;display:flex;align-items:center;align-self:stretch;padding:4px 8px;color:inherit;cursor:pointer;">Back to Top</a></div></div></section><section id="Menu" class="Section" style="padding-top:64px;padding-bottom:64px;"><header class="SectionHeader" style="display:flex;align-items:center;padding-bottom:8px;margin-top:32px;margin-bottom:32px;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:rgba(0, 0, 0, .25);border-color:inherit;"><div style="flex:1 1 auto;"><h2 class="Heading" style="font-size:24px;font-weight:600;margin:0;"><a href="#Menu" style="color:inherit;text-decoration:none;">Menu</a></h2><p class="Text" style="font-size:16px;margin:0;">Menu component for navigation links and actions</p></div></header><div class="Panel" style="padding:16px;margin-bottom:16px;background-color:#fff;border-width:1px;border-style:solid;border-color:#111;border-radius:2px;"><div class="PanelHeader" style="display:flex;align-items:center;font-weight:bold;margin-top:-17px;margin-right:-17px;margin-left:-17px;margin-bottom:16px;padding:16px;color:#fff;background-color:#111;border-radius:2px 2px 0 0;">Example</div><div class="mb2"><div class="Menu" style="display:flex;flex-direction:column;min-width:128px;margin-bottom:16px;overflow:hidden;border-radius:2px;border-width:1px;border-style:solid;background-color:#fff;border-color:rgba(0, 0, 0, .25);"><a class="NavItem" style="font-size:14px;font-weight:600;line-height:1rem;text-decoration:none;display:flex;align-items:center;align-self:stretch;padding:8px;color:inherit;cursor:pointer;">Menu</a><a class="NavItem" style="font-size:14px;font-weight:600;line-height:1rem;text-decoration:none;display:flex;align-items:center;align-self:stretch;padding:8px;color:inherit;cursor:pointer;">NavItem</a><a class="NavItem" style="font-size:14px;font-weight:600;line-height:1rem;text-decoration:none;display:flex;align-items:center;align-self:stretch;padding:8px;color:inherit;cursor:pointer;">NavItem</a></div><pre class="Pre" style="font-family:'Roboto Mono', Menlo, Consolas, monospace;padding-left:16px;margin-bottom:16px;border-left:4px solid rgba(0, 0, 0, .25);overflow-x:scroll;"><Menu>
<NavItem Component="a">
Menu
</NavItem>
<NavItem Component="a">
NavItem
</NavItem>
<NavItem Component="a">
NavItem
</NavItem>
</Menu></pre></div><div></div></div><div></div><div style="box-sizing:border-box;padding-top:16px;" class="Box"><div style="display:flex;margin-left:-8px;margin-right:-8px;" class="Flex"><div style="box-sizing:border-box;flex:1 1 auto;" class="Box"></div><a href="#" class="NavItem" style="font-size:12px;font-weight:600;line-height:1rem;text-decoration:none;display:flex;align-items:center;align-self:stretch;padding:4px 8px;color:inherit;cursor:pointer;">Back to Top</a></div></div></section><section id="Message" class="Section" style="padding-top:64px;padding-bottom:64px;"><header class="SectionHeader" style="display:flex;align-items:center;padding-bottom:8px;margin-top:32px;margin-bottom:32px;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:rgba(0, 0, 0, .25);border-color:inherit;"><div style="flex:1 1 auto;"><h2 class="Heading" style="font-size:24px;font-weight:600;margin:0;"><a href="#Message" style="color:inherit;text-decoration:none;">Message</a></h2><p class="Text" style="font-size:16px;margin:0;">Component for displaying flash and error messages</p></div></header><div class="Panel" style="padding:16px;margin-bottom:16px;background-color:#fff;border-width:1px;border-style:solid;border-color:#111;border-radius:2px;"><div class="PanelHeader" style="display:flex;align-items:center;font-weight:bold;margin-top:-17px;margin-right:-17px;margin-left:-17px;margin-bottom:16px;padding:16px;color:#fff;background-color:#111;border-radius:2px 2px 0 0;">Example</div><div class="mb2"><div class="Message" style="font-weight:600;display:flex;align-items:center;padding:16px;margin-bottom:16px;color:#fff;background-color:#1c7;border-radius:2px;">Hello Message!<div class="Space" style="display:inline-block;flex:1 1 auto;width:8px;"></div><button class="Close" title="Close" style="font-size:1.5em;line-height:1;font-weight:bold;margin:0;padding:0;cursor:pointer;color:inherit;background-color:transparent;border:0;-webkit-appearance:none;">×</button></div><pre class="Pre" style="font-family:'Roboto Mono', Menlo, Consolas, monospace;padding-left:16px;margin-bottom:16px;border-left:4px solid rgba(0, 0, 0, .25);overflow-x:scroll;"><Message type="success">
Hello Message!
<Space
auto={true}
x={1}
/>
<Close />
</Message></pre></div><div class="Permutations"><p class="Text" style="font-size:12px;margin:0;">Variations</p><div style="position:relative;margin-bottom:16px;"><div><div title="<Message type='default' />" name="Message" class="Message" style="font-weight:600;display:flex;align-items:center;padding:16px;margin-bottom:16px;color:#fff;background-color:#111;border-radius:2px;margin-right:16px;">Message</div><div title="<Message type='info' />" name="Message" class="Message" style="font-weight:600;display:flex;align-items:center;padding:16px;margin-bottom:16px;color:#fff;background-color:#08e;border-radius:2px;margin-right:16px;">Message</div><div title="<Message type='success' />" name="Message" class="Message" style="font-weight:600;display:flex;align-items:center;padding:16px;margin-bottom:16px;color:#fff;background-color:#1c7;border-radius:2px;margin-right:16px;">Message</div><div title="<Message type='warning' />" name="Message" class="Message" style="font-weight:600;display:flex;align-items:center;padding:16px;margin-bottom:16px;color:#fff;background-color:#f90;border-radius:2px;margin-right:16px;">Message</div><div title="<Message type='error' />" name="Message" class="Message" style="font-weight:600;display:flex;align-items:center;padding:16px;margin-bottom:16px;color:#fff;background-color:#f52;border-radius:2px;margin-right:16px;">Message</div></div></div></div></div><div style="max-width:100%;overflow-x:scroll;"><table style="font-size:14px;line-height:1.125;min-width:512px;border-collapse:separate;border-spacing:0;max-width:100%;width:100%;"><thead><tr><th style="text-align:left;padding:8px 8px 8px 0;vertical-align:bottom;border-bottom:2px solid rgba(0, 0, 0, .125);">Prop</th><th style="text-align:left;padding:8px 8px 8px 0;vertical-align:bottom;border-bottom:2px solid rgba(0, 0, 0, .125);">Type</th><th style="text-align:left;padding:8px 8px 8px 0;vertical-align:bottom;border-bottom:2px solid rgba(0, 0, 0, .125);">Description</th></tr></thead><tbody><tr><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;" title="false">type </td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;">oneOf(['default', 'info', 'success', 'warning', 'error'])</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);">Sets color based on type of message</td></tr></tbody></table></div><div style="box-sizing:border-box;padding-top:16px;" class="Box"><div style="display:flex;margin-left:-8px;margin-right:-8px;" class="Flex"><div style="box-sizing:border-box;flex:1 1 auto;" class="Box"></div><a href="#" class="NavItem" style="font-size:12px;font-weight:600;line-height:1rem;text-decoration:none;display:flex;align-items:center;align-self:stretch;padding:4px 8px;color:inherit;cursor:pointer;">Back to Top</a></div></div></section><section id="NavItem" class="Section" style="padding-top:64px;padding-bottom:64px;"><header class="SectionHeader" style="display:flex;align-items:center;padding-bottom:8px;margin-top:32px;margin-bottom:32px;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:rgba(0, 0, 0, .25);border-color:inherit;"><div style="flex:1 1 auto;"><h2 class="Heading" style="font-size:24px;font-weight:600;margin:0;"><a href="#NavItem" style="color:inherit;text-decoration:none;">NavItem</a></h2><p class="Text" style="font-size:16px;margin:0;">Link for use in navigation. Inherits color</p></div></header><div class="Panel" style="padding:16px;margin-bottom:16px;background-color:#fff;border-width:1px;border-style:solid;border-color:#111;border-radius:2px;"><div class="PanelHeader" style="display:flex;align-items:center;font-weight:bold;margin-top:-17px;margin-right:-17px;margin-left:-17px;margin-bottom:16px;padding:16px;color:#fff;background-color:#111;border-radius:2px 2px 0 0;">Example</div><div class="Permutations"><p class="Text" style="font-size:12px;margin:0;">Variations</p><div style="position:relative;margin-bottom:16px;"><div><a title="<NavItem small={true} />" name="NavItem" class="NavItem" style="font-size:12px;font-weight:600;line-height:1rem;text-decoration:none;display:flex;align-items:center;align-self:stretch;padding:4px 8px;color:inherit;cursor:pointer;margin-right:16px;">NavItem</a><a title="<NavItem small={false} />" name="NavItem" class="NavItem" style="font-size:14px;font-weight:600;line-height:1rem;text-decoration:none;display:flex;align-items:center;align-self:stretch;padding:8px;color:inherit;cursor:pointer;margin-right:16px;">NavItem</a></div></div></div></div><div style="max-width:100%;overflow-x:scroll;"><table style="font-size:14px;line-height:1.125;min-width:512px;border-collapse:separate;border-spacing:0;max-width:100%;width:100%;"><thead><tr><th style="text-align:left;padding:8px 8px 8px 0;vertical-align:bottom;border-bottom:2px solid rgba(0, 0, 0, .125);">Prop</th><th style="text-align:left;padding:8px 8px 8px 0;vertical-align:bottom;border-bottom:2px solid rgba(0, 0, 0, .125);">Type</th><th style="text-align:left;padding:8px 8px 8px 0;vertical-align:bottom;border-bottom:2px solid rgba(0, 0, 0, .125);">Description</th></tr></thead><tbody><tr><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;" title="false">small </td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;">bool</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);">Sets a smaller font size for compact UI</td></tr><tr><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;" title="false">Component </td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;">node</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);">Root component - useful for use with react-router's Link component</td></tr></tbody></table></div><div style="box-sizing:border-box;padding-top:16px;" class="Box"><div style="display:flex;margin-left:-8px;margin-right:-8px;" class="Flex"><div style="box-sizing:border-box;flex:1 1 auto;" class="Box"></div><a href="#" class="NavItem" style="font-size:12px;font-weight:600;line-height:1rem;text-decoration:none;display:flex;align-items:center;align-self:stretch;padding:4px 8px;color:inherit;cursor:pointer;">Back to Top</a></div></div></section><section id="Overlay" class="Section" style="padding-top:64px;padding-bottom:64px;"><header class="SectionHeader" style="display:flex;align-items:center;padding-bottom:8px;margin-top:32px;margin-bottom:32px;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:rgba(0, 0, 0, .25);border-color:inherit;"><div style="flex:1 1 auto;"><h2 class="Heading" style="font-size:24px;font-weight:600;margin:0;"><a href="#Overlay" style="color:inherit;text-decoration:none;">Overlay</a></h2><p class="Text" style="font-size:16px;margin:0;">Fixed positioned overlay for use with modal dialogs</p></div></header><div class="Panel" style="padding:16px;margin-bottom:16px;background-color:#fff;border-width:1px;border-style:solid;border-color:#111;border-radius:2px;"><div class="PanelHeader" style="display:flex;align-items:center;font-weight:bold;margin-top:-17px;margin-right:-17px;margin-left:-17px;margin-bottom:16px;padding:16px;color:#fff;background-color:#111;border-radius:2px 2px 0 0;">Example</div><div class="mb2"><a href="demo">See demo</a><pre class="Pre" style="font-family:'Roboto Mono', Menlo, Consolas, monospace;padding-left:16px;margin-bottom:16px;border-left:4px solid rgba(0, 0, 0, .25);overflow-x:scroll;"><a href="demo">
See demo
</a></pre></div><div></div></div><div style="max-width:100%;overflow-x:scroll;"><table style="font-size:14px;line-height:1.125;min-width:512px;border-collapse:separate;border-spacing:0;max-width:100%;width:100%;"><thead><tr><th style="text-align:left;padding:8px 8px 8px 0;vertical-align:bottom;border-bottom:2px solid rgba(0, 0, 0, .125);">Prop</th><th style="text-align:left;padding:8px 8px 8px 0;vertical-align:bottom;border-bottom:2px solid rgba(0, 0, 0, .125);">Type</th><th style="text-align:left;padding:8px 8px 8px 0;vertical-align:bottom;border-bottom:2px solid rgba(0, 0, 0, .125);">Description</th></tr></thead><tbody><tr><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;" title="false">open </td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;">bool</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);">Shows and hides overlay</td></tr><tr><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;" title="false">dark </td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;">bool</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);">Sets dark transparent overlay style</td></tr><tr><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;" title="false">box </td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;">bool</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);">Sets padding and background white for the content container</td></tr><tr><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;" title="false">fullWidth </td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;">bool</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);">Sets content container full width</td></tr><tr><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;" title="false">onDismiss </td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;">func</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);">Click event callback for the Overlay background</td></tr></tbody></table></div><div style="box-sizing:border-box;padding-top:16px;" class="Box"><div style="display:flex;margin-left:-8px;margin-right:-8px;" class="Flex"><div style="box-sizing:border-box;flex:1 1 auto;" class="Box"></div><a href="#" class="NavItem" style="font-size:12px;font-weight:600;line-height:1rem;text-decoration:none;display:flex;align-items:center;align-self:stretch;padding:4px 8px;color:inherit;cursor:pointer;">Back to Top</a></div></div></section><section id="PageHeader" class="Section" style="padding-top:64px;padding-bottom:64px;"><header class="SectionHeader" style="display:flex;align-items:center;padding-bottom:8px;margin-top:32px;margin-bottom:32px;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:rgba(0, 0, 0, .25);border-color:inherit;"><div style="flex:1 1 auto;"><h2 class="Heading" style="font-size:24px;font-weight:600;margin:0;"><a href="#PageHeader" style="color:inherit;text-decoration:none;">PageHeader</a></h2><p class="Text" style="font-size:16px;margin:0;">Main page header with description</p></div></header><div class="Panel" style="padding:16px;margin-bottom:16px;background-color:#fff;border-width:1px;border-style:solid;border-color:#111;border-radius:2px;"><div class="PanelHeader" style="display:flex;align-items:center;font-weight:bold;margin-top:-17px;margin-right:-17px;margin-left:-17px;margin-bottom:16px;padding:16px;color:#fff;background-color:#111;border-radius:2px 2px 0 0;">Example</div><div class="mb2"><header class="PageHeader" style="display:flex;flex-wrap:wrap;align-items:center;padding-top:32px;padding-bottom:16px;margin-top:64px;margin-bottom:64px;border-bottom-width:2px;border-bottom-style:solid;border-bottom-color:rgba(0, 0, 0, .25);border-color:inherit;"><div style="flex:1 1 auto;margin-bottom:16px;"><h1 class="Heading" style="font-size:32px;font-weight:600;margin:0;">Page Header</h1><p style="margin:0;">Description about the page</p></div></header><pre class="Pre" style="font-family:'Roboto Mono', Menlo, Consolas, monospace;padding-left:16px;margin-bottom:16px;border-left:4px solid rgba(0, 0, 0, .25);overflow-x:scroll;"><PageHeader
description="Description about the page"
heading="Page Header"
/></pre></div><div></div></div><div style="max-width:100%;overflow-x:scroll;"><table style="font-size:14px;line-height:1.125;min-width:512px;border-collapse:separate;border-spacing:0;max-width:100%;width:100%;"><thead><tr><th style="text-align:left;padding:8px 8px 8px 0;vertical-align:bottom;border-bottom:2px solid rgba(0, 0, 0, .125);">Prop</th><th style="text-align:left;padding:8px 8px 8px 0;vertical-align:bottom;border-bottom:2px solid rgba(0, 0, 0, .125);">Type</th><th style="text-align:left;padding:8px 8px 8px 0;vertical-align:bottom;border-bottom:2px solid rgba(0, 0, 0, .125);">Description</th></tr></thead><tbody><tr><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;" title="false">heading </td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;">string</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);">Page heading</td></tr><tr><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;" title="false">description </td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;">string</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);">Description of page</td></tr></tbody></table></div><div style="box-sizing:border-box;padding-top:16px;" class="Box"><div style="display:flex;margin-left:-8px;margin-right:-8px;" class="Flex"><div style="box-sizing:border-box;flex:1 1 auto;" class="Box"></div><a href="#" class="NavItem" style="font-size:12px;font-weight:600;line-height:1rem;text-decoration:none;display:flex;align-items:center;align-self:stretch;padding:4px 8px;color:inherit;cursor:pointer;">Back to Top</a></div></div></section><section id="Panel" class="Section" style="padding-top:64px;padding-bottom:64px;"><header class="SectionHeader" style="display:flex;align-items:center;padding-bottom:8px;margin-top:32px;margin-bottom:32px;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:rgba(0, 0, 0, .25);border-color:inherit;"><div style="flex:1 1 auto;"><h2 class="Heading" style="font-size:24px;font-weight:600;margin:0;"><a href="#Panel" style="color:inherit;text-decoration:none;">Panel</a></h2><p class="Text" style="font-size:16px;margin:0;">Panel for containing small pieces of information</p></div></header><div class="Panel" style="padding:16px;margin-bottom:16px;background-color:#fff;border-width:1px;border-style:solid;border-color:#111;border-radius:2px;"><div class="PanelHeader" style="display:flex;align-items:center;font-weight:bold;margin-top:-17px;margin-right:-17px;margin-left:-17px;margin-bottom:16px;padding:16px;color:#fff;background-color:#111;border-radius:2px 2px 0 0;">Example</div><div class="mb2"><div class="Panel" style="padding:16px;margin-bottom:16px;background-color:#fff;border-width:1px;border-style:solid;border-color:#08e;border-radius:2px;"><div class="PanelHeader" style="display:flex;align-items:center;font-weight:bold;margin-top:-17px;margin-right:-17px;margin-left:-17px;margin-bottom:16px;padding:16px;color:#fff;background-color:#08e;border-radius:2px 2px 0 0;">Panel</div><p class="Text" style="font-size:16px;margin:0;">Panels are great for visually separating UI, content, or data from the rest of the page.</p><div class="PanelFooter" style="font-size:12px;display:flex;align-items:center;margin-top:16px;margin-right:-16px;margin-bottom:-16px;margin-left:-16px;padding:16px;border-top-width:1px;border-top-style:solid;border-top-color:#08e;border-radius:0 0 2px 2px;">The footer is a good place for less important information</div></div><pre class="Pre" style="font-family:'Roboto Mono', Menlo, Consolas, monospace;padding-left:16px;margin-bottom:16px;border-left:4px solid rgba(0, 0, 0, .25);overflow-x:scroll;"><Panel type="info">
<PanelHeader type="default">
Panel
</PanelHeader>
<Text>
Panels are great for visually separating UI, content, or data from the rest of the page.
</Text>
<PanelFooter type="default">
The footer is a good place for less important information
</PanelFooter>
</Panel></pre></div><div class="Permutations"><p class="Text" style="font-size:12px;margin:0;">Variations</p><div style="position:relative;margin-bottom:16px;"><div><div title="<Panel type='default' />" name="Panel" class="Panel" style="padding:16px;margin-bottom:16px;background-color:#fff;border-width:1px;border-style:solid;border-color:#111;border-radius:2px;margin-right:16px;">Panel</div><div title="<Panel type='info' />" name="Panel" class="Panel" style="padding:16px;margin-bottom:16px;background-color:#fff;border-width:1px;border-style:solid;border-color:#08e;border-radius:2px;margin-right:16px;">Panel</div><div title="<Panel type='success' />" name="Panel" class="Panel" style="padding:16px;margin-bottom:16px;background-color:#fff;border-width:1px;border-style:solid;border-color:#1c7;border-radius:2px;margin-right:16px;">Panel</div><div title="<Panel type='warning' />" name="Panel" class="Panel" style="padding:16px;margin-bottom:16px;background-color:#fff;border-width:1px;border-style:solid;border-color:#f90;border-radius:2px;margin-right:16px;">Panel</div><div title="<Panel type='error' />" name="Panel" class="Panel" style="padding:16px;margin-bottom:16px;background-color:#fff;border-width:1px;border-style:solid;border-color:#f52;border-radius:2px;margin-right:16px;">Panel</div></div></div></div></div><div style="max-width:100%;overflow-x:scroll;"><table style="font-size:14px;line-height:1.125;min-width:512px;border-collapse:separate;border-spacing:0;max-width:100%;width:100%;"><thead><tr><th style="text-align:left;padding:8px 8px 8px 0;vertical-align:bottom;border-bottom:2px solid rgba(0, 0, 0, .125);">Prop</th><th style="text-align:left;padding:8px 8px 8px 0;vertical-align:bottom;border-bottom:2px solid rgba(0, 0, 0, .125);">Type</th><th style="text-align:left;padding:8px 8px 8px 0;vertical-align:bottom;border-bottom:2px solid rgba(0, 0, 0, .125);">Description</th></tr></thead><tbody><tr><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;" title="false">type </td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;">oneOf(['default', 'info', 'success', 'warning', 'error'])</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);">Sets border color based on type of panel</td></tr></tbody></table></div><div style="box-sizing:border-box;padding-top:16px;" class="Box"><div style="display:flex;margin-left:-8px;margin-right:-8px;" class="Flex"><div style="box-sizing:border-box;flex:1 1 auto;" class="Box"></div><a href="#" class="NavItem" style="font-size:12px;font-weight:600;line-height:1rem;text-decoration:none;display:flex;align-items:center;align-self:stretch;padding:4px 8px;color:inherit;cursor:pointer;">Back to Top</a></div></div></section><section id="PanelFooter" class="Section" style="padding-top:64px;padding-bottom:64px;"><header class="SectionHeader" style="display:flex;align-items:center;padding-bottom:8px;margin-top:32px;margin-bottom:32px;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:rgba(0, 0, 0, .25);border-color:inherit;"><div style="flex:1 1 auto;"><h2 class="Heading" style="font-size:24px;font-weight:600;margin:0;"><a href="#PanelFooter" style="color:inherit;text-decoration:none;">PanelFooter</a></h2><p class="Text" style="font-size:16px;margin:0;">Footer for Panel component with vertical centering using flexbox</p></div></header><div class="Panel" style="padding:16px;margin-bottom:16px;background-color:#fff;border-width:1px;border-style:solid;border-color:#111;border-radius:2px;"><div class="PanelHeader" style="display:flex;align-items:center;font-weight:bold;margin-top:-17px;margin-right:-17px;margin-left:-17px;margin-bottom:16px;padding:16px;color:#fff;background-color:#111;border-radius:2px 2px 0 0;">Example</div><div class="Permutations"><p class="Text" style="font-size:12px;margin:0;">Variations</p><div style="position:relative;margin-bottom:16px;"><div><div title="<PanelFooter type='default' />" name="PanelFooter" class="PanelFooter" style="font-size:12px;display:flex;align-items:center;margin-top:16px;margin-right:16px;margin-bottom:-16px;margin-left:-16px;padding:16px;border-top-width:1px;border-top-style:solid;border-top-color:#111;border-radius:0 0 2px 2px;">PanelFooter</div><div title="<PanelFooter type='info' />" name="PanelFooter" class="PanelFooter" style="font-size:12px;display:flex;align-items:center;margin-top:16px;margin-right:16px;margin-bottom:-16px;margin-left:-16px;padding:16px;border-top-width:1px;border-top-style:solid;border-top-color:#08e;border-radius:0 0 2px 2px;">PanelFooter</div><div title="<PanelFooter type='success' />" name="PanelFooter" class="PanelFooter" style="font-size:12px;display:flex;align-items:center;margin-top:16px;margin-right:16px;margin-bottom:-16px;margin-left:-16px;padding:16px;border-top-width:1px;border-top-style:solid;border-top-color:#1c7;border-radius:0 0 2px 2px;">PanelFooter</div><div title="<PanelFooter type='warning' />" name="PanelFooter" class="PanelFooter" style="font-size:12px;display:flex;align-items:center;margin-top:16px;margin-right:16px;margin-bottom:-16px;margin-left:-16px;padding:16px;border-top-width:1px;border-top-style:solid;border-top-color:#f90;border-radius:0 0 2px 2px;">PanelFooter</div><div title="<PanelFooter type='error' />" name="PanelFooter" class="PanelFooter" style="font-size:12px;display:flex;align-items:center;margin-top:16px;margin-right:16px;margin-bottom:-16px;margin-left:-16px;padding:16px;border-top-width:1px;border-top-style:solid;border-top-color:#f52;border-radius:0 0 2px 2px;">PanelFooter</div></div></div></div></div><div style="max-width:100%;overflow-x:scroll;"><table style="font-size:14px;line-height:1.125;min-width:512px;border-collapse:separate;border-spacing:0;max-width:100%;width:100%;"><thead><tr><th style="text-align:left;padding:8px 8px 8px 0;vertical-align:bottom;border-bottom:2px solid rgba(0, 0, 0, .125);">Prop</th><th style="text-align:left;padding:8px 8px 8px 0;vertical-align:bottom;border-bottom:2px solid rgba(0, 0, 0, .125);">Type</th><th style="text-align:left;padding:8px 8px 8px 0;vertical-align:bottom;border-bottom:2px solid rgba(0, 0, 0, .125);">Description</th></tr></thead><tbody><tr><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;" title="false">type </td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;">oneOf(['default', 'info', 'success', 'warning', 'error'])</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);">Sets background color based on the type of panel</td></tr></tbody></table></div><div style="box-sizing:border-box;padding-top:16px;" class="Box"><div style="display:flex;margin-left:-8px;margin-right:-8px;" class="Flex"><div style="box-sizing:border-box;flex:1 1 auto;" class="Box"></div><a href="#" class="NavItem" style="font-size:12px;font-weight:600;line-height:1rem;text-decoration:none;display:flex;align-items:center;align-self:stretch;padding:4px 8px;color:inherit;cursor:pointer;">Back to Top</a></div></div></section><section id="PanelHeader" class="Section" style="padding-top:64px;padding-bottom:64px;"><header class="SectionHeader" style="display:flex;align-items:center;padding-bottom:8px;margin-top:32px;margin-bottom:32px;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:rgba(0, 0, 0, .25);border-color:inherit;"><div style="flex:1 1 auto;"><h2 class="Heading" style="font-size:24px;font-weight:600;margin:0;"><a href="#PanelHeader" style="color:inherit;text-decoration:none;">PanelHeader</a></h2><p class="Text" style="font-size:16px;margin:0;">Header for Panel component with vertical centering using flexbox</p></div></header><div class="Panel" style="padding:16px;margin-bottom:16px;background-color:#fff;border-width:1px;border-style:solid;border-color:#111;border-radius:2px;"><div class="PanelHeader" style="display:flex;align-items:center;font-weight:bold;margin-top:-17px;margin-right:-17px;margin-left:-17px;margin-bottom:16px;padding:16px;color:#fff;background-color:#111;border-radius:2px 2px 0 0;">Example</div><div class="Permutations"><p class="Text" style="font-size:12px;margin:0;">Variations</p><div style="position:relative;margin-bottom:16px;"><div><div title="<PanelHeader type='default' />" name="PanelHeader" class="PanelHeader" style="display:flex;align-items:center;font-weight:bold;margin-top:-17px;margin-right:16px;margin-left:-17px;margin-bottom:16px;padding:16px;color:#fff;background-color:#111;border-radius:2px 2px 0 0;">PanelHeader</div><div title="<PanelHeader type='info' />" name="PanelHeader" class="PanelHeader" style="display:flex;align-items:center;font-weight:bold;margin-top:-17px;margin-right:16px;margin-left:-17px;margin-bottom:16px;padding:16px;color:#fff;background-color:#08e;border-radius:2px 2px 0 0;">PanelHeader</div><div title="<PanelHeader type='success' />" name="PanelHeader" class="PanelHeader" style="display:flex;align-items:center;font-weight:bold;margin-top:-17px;margin-right:16px;margin-left:-17px;margin-bottom:16px;padding:16px;color:#fff;background-color:#1c7;border-radius:2px 2px 0 0;">PanelHeader</div><div title="<PanelHeader type='warning' />" name="PanelHeader" class="PanelHeader" style="display:flex;align-items:center;font-weight:bold;margin-top:-17px;margin-right:16px;margin-left:-17px;margin-bottom:16px;padding:16px;color:#fff;background-color:#f90;border-radius:2px 2px 0 0;">PanelHeader</div><div title="<PanelHeader type='error' />" name="PanelHeader" class="PanelHeader" style="display:flex;align-items:center;font-weight:bold;margin-top:-17px;margin-right:16px;margin-left:-17px;margin-bottom:16px;padding:16px;color:#fff;background-color:#f52;border-radius:2px 2px 0 0;">PanelHeader</div></div></div></div></div><div style="max-width:100%;overflow-x:scroll;"><table style="font-size:14px;line-height:1.125;min-width:512px;border-collapse:separate;border-spacing:0;max-width:100%;width:100%;"><thead><tr><th style="text-align:left;padding:8px 8px 8px 0;vertical-align:bottom;border-bottom:2px solid rgba(0, 0, 0, .125);">Prop</th><th style="text-align:left;padding:8px 8px 8px 0;vertical-align:bottom;border-bottom:2px solid rgba(0, 0, 0, .125);">Type</th><th style="text-align:left;padding:8px 8px 8px 0;vertical-align:bottom;border-bottom:2px solid rgba(0, 0, 0, .125);">Description</th></tr></thead><tbody><tr><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;" title="false">type </td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;">oneOf(['default', 'info', 'success', 'warning', 'error'])</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);">Sets background color based on the type of panel</td></tr></tbody></table></div><div style="box-sizing:border-box;padding-top:16px;" class="Box"><div style="display:flex;margin-left:-8px;margin-right:-8px;" class="Flex"><div style="box-sizing:border-box;flex:1 1 auto;" class="Box"></div><a href="#" class="NavItem" style="font-size:12px;font-weight:600;line-height:1rem;text-decoration:none;display:flex;align-items:center;align-self:stretch;padding:4px 8px;color:inherit;cursor:pointer;">Back to Top</a></div></div></section><section id="Pre" class="Section" style="padding-top:64px;padding-bottom:64px;"><header class="SectionHeader" style="display:flex;align-items:center;padding-bottom:8px;margin-top:32px;margin-bottom:32px;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:rgba(0, 0, 0, .25);border-color:inherit;"><div style="flex:1 1 auto;"><h2 class="Heading" style="font-size:24px;font-weight:600;margin:0;"><a href="#Pre" style="color:inherit;text-decoration:none;">Pre</a></h2><p class="Text" style="font-size:16px;margin:0;">Pre element for displaying code examples</p></div></header><div class="Panel" style="padding:16px;margin-bottom:16px;background-color:#fff;border-width:1px;border-style:solid;border-color:#111;border-radius:2px;"><div class="PanelHeader" style="display:flex;align-items:center;font-weight:bold;margin-top:-17px;margin-right:-17px;margin-left:-17px;margin-bottom:16px;padding:16px;color:#fff;background-color:#111;border-radius:2px 2px 0 0;">Example</div><div class="mb2"><pre class="Pre" style="font-family:'Roboto Mono', Menlo, Consolas, monospace;padding-left:16px;margin-bottom:16px;border-left:4px solid rgba(0, 0, 0, .25);overflow-x:scroll;">const pre = { preformatted: 'text' }</pre><pre class="Pre" style="font-family:'Roboto Mono', Menlo, Consolas, monospace;padding-left:16px;margin-bottom:16px;border-left:4px solid rgba(0, 0, 0, .25);overflow-x:scroll;"><Pre>
const pre = { preformatted: 'text' }
</Pre></pre></div><div></div></div><div></div><div style="box-sizing:border-box;padding-top:16px;" class="Box"><div style="display:flex;margin-left:-8px;margin-right:-8px;" class="Flex"><div style="box-sizing:border-box;flex:1 1 auto;" class="Box"></div><a href="#" class="NavItem" style="font-size:12px;font-weight:600;line-height:1rem;text-decoration:none;display:flex;align-items:center;align-self:stretch;padding:4px 8px;color:inherit;cursor:pointer;">Back to Top</a></div></div></section><section id="Progress" class="Section" style="padding-top:64px;padding-bottom:64px;"><header class="SectionHeader" style="display:flex;align-items:center;padding-bottom:8px;margin-top:32px;margin-bottom:32px;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:rgba(0, 0, 0, .25);border-color:inherit;"><div style="flex:1 1 auto;"><h2 class="Heading" style="font-size:24px;font-weight:600;margin:0;"><a href="#Progress" style="color:inherit;text-decoration:none;">Progress</a></h2><p class="Text" style="font-size:16px;margin:0;">Progress element</p></div></header><div class="Panel" style="padding:16px;margin-bottom:16px;background-color:#fff;border-width:1px;border-style:solid;border-color:#111;border-radius:2px;"><div class="PanelHeader" style="display:flex;align-items:center;font-weight:bold;margin-top:-17px;margin-right:-17px;margin-left:-17px;margin-bottom:16px;padding:16px;color:#fff;background-color:#111;border-radius:2px 2px 0 0;">Example</div><div class="mb2"><div class="Progress" style="margin-bottom:16px;"><style> .Progress-progress::-webkit-progress-bar { background-color: rgba(0, 0, 0, .125); } .Progress-progress::-webkit-progress-value { background-color: currentcolor; } .Progress-progress::-moz-progress-bar { background-color: currentcolor; } </style><progress class="Progress-progress" value="0.25" style="display:block;width:100%;height:8px;overflow:hidden;background-color:rgba(0, 0, 0, .125);border:0;border-radius:9999px;-webkit-appearance:none;appearance:none;color:#08e;">0.25</progress></div><pre class="Pre" style="font-family:'Roboto Mono', Menlo, Consolas, monospace;padding-left:16px;margin-bottom:16px;border-left:4px solid rgba(0, 0, 0, .25);overflow-x:scroll;"><Progress value={0.25} /></pre></div><div></div></div><div style="max-width:100%;overflow-x:scroll;"><table style="font-size:14px;line-height:1.125;min-width:512px;border-collapse:separate;border-spacing:0;max-width:100%;width:100%;"><thead><tr><th style="text-align:left;padding:8px 8px 8px 0;vertical-align:bottom;border-bottom:2px solid rgba(0, 0, 0, .125);">Prop</th><th style="text-align:left;padding:8px 8px 8px 0;vertical-align:bottom;border-bottom:2px solid rgba(0, 0, 0, .125);">Type</th><th style="text-align:left;padding:8px 8px 8px 0;vertical-align:bottom;border-bottom:2px solid rgba(0, 0, 0, .125);">Description</th></tr></thead><tbody><tr><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;" title="false">value </td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;">number</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);">Value for progress bar</td></tr></tbody></table></div><div style="box-sizing:border-box;padding-top:16px;" class="Box"><div style="display:flex;margin-left:-8px;margin-right:-8px;" class="Flex"><div style="box-sizing:border-box;flex:1 1 auto;" class="Box"></div><a href="#" class="NavItem" style="font-size:12px;font-weight:600;line-height:1rem;text-decoration:none;display:flex;align-items:center;align-self:stretch;padding:4px 8px;color:inherit;cursor:pointer;">Back to Top</a></div></div></section><section id="Radio" class="Section" style="padding-top:64px;padding-bottom:64px;"><header class="SectionHeader" style="display:flex;align-items:center;padding-bottom:8px;margin-top:32px;margin-bottom:32px;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:rgba(0, 0, 0, .25);border-color:inherit;"><div style="flex:1 1 auto;"><h2 class="Heading" style="font-size:24px;font-weight:600;margin:0;"><a href="#Radio" style="color:inherit;text-decoration:none;">Radio</a></h2><p class="Text" style="font-size:16px;margin:0;">Radio input with label</p></div></header><div class="Panel" style="padding:16px;margin-bottom:16px;background-color:#fff;border-width:1px;border-style:solid;border-color:#111;border-radius:2px;"><div class="PanelHeader" style="display:flex;align-items:center;font-weight:bold;margin-top:-17px;margin-right:-17px;margin-left:-17px;margin-bottom:16px;padding:16px;color:#fff;background-color:#111;border-radius:2px 2px 0 0;">Example</div><div class="mb2"><div class="Radio"><label for="radio_example" class="Label" style="font-size:14px;font-weight:600;display:flex;align-items:baseline;cursor:pointer;"><input name="radio_example" type="radio" style="margin-right:8px;"/>Radio</label></div><pre class="Pre" style="font-family:'Roboto Mono', Menlo, Consolas, monospace;padding-left:16px;margin-bottom:16px;border-left:4px solid rgba(0, 0, 0, .25);overflow-x:scroll;"><Radio
label="Radio"
name="radio_example"
/></pre></div><div></div></div><div style="max-width:100%;overflow-x:scroll;"><table style="font-size:14px;line-height:1.125;min-width:512px;border-collapse:separate;border-spacing:0;max-width:100%;width:100%;"><thead><tr><th style="text-align:left;padding:8px 8px 8px 0;vertical-align:bottom;border-bottom:2px solid rgba(0, 0, 0, .125);">Prop</th><th style="text-align:left;padding:8px 8px 8px 0;vertical-align:bottom;border-bottom:2px solid rgba(0, 0, 0, .125);">Type</th><th style="text-align:left;padding:8px 8px 8px 0;vertical-align:bottom;border-bottom:2px solid rgba(0, 0, 0, .125);">Description</th></tr></thead><tbody><tr><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;" title="Required">label *</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;">string</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);">Label for form element</td></tr><tr><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;" title="Required">name *</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;">string</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);">Name attribute for form element</td></tr></tbody></table></div><div style="box-sizing:border-box;padding-top:16px;" class="Box"><div style="display:flex;margin-left:-8px;margin-right:-8px;" class="Flex"><div style="box-sizing:border-box;flex:1 1 auto;" class="Box"></div><a href="#" class="NavItem" style="font-size:12px;font-weight:600;line-height:1rem;text-decoration:none;display:flex;align-items:center;align-self:stretch;padding:4px 8px;color:inherit;cursor:pointer;">Back to Top</a></div></div></section><section id="Rating" class="Section" style="padding-top:64px;padding-bottom:64px;"><header class="SectionHeader" style="display:flex;align-items:center;padding-bottom:8px;margin-top:32px;margin-bottom:32px;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:rgba(0, 0, 0, .25);border-color:inherit;"><div style="flex:1 1 auto;"><h2 class="Heading" style="font-size:24px;font-weight:600;margin:0;"><a href="#Rating" style="color:inherit;text-decoration:none;">Rating</a></h2><p class="Text" style="font-size:16px;margin:0;">Star rating component with clickable buttons</p></div></header><div class="Panel" style="padding:16px;margin-bottom:16px;background-color:#fff;border-width:1px;border-style:solid;border-color:#111;border-radius:2px;"><div class="PanelHeader" style="display:flex;align-items:center;font-weight:bold;margin-top:-17px;margin-right:-17px;margin-left:-17px;margin-bottom:16px;padding:16px;color:#fff;background-color:#111;border-radius:2px 2px 0 0;">Example</div><div class="mb2"><div class="Rating" style="display:inline-flex;font-size:16px;color:#f90;"><button style="position:relative;font-size:inherit;line-height:1;margin:0;margin-right:.25em;padding:.25em 0;border:0;color:inherit;background-color:transparent;"><span>☆ </span><span style="position:absolute;top:.25em;left:0;">★</span></button><button style="position:relative;font-size:inherit;line-height:1;margin:0;margin-right:.25em;padding:.25em 0;border:0;color:inherit;background-color:transparent;"><span>☆ </span><span style="position:absolute;top:.25em;left:0;">★</span></button><button style="position:relative;font-size:inherit;line-height:1;margin:0;margin-right:.25em;padding:.25em 0;border:0;color:inherit;background-color:transparent;"><span>☆ </span><span style="position:absolute;top:.25em;left:0;">★</span></button><button style="position:relative;font-size:inherit;line-height:1;margin:0;margin-right:.25em;padding:.25em 0;border:0;color:inherit;background-color:transparent;"><span>☆ </span><span style="position:absolute;top:.25em;left:0;clip:rect(0, .5em, 1em, 0);">★</span></button><button style="position:relative;font-size:inherit;line-height:1;margin:0;margin-right:.25em;padding:.25em 0;border:0;color:inherit;background-color:transparent;"><span style="color:#ccc;">☆ </span><span style="position:absolute;top:.25em;left:0;display:none;">★</span></button></div><pre class="Pre" style="font-family:'Roboto Mono', Menlo, Consolas, monospace;padding-left:16px;margin-bottom:16px;border-left:4px solid rgba(0, 0, 0, .25);overflow-x:scroll;"><Rating value={3.5} /></pre></div><div></div></div><div style="max-width:100%;overflow-x:scroll;"><table style="font-size:14px;line-height:1.125;min-width:512px;border-collapse:separate;border-spacing:0;max-width:100%;width:100%;"><thead><tr><th style="text-align:left;padding:8px 8px 8px 0;vertical-align:bottom;border-bottom:2px solid rgba(0, 0, 0, .125);">Prop</th><th style="text-align:left;padding:8px 8px 8px 0;vertical-align:bottom;border-bottom:2px solid rgba(0, 0, 0, .125);">Type</th><th style="text-align:left;padding:8px 8px 8px 0;vertical-align:bottom;border-bottom:2px solid rgba(0, 0, 0, .125);">Description</th></tr></thead><tbody><tr><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;" title="false">value </td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;">number</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);">Number of star rating from 1 to 5</td></tr><tr><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;" title="false">onClick </td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;">func</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);">Click handler - returns index of star clicked</td></tr></tbody></table></div><div style="box-sizing:border-box;padding-top:16px;" class="Box"><div style="display:flex;margin-left:-8px;margin-right:-8px;" class="Flex"><div style="box-sizing:border-box;flex:1 1 auto;" class="Box"></div><a href="#" class="NavItem" style="font-size:12px;font-weight:600;line-height:1rem;text-decoration:none;display:flex;align-items:center;align-self:stretch;padding:4px 8px;color:inherit;cursor:pointer;">Back to Top</a></div></div></section><section id="Section" class="Section" style="padding-top:64px;padding-bottom:64px;"><header class="SectionHeader" style="display:flex;align-items:center;padding-bottom:8px;margin-top:32px;margin-bottom:32px;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:rgba(0, 0, 0, .25);border-color:inherit;"><div style="flex:1 1 auto;"><h2 class="Heading" style="font-size:24px;font-weight:600;margin:0;"><a href="#Section" style="color:inherit;text-decoration:none;">Section</a></h2><p class="Text" style="font-size:16px;margin:0;">Section element with vertical padding</p></div></header><div class="Panel" style="padding:16px;margin-bottom:16px;background-color:#fff;border-width:1px;border-style:solid;border-color:#111;border-radius:2px;"><div class="PanelHeader" style="display:flex;align-items:center;font-weight:bold;margin-top:-17px;margin-right:-17px;margin-left:-17px;margin-bottom:16px;padding:16px;color:#fff;background-color:#111;border-radius:2px 2px 0 0;">Example</div><div class="mb2"><section class="Section" style="padding-top:64px;padding-bottom:64px;">Section</section><pre class="Pre" style="font-family:'Roboto Mono', Menlo, Consolas, monospace;padding-left:16px;margin-bottom:16px;border-left:4px solid rgba(0, 0, 0, .25);overflow-x:scroll;"><Section>
Section
</Section></pre></div><div></div></div><div></div><div style="box-sizing:border-box;padding-top:16px;" class="Box"><div style="display:flex;margin-left:-8px;margin-right:-8px;" class="Flex"><div style="box-sizing:border-box;flex:1 1 auto;" class="Box"></div><a href="#" class="NavItem" style="font-size:12px;font-weight:600;line-height:1rem;text-decoration:none;display:flex;align-items:center;align-self:stretch;padding:4px 8px;color:inherit;cursor:pointer;">Back to Top</a></div></div></section><section id="SectionHeader" class="Section" style="padding-top:64px;padding-bottom:64px;"><header class="SectionHeader" style="display:flex;align-items:center;padding-bottom:8px;margin-top:32px;margin-bottom:32px;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:rgba(0, 0, 0, .25);border-color:inherit;"><div style="flex:1 1 auto;"><h2 class="Heading" style="font-size:24px;font-weight:600;margin:0;"><a href="#SectionHeader" style="color:inherit;text-decoration:none;">SectionHeader</a></h2><p class="Text" style="font-size:16px;margin:0;">Header for section elements</p></div></header><div class="Panel" style="padding:16px;margin-bottom:16px;background-color:#fff;border-width:1px;border-style:solid;border-color:#111;border-radius:2px;"><div class="PanelHeader" style="display:flex;align-items:center;font-weight:bold;margin-top:-17px;margin-right:-17px;margin-left:-17px;margin-bottom:16px;padding:16px;color:#fff;background-color:#111;border-radius:2px 2px 0 0;">Example</div><div class="mb2"><section class="Section" style="padding-top:64px;padding-bottom:64px;"><header class="SectionHeader" style="display:flex;align-items:center;padding-bottom:8px;margin-top:32px;margin-bottom:32px;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:rgba(0, 0, 0, .25);border-color:inherit;"><div style="flex:1 1 auto;"><h2 class="Heading" style="font-size:24px;font-weight:600;margin:0;"><a href="#Section Header" style="color:inherit;text-decoration:none;">Section Header</a></h2><p class="Text" style="font-size:16px;margin:0;">With linked header</p></div></header>Section</section><pre class="Pre" style="font-family:'Roboto Mono', Menlo, Consolas, monospace;padding-left:16px;margin-bottom:16px;border-left:4px solid rgba(0, 0, 0, .25);overflow-x:scroll;"><Section>
<SectionHeader
description="With linked header"
heading="Section Header"
/>
Section
</Section></pre></div><div></div></div><div style="max-width:100%;overflow-x:scroll;"><table style="font-size:14px;line-height:1.125;min-width:512px;border-collapse:separate;border-spacing:0;max-width:100%;width:100%;"><thead><tr><th style="text-align:left;padding:8px 8px 8px 0;vertical-align:bottom;border-bottom:2px solid rgba(0, 0, 0, .125);">Prop</th><th style="text-align:left;padding:8px 8px 8px 0;vertical-align:bottom;border-bottom:2px solid rgba(0, 0, 0, .125);">Type</th><th style="text-align:left;padding:8px 8px 8px 0;vertical-align:bottom;border-bottom:2px solid rgba(0, 0, 0, .125);">Description</th></tr></thead><tbody><tr><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;" title="false">heading </td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;">string</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);">Section heading</td></tr><tr><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;" title="false">href </td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;">string</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);">Link to section, used in HeadingLink</td></tr><tr><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;" title="false">description </td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;">string</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);">Description of section</td></tr></tbody></table></div><div style="box-sizing:border-box;padding-top:16px;" class="Box"><div style="display:flex;margin-left:-8px;margin-right:-8px;" class="Flex"><div style="box-sizing:border-box;flex:1 1 auto;" class="Box"></div><a href="#" class="NavItem" style="font-size:12px;font-weight:600;line-height:1rem;text-decoration:none;display:flex;align-items:center;align-self:stretch;padding:4px 8px;color:inherit;cursor:pointer;">Back to Top</a></div></div></section><section id="Select" class="Section" style="padding-top:64px;padding-bottom:64px;"><header class="SectionHeader" style="display:flex;align-items:center;padding-bottom:8px;margin-top:32px;margin-bottom:32px;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:rgba(0, 0, 0, .25);border-color:inherit;"><div style="flex:1 1 auto;"><h2 class="Heading" style="font-size:24px;font-weight:600;margin:0;"><a href="#Select" style="color:inherit;text-decoration:none;">Select</a></h2><p class="Text" style="font-size:16px;margin:0;">Select form control with label</p></div></header><div class="Panel" style="padding:16px;margin-bottom:16px;background-color:#fff;border-width:1px;border-style:solid;border-color:#111;border-radius:2px;"><div class="PanelHeader" style="display:flex;align-items:center;font-weight:bold;margin-top:-17px;margin-right:-17px;margin-left:-17px;margin-bottom:16px;padding:16px;color:#fff;background-color:#111;border-radius:2px 2px 0 0;">Example</div><div class="mb2"><div class="Select" style="margin-bottom:16px;"><label for="select_example" class="Label" style="font-size:14px;font-weight:600;">Select</label><select name="select_example" style="font-family:inherit;font-size:inherit;box-sizing:border-box;display:block;width:100%;height:32px;padding-left:8px;padding-right:8px;margin:0;color:inherit;background-color:transparent;background-image:none;border-radius:2px;border-width:1px;border-style:solid;border-color:rgba(0, 0, 0, .25);"><option value="2" label="Two"></option><option value="4" label="Four"></option><option value="8" label="Eight"></option><option value="16" label="Sixteen"></option><option value="32" label="Thirty-Two"></option><option value="64" label="Sixty-Four"></option></select></div><pre class="Pre" style="font-family:'Roboto Mono', Menlo, Consolas, monospace;padding-left:16px;margin-bottom:16px;border-left:4px solid rgba(0, 0, 0, .25);overflow-x:scroll;"><Select
label="Select"
name="select_example"
options={[{label: 'Two', value: 2}, {label: 'Four', value: 4}, {label: 'Eight', value: 8}, {label: 'Sixteen', value: 16}, {label: 'Thirty-Two', value: 32}, {label: 'Sixty-Four', value: 64}]}
/></pre></div><div class="Permutations"><p class="Text" style="font-size:12px;margin:0;">Variations</p><div style="position:relative;margin-bottom:16px;"><div><div class="Select" style="margin-bottom:16px;"><label for="Select" class="Label" style="font-size:14px;font-weight:600;position:absolute;height:1px;width:1px;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);">Select</label><select title="<Select label='Select' options={[{"label":"One","value":"One"},{"label":"Two","value":"Two"},{"label":"Three","value":"Three"}]}hideLabel={true} />" name="Select" style="font-family:inherit;font-size:inherit;box-sizing:border-box;display:block;width:100%;height:32px;padding-left:8px;padding-right:8px;margin:0;color:inherit;background-color:transparent;background-image:none;border-radius:2px;border-width:1px;border-style:solid;border-color:rgba(0, 0, 0, .25);margin-right:16px;"><option label="One" value="One"></option><option label="Two" value="Two"></option><option label="Three" value="Three"></option></select></div><div class="Select" style="margin-bottom:16px;"><label for="Select" class="Label" style="font-size:14px;font-weight:600;">Select</label><select title="<Select label='Select' options={[{"label":"One","value":"One"},{"label":"Two","value":"Two"},{"label":"Three","value":"Three"}]}hideLabel={false} />" name="Select" style="font-family:inherit;font-size:inherit;box-sizing:border-box;display:block;width:100%;height:32px;padding-left:8px;padding-right:8px;margin:0;color:inherit;background-color:transparent;background-image:none;border-radius:2px;border-width:1px;border-style:solid;border-color:rgba(0, 0, 0, .25);margin-right:16px;"><option label="One" value="One"></option><option label="Two" value="Two"></option><option label="Three" value="Three"></option></select></div></div></div></div></div><div style="max-width:100%;overflow-x:scroll;"><table style="font-size:14px;line-height:1.125;min-width:512px;border-collapse:separate;border-spacing:0;max-width:100%;width:100%;"><thead><tr><th style="text-align:left;padding:8px 8px 8px 0;vertical-align:bottom;border-bottom:2px solid rgba(0, 0, 0, .125);">Prop</th><th style="text-align:left;padding:8px 8px 8px 0;vertical-align:bottom;border-bottom:2px solid rgba(0, 0, 0, .125);">Type</th><th style="text-align:left;padding:8px 8px 8px 0;vertical-align:bottom;border-bottom:2px solid rgba(0, 0, 0, .125);">Description</th></tr></thead><tbody><tr><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;" title="Required">label *</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;">string</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);">Label for form element</td></tr><tr><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;" title="Required">name *</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;">string</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);">Name attribute for form element</td></tr><tr><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;" title="Required">options *</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;">array</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);">Options for select</td></tr><tr><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;" title="false">message </td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;">string</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);">Adds a helper or error message below the select</td></tr><tr><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;" title="false">hideLabel </td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;">bool</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);">Hides the form element label</td></tr></tbody></table></div><div style="box-sizing:border-box;padding-top:16px;" class="Box"><div style="display:flex;margin-left:-8px;margin-right:-8px;" class="Flex"><div style="box-sizing:border-box;flex:1 1 auto;" class="Box"></div><a href="#" class="NavItem" style="font-size:12px;font-weight:600;line-height:1rem;text-decoration:none;display:flex;align-items:center;align-self:stretch;padding:4px 8px;color:inherit;cursor:pointer;">Back to Top</a></div></div></section><section id="SequenceMap" class="Section" style="padding-top:64px;padding-bottom:64px;"><header class="SectionHeader" style="display:flex;align-items:center;padding-bottom:8px;margin-top:32px;margin-bottom:32px;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:rgba(0, 0, 0, .25);border-color:inherit;"><div style="flex:1 1 auto;"><h2 class="Heading" style="font-size:24px;font-weight:600;margin:0;"><a href="#SequenceMap" style="color:inherit;text-decoration:none;">SequenceMap</a></h2><p class="Text" style="font-size:16px;margin:0;">Sequence map pattern for use in multi-step forms</p></div></header><div class="Panel" style="padding:16px;margin-bottom:16px;background-color:#fff;border-width:1px;border-style:solid;border-color:#111;border-radius:2px;"><div class="PanelHeader" style="display:flex;align-items:center;font-weight:bold;margin-top:-17px;margin-right:-17px;margin-left:-17px;margin-bottom:16px;padding:16px;color:#fff;background-color:#111;border-radius:2px 2px 0 0;">Example</div><div class="mb2"><div class="SequenceMap" style="display:flex;align-items:flex-start;justify-content:space-between;font-size:14px;font-weight:600;color:#ccc;"><a href="#!" class="LinkBlock" style="display:flex;text-decoration:none;color:#08e;position:relative;flex-direction:column;align-items:center;text-align:center;line-height:1.25;flex:1 1 25%;padding-left:8px;padding-right:8px;"><div style="position:relative;z-index:1;display:inline-block;width:16px;height:16px;margin-bottom:8px;border-radius:99999px;background-color:currentcolor;"></div><div>Sign In</div></a><a href="#!" class="LinkBlock" style="display:flex;text-decoration:none;color:#08e;position:relative;flex-direction:column;align-items:center;text-align:center;line-height:1.25;flex:1 1 25%;padding-left:8px;padding-right:8px;"><div style="position:relative;z-index:1;display:inline-block;width:16px;height:16px;margin-bottom:8px;border-radius:99999px;background-color:currentcolor;"></div><div style="position:absolute;top:8px;transform:translate(-50%, -50%);left:0;right:0;height:4px;background-color:currentcolor;"></div><div>Shipping Address</div></a><a href="#!" class="LinkBlock" style="display:flex;text-decoration:none;color:inherit;position:relative;flex-direction:column;align-items:center;text-align:center;line-height:1.25;flex:1 1 25%;padding-left:8px;padding-right:8px;"><div style="position:relative;z-index:1;display:inline-block;width:16px;height:16px;margin-bottom:8px;border-radius:99999px;background-color:currentcolor;"></div><div style="position:absolute;top:8px;transform:translate(-50%, -50%);left:0;right:0;height:4px;background-color:currentcolor;"></div><div>Payment Method</div></a><a href="#!" class="LinkBlock" style="display:flex;text-decoration:none;color:inherit;position:relative;flex-direction:column;align-items:center;text-align:center;line-height:1.25;flex:1 1 25%;padding-left:8px;padding-right:8px;"><div style="position:relative;z-index:1;display:inline-block;width:16px;height:16px;margin-bottom:8px;border-radius:99999px;background-color:currentcolor;"></div><div style="position:absolute;top:8px;transform:translate(-50%, -50%);left:0;right:0;height:4px;background-color:currentcolor;"></div><div>Place Order</div></a></div><pre class="Pre" style="font-family:'Roboto Mono', Menlo, Consolas, monospace;padding-left:16px;margin-bottom:16px;border-left:4px solid rgba(0, 0, 0, .25);overflow-x:scroll;"><SequenceMap
active={1}
steps={[{children: 'Sign In', href: '#!'}, {children: 'Shipping Address', href: '#!'}, {children: 'Payment Method', href: '#!'}, {children: 'Place Order', href: '#!'}]}
/></pre></div><div></div></div><div style="max-width:100%;overflow-x:scroll;"><table style="font-size:14px;line-height:1.125;min-width:512px;border-collapse:separate;border-spacing:0;max-width:100%;width:100%;"><thead><tr><th style="text-align:left;padding:8px 8px 8px 0;vertical-align:bottom;border-bottom:2px solid rgba(0, 0, 0, .125);">Prop</th><th style="text-align:left;padding:8px 8px 8px 0;vertical-align:bottom;border-bottom:2px solid rgba(0, 0, 0, .125);">Type</th><th style="text-align:left;padding:8px 8px 8px 0;vertical-align:bottom;border-bottom:2px solid rgba(0, 0, 0, .125);">Description</th></tr></thead><tbody><tr><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;" title="false">steps </td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;">array</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);">Array of links for each step in the sequence</td></tr><tr><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;" title="false">active </td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;">number</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);">Index of current step</td></tr></tbody></table></div><div style="box-sizing:border-box;padding-top:16px;" class="Box"><div style="display:flex;margin-left:-8px;margin-right:-8px;" class="Flex"><div style="box-sizing:border-box;flex:1 1 auto;" class="Box"></div><a href="#" class="NavItem" style="font-size:12px;font-weight:600;line-height:1rem;text-decoration:none;display:flex;align-items:center;align-self:stretch;padding:4px 8px;color:inherit;cursor:pointer;">Back to Top</a></div></div></section><section id="Space" class="Section" style="padding-top:64px;padding-bottom:64px;"><header class="SectionHeader" style="display:flex;align-items:center;padding-bottom:8px;margin-top:32px;margin-bottom:32px;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:rgba(0, 0, 0, .25);border-color:inherit;"><div style="flex:1 1 auto;"><h2 class="Heading" style="font-size:24px;font-weight:600;margin:0;"><a href="#Space" style="color:inherit;text-decoration:none;">Space</a></h2><p class="Text" style="font-size:16px;margin:0;">Inline-block element for adding space between elements</p></div></header><div class="Panel" style="padding:16px;margin-bottom:16px;background-color:#fff;border-width:1px;border-style:solid;border-color:#111;border-radius:2px;"><div class="PanelHeader" style="display:flex;align-items:center;font-weight:bold;margin-top:-17px;margin-right:-17px;margin-left:-17px;margin-bottom:16px;padding:16px;color:#fff;background-color:#111;border-radius:2px 2px 0 0;">Example</div><div class="mb2"><div><button class="Button" style="font-family:inherit;font-size:14px;font-weight:600;line-height:16px;text-decoration:none;display:inline-block;margin:0;padding:8px 16px;cursor:pointer;border:0;color:#fff;background-color:#08e;border-radius:2px;">Button</button><div class="Space" style="display:inline-block;width:8px;"></div><button class="Button" style="font-family:inherit;font-size:14px;font-weight:600;line-height:16px;text-decoration:none;display:inline-block;margin:0;padding:8px 16px;cursor:pointer;border:0;color:#fff;background-color:#08e;border-radius:2px;">With</button><div class="Space" style="display:inline-block;width:64px;"></div><button class="Button" style="font-family:inherit;font-size:14px;font-weight:600;line-height:16px;text-decoration:none;display:inline-block;margin:0;padding:8px 16px;cursor:pointer;border:0;color:#fff;background-color:#08e;border-radius:2px;">Space</button></div><pre class="Pre" style="font-family:'Roboto Mono', Menlo, Consolas, monospace;padding-left:16px;margin-bottom:16px;border-left:4px solid rgba(0, 0, 0, .25);overflow-x:scroll;"><div>
<Button rounded={true}>
Button
</Button>
<Space x={1} />
<Button rounded={true}>
With
</Button>
<Space x={4} />
<Button rounded={true}>
Space
</Button>
</div></pre></div><div></div></div><div style="max-width:100%;overflow-x:scroll;"><table style="font-size:14px;line-height:1.125;min-width:512px;border-collapse:separate;border-spacing:0;max-width:100%;width:100%;"><thead><tr><th style="text-align:left;padding:8px 8px 8px 0;vertical-align:bottom;border-bottom:2px solid rgba(0, 0, 0, .125);">Prop</th><th style="text-align:left;padding:8px 8px 8px 0;vertical-align:bottom;border-bottom:2px solid rgba(0, 0, 0, .125);">Type</th><th style="text-align:left;padding:8px 8px 8px 0;vertical-align:bottom;border-bottom:2px solid rgba(0, 0, 0, .125);">Description</th></tr></thead><tbody><tr><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;" title="false">x </td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;">oneOf([1, 2, 3, 4])</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);">Width of space based on the spacing scale</td></tr><tr><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;" title="false">auto </td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;">bool</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);">Sets flex: 1 1 auto</td></tr></tbody></table></div><div style="box-sizing:border-box;padding-top:16px;" class="Box"><div style="display:flex;margin-left:-8px;margin-right:-8px;" class="Flex"><div style="box-sizing:border-box;flex:1 1 auto;" class="Box"></div><a href="#" class="NavItem" style="font-size:12px;font-weight:600;line-height:1rem;text-decoration:none;display:flex;align-items:center;align-self:stretch;padding:4px 8px;color:inherit;cursor:pointer;">Back to Top</a></div></div></section><section id="Stat" class="Section" style="padding-top:64px;padding-bottom:64px;"><header class="SectionHeader" style="display:flex;align-items:center;padding-bottom:8px;margin-top:32px;margin-bottom:32px;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:rgba(0, 0, 0, .25);border-color:inherit;"><div style="flex:1 1 auto;"><h2 class="Heading" style="font-size:24px;font-weight:600;margin:0;"><a href="#Stat" style="color:inherit;text-decoration:none;">Stat</a></h2><p class="Text" style="font-size:16px;margin:0;">Styled number display for statistics</p></div></header><div class="Panel" style="padding:16px;margin-bottom:16px;background-color:#fff;border-width:1px;border-style:solid;border-color:#111;border-radius:2px;"><div class="PanelHeader" style="display:flex;align-items:center;font-weight:bold;margin-top:-17px;margin-right:-17px;margin-left:-17px;margin-bottom:16px;padding:16px;color:#fff;background-color:#111;border-radius:2px 2px 0 0;">Example</div><div class="mb2"><div style="display:flex;flex-wrap:wrap;justify-content:space-between;" class="Flex"><div class="Stat" style="display:inline-block;"><div style="font-size:48px;letter-space:-.125em;font-weight:600;line-height:1;margin-bottom:4px;">512<span style="font-size:20px;">GB</span></div><div style="font-size:12px;font-weight:600;line-height:1;">Memory</div></div><div class="Stat" style="display:inline-block;"><div style="font-size:48px;letter-space:-.125em;font-weight:600;line-height:1;margin-bottom:4px;">32</div><div style="font-size:12px;font-weight:600;line-height:1;">PetaFLOPS</div></div><div class="Stat" style="display:inline-block;"><div style="font-size:48px;letter-space:-.125em;font-weight:600;line-height:1;margin-bottom:4px;">512<span style="font-size:20px;">Mbps</span></div><div style="font-size:12px;font-weight:600;line-height:1;">Upload</div></div><div class="Stat" style="display:inline-block;"><div style="font-size:48px;letter-space:-.125em;font-weight:600;line-height:1;margin-bottom:4px;">1,024<span style="font-size:20px;">Mbps</span></div><div style="font-size:12px;font-weight:600;line-height:1;">Download</div></div></div><pre class="Pre" style="font-family:'Roboto Mono', Menlo, Consolas, monospace;padding-left:16px;margin-bottom:16px;border-left:4px solid rgba(0, 0, 0, .25);overflow-x:scroll;"><Flex
justify="space-between"
wrap={true}
>
<Stat
label="Memory"
unit="GB"
value="512"
/>
<Stat
label="PetaFLOPS"
value="32"
/>
<Stat
label="Upload"
unit="Mbps"
value="512"
/>
<Stat
label="Download"
unit="Mbps"
value="1,024"
/>
</Flex></pre></div><div></div></div><div style="max-width:100%;overflow-x:scroll;"><table style="font-size:14px;line-height:1.125;min-width:512px;border-collapse:separate;border-spacing:0;max-width:100%;width:100%;"><thead><tr><th style="text-align:left;padding:8px 8px 8px 0;vertical-align:bottom;border-bottom:2px solid rgba(0, 0, 0, .125);">Prop</th><th style="text-align:left;padding:8px 8px 8px 0;vertical-align:bottom;border-bottom:2px solid rgba(0, 0, 0, .125);">Type</th><th style="text-align:left;padding:8px 8px 8px 0;vertical-align:bottom;border-bottom:2px solid rgba(0, 0, 0, .125);">Description</th></tr></thead><tbody><tr><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;" title="false">value </td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;">oneOfType([number, string])</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);">Value for stat shown in large font size</td></tr><tr><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;" title="false">unit </td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;">string</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);">Optional unit for displaying next to value</td></tr><tr><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;" title="false">label </td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;">string</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);">Label for stat</td></tr><tr><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;" title="false">topLabel </td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;">bool</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);">Displays label above value</td></tr></tbody></table></div><div style="box-sizing:border-box;padding-top:16px;" class="Box"><div style="display:flex;margin-left:-8px;margin-right:-8px;" class="Flex"><div style="box-sizing:border-box;flex:1 1 auto;" class="Box"></div><a href="#" class="NavItem" style="font-size:12px;font-weight:600;line-height:1rem;text-decoration:none;display:flex;align-items:center;align-self:stretch;padding:4px 8px;color:inherit;cursor:pointer;">Back to Top</a></div></div></section><section id="Switch" class="Section" style="padding-top:64px;padding-bottom:64px;"><header class="SectionHeader" style="display:flex;align-items:center;padding-bottom:8px;margin-top:32px;margin-bottom:32px;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:rgba(0, 0, 0, .25);border-color:inherit;"><div style="flex:1 1 auto;"><h2 class="Heading" style="font-size:24px;font-weight:600;margin:0;"><a href="#Switch" style="color:inherit;text-decoration:none;">Switch</a></h2><p class="Text" style="font-size:16px;margin:0;">Binary toggle switch component</p></div></header><div class="Panel" style="padding:16px;margin-bottom:16px;background-color:#fff;border-width:1px;border-style:solid;border-color:#111;border-radius:2px;"><div class="PanelHeader" style="display:flex;align-items:center;font-weight:bold;margin-top:-17px;margin-right:-17px;margin-left:-17px;margin-bottom:16px;padding:16px;color:#fff;background-color:#111;border-radius:2px 2px 0 0;">Example</div><div class="mb2"><div class="Switch" role="checkbox" style="box-sizing:border-box;display:inline-flex;width:48px;height:32px;color:rgba(0, 0, 0, .25);border-radius:99999px;box-shadow:inset 0 0 0 2px;cursor:pointer;"><div style="width:32px;height:32px;transition-property:transform, color;transition-duration:.1s;transition-timing-function:ease-out;transform:translateX(0);box-shadow:inset 0 0 0 2px;border-radius:99999px;color:rgba(0, 0, 0, .25);background-color:#fff;"></div></div><pre class="Pre" style="font-family:'Roboto Mono', Menlo, Consolas, monospace;padding-left:16px;margin-bottom:16px;border-left:4px solid rgba(0, 0, 0, .25);overflow-x:scroll;"><Switch /></pre></div><div class="Permutations"><p class="Text" style="font-size:12px;margin:0;">Variations</p><div style="position:relative;margin-bottom:16px;"><div><div title="<Switch checked={true} />" name="Switch" class="Switch" role="checkbox" aria-checked="true" style="box-sizing:border-box;display:inline-flex;width:48px;height:32px;color:#1c7;background-color:currentcolor;border-radius:99999px;box-shadow:inset 0 0 0 2px;cursor:pointer;margin-right:16px;"><div style="width:32px;height:32px;transition-property:transform, color;transition-duration:.1s;transition-timing-function:ease-out;transform:translateX(16px);box-shadow:inset 0 0 0 2px;border-radius:99999px;color:#1c7;background-color:#fff;"></div></div><div title="<Switch checked={false} />" name="Switch" class="Switch" role="checkbox" aria-checked="false" style="box-sizing:border-box;display:inline-flex;width:48px;height:32px;color:rgba(0, 0, 0, .25);border-radius:99999px;box-shadow:inset 0 0 0 2px;cursor:pointer;margin-right:16px;"><div style="width:32px;height:32px;transition-property:transform, color;transition-duration:.1s;transition-timing-function:ease-out;transform:translateX(0);box-shadow:inset 0 0 0 2px;border-radius:99999px;color:rgba(0, 0, 0, .25);background-color:#fff;"></div></div></div></div></div></div><div style="max-width:100%;overflow-x:scroll;"><table style="font-size:14px;line-height:1.125;min-width:512px;border-collapse:separate;border-spacing:0;max-width:100%;width:100%;"><thead><tr><th style="text-align:left;padding:8px 8px 8px 0;vertical-align:bottom;border-bottom:2px solid rgba(0, 0, 0, .125);">Prop</th><th style="text-align:left;padding:8px 8px 8px 0;vertical-align:bottom;border-bottom:2px solid rgba(0, 0, 0, .125);">Type</th><th style="text-align:left;padding:8px 8px 8px 0;vertical-align:bottom;border-bottom:2px solid rgba(0, 0, 0, .125);">Description</th></tr></thead><tbody><tr><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;" title="false">checked </td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;">bool</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);">Sets the Switch to an active style</td></tr></tbody></table></div><div style="box-sizing:border-box;padding-top:16px;" class="Box"><div style="display:flex;margin-left:-8px;margin-right:-8px;" class="Flex"><div style="box-sizing:border-box;flex:1 1 auto;" class="Box"></div><a href="#" class="NavItem" style="font-size:12px;font-weight:600;line-height:1rem;text-decoration:none;display:flex;align-items:center;align-self:stretch;padding:4px 8px;color:inherit;cursor:pointer;">Back to Top</a></div></div></section><section id="Table" class="Section" style="padding-top:64px;padding-bottom:64px;"><header class="SectionHeader" style="display:flex;align-items:center;padding-bottom:8px;margin-top:32px;margin-bottom:32px;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:rgba(0, 0, 0, .25);border-color:inherit;"><div style="flex:1 1 auto;"><h2 class="Heading" style="font-size:24px;font-weight:600;margin:0;"><a href="#Table" style="color:inherit;text-decoration:none;">Table</a></h2><p class="Text" style="font-size:16px;margin:0;">Table element with simplified props</p></div></header><div class="Panel" style="padding:16px;margin-bottom:16px;background-color:#fff;border-width:1px;border-style:solid;border-color:#111;border-radius:2px;"><div class="PanelHeader" style="display:flex;align-items:center;font-weight:bold;margin-top:-17px;margin-right:-17px;margin-left:-17px;margin-bottom:16px;padding:16px;color:#fff;background-color:#111;border-radius:2px 2px 0 0;">Example</div><div class="mb2"><div class="Table" style="max-width:100%;overflow-x:scroll;margin-bottom:16px;border-color:rgba(0, 0, 0, .25);"><table style="font-size:14px;line-height:1.25;border-collapse:separate;border-spacing:0;width:100%;"><thead><tr><th style="text-align:left;vertical-align:bottom;padding:8px;padding-left:0;border-bottom-style:solid;border-bottom-width:2px;border-color:inherit;">Name</th><th style="text-align:left;vertical-align:bottom;padding:8px;padding-left:0;border-bottom-style:solid;border-bottom-width:2px;border-color:inherit;">Meat</th><th style="text-align:left;vertical-align:bottom;padding:8px;padding-left:0;border-bottom-style:solid;border-bottom-width:2px;border-color:inherit;">Vegetable</th><th style="text-align:left;vertical-align:bottom;padding:8px;padding-left:0;border-bottom-style:solid;border-bottom-width:2px;border-color:inherit;">Carb</th></tr></thead><tbody><tr><td style="padding:8px;padding-left:0;border-bottom-style:solid;border-bottom-width:1px;border-color:inherit;">Hamburger</td><td style="padding:8px;padding-left:0;border-bottom-style:solid;border-bottom-width:1px;border-color:inherit;">Beef</td><td style="padding:8px;padding-left:0;border-bottom-style:solid;border-bottom-width:1px;border-color:inherit;">Onion</td><td style="padding:8px;padding-left:0;border-bottom-style:solid;border-bottom-width:1px;border-color:inherit;">Bun</td></tr><tr><td style="padding:8px;padding-left:0;border-bottom-style:solid;border-bottom-width:1px;border-color:inherit;">Pizza</td><td style="padding:8px;padding-left:0;border-bottom-style:solid;border-bottom-width:1px;border-color:inherit;">Pork</td><td style="padding:8px;padding-left:0;border-bottom-style:solid;border-bottom-width:1px;border-color:inherit;">Tomato</td><td style="padding:8px;padding-left:0;border-bottom-style:solid;border-bottom-width:1px;border-color:inherit;">Crust</td></tr><tr><td style="padding:8px;padding-left:0;border-bottom-style:solid;border-bottom-width:1px;border-color:inherit;">Corndog</td><td style="padding:8px;padding-left:0;border-bottom-style:solid;border-bottom-width:1px;border-color:inherit;">Pork</td><td style="padding:8px;padding-left:0;border-bottom-style:solid;border-bottom-width:1px;border-color:inherit;">Corn</td><td style="padding:8px;padding-left:0;border-bottom-style:solid;border-bottom-width:1px;border-color:inherit;">Cornbread</td></tr><tr><td style="padding:8px;padding-left:0;border-bottom-style:solid;border-bottom-width:1px;border-color:inherit;">Hot Dog</td><td style="padding:8px;padding-left:0;border-bottom-style:solid;border-bottom-width:1px;border-color:inherit;">Pork</td><td style="padding:8px;padding-left:0;border-bottom-style:solid;border-bottom-width:1px;border-color:inherit;">Peppers</td><td style="padding:8px;padding-left:0;border-bottom-style:solid;border-bottom-width:1px;border-color:inherit;">Bun</td></tr></tbody></table></div><pre class="Pre" style="font-family:'Roboto Mono', Menlo, Consolas, monospace;padding-left:16px;margin-bottom:16px;border-left:4px solid rgba(0, 0, 0, .25);overflow-x:scroll;"><Table
data={[['Hamburger', 'Beef', 'Onion', 'Bun'], ['Pizza', 'Pork', 'Tomato', 'Crust'], ['Corndog', 'Pork', 'Corn', 'Cornbread'], ['Hot Dog', 'Pork', 'Peppers', 'Bun']]}
headings={['Name', 'Meat', 'Vegetable', 'Carb']}
/></pre></div><div></div></div><div style="max-width:100%;overflow-x:scroll;"><table style="font-size:14px;line-height:1.125;min-width:512px;border-collapse:separate;border-spacing:0;max-width:100%;width:100%;"><thead><tr><th style="text-align:left;padding:8px 8px 8px 0;vertical-align:bottom;border-bottom:2px solid rgba(0, 0, 0, .125);">Prop</th><th style="text-align:left;padding:8px 8px 8px 0;vertical-align:bottom;border-bottom:2px solid rgba(0, 0, 0, .125);">Type</th><th style="text-align:left;padding:8px 8px 8px 0;vertical-align:bottom;border-bottom:2px solid rgba(0, 0, 0, .125);">Description</th></tr></thead><tbody><tr><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;" title="false">headings </td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;">array</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);">Headings for <th></td></tr><tr><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;" title="false">data </td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;">arrayOf</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);">Array of table row data for <td></td></tr></tbody></table></div><div style="box-sizing:border-box;padding-top:16px;" class="Box"><div style="display:flex;margin-left:-8px;margin-right:-8px;" class="Flex"><div style="box-sizing:border-box;flex:1 1 auto;" class="Box"></div><a href="#" class="NavItem" style="font-size:12px;font-weight:600;line-height:1rem;text-decoration:none;display:flex;align-items:center;align-self:stretch;padding:4px 8px;color:inherit;cursor:pointer;">Back to Top</a></div></div></section><section id="Text" class="Section" style="padding-top:64px;padding-bottom:64px;"><header class="SectionHeader" style="display:flex;align-items:center;padding-bottom:8px;margin-top:32px;margin-bottom:32px;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:rgba(0, 0, 0, .25);border-color:inherit;"><div style="flex:1 1 auto;"><h2 class="Heading" style="font-size:24px;font-weight:600;margin:0;"><a href="#Text" style="color:inherit;text-decoration:none;">Text</a></h2><p class="Text" style="font-size:16px;margin:0;">Component for displaying text in UI</p></div></header><div class="Panel" style="padding:16px;margin-bottom:16px;background-color:#fff;border-width:1px;border-style:solid;border-color:#111;border-radius:2px;"><div class="PanelHeader" style="display:flex;align-items:center;font-weight:bold;margin-top:-17px;margin-right:-17px;margin-left:-17px;margin-bottom:16px;padding:16px;color:#fff;background-color:#111;border-radius:2px 2px 0 0;">Example</div><div class="Permutations"><p class="Text" style="font-size:12px;margin:0;">Variations</p><div style="position:relative;margin-bottom:16px;"><div><p title="<Text small={true} />" name="Text" class="Text" style="font-size:12px;margin:0;margin-right:16px;">Text</p><p title="<Text small={false} />" name="Text" class="Text" style="font-size:16px;margin:0;margin-right:16px;">Text</p></div></div></div></div><div style="max-width:100%;overflow-x:scroll;"><table style="font-size:14px;line-height:1.125;min-width:512px;border-collapse:separate;border-spacing:0;max-width:100%;width:100%;"><thead><tr><th style="text-align:left;padding:8px 8px 8px 0;vertical-align:bottom;border-bottom:2px solid rgba(0, 0, 0, .125);">Prop</th><th style="text-align:left;padding:8px 8px 8px 0;vertical-align:bottom;border-bottom:2px solid rgba(0, 0, 0, .125);">Type</th><th style="text-align:left;padding:8px 8px 8px 0;vertical-align:bottom;border-bottom:2px solid rgba(0, 0, 0, .125);">Description</th></tr></thead><tbody><tr><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;" title="false">small </td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;">bool</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);">Sets a smaller font size</td></tr></tbody></table></div><div style="box-sizing:border-box;padding-top:16px;" class="Box"><div style="display:flex;margin-left:-8px;margin-right:-8px;" class="Flex"><div style="box-sizing:border-box;flex:1 1 auto;" class="Box"></div><a href="#" class="NavItem" style="font-size:12px;font-weight:600;line-height:1rem;text-decoration:none;display:flex;align-items:center;align-self:stretch;padding:4px 8px;color:inherit;cursor:pointer;">Back to Top</a></div></div></section><section id="Textarea" class="Section" style="padding-top:64px;padding-bottom:64px;"><header class="SectionHeader" style="display:flex;align-items:center;padding-bottom:8px;margin-top:32px;margin-bottom:32px;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:rgba(0, 0, 0, .25);border-color:inherit;"><div style="flex:1 1 auto;"><h2 class="Heading" style="font-size:24px;font-weight:600;margin:0;"><a href="#Textarea" style="color:inherit;text-decoration:none;">Textarea</a></h2><p class="Text" style="font-size:16px;margin:0;">Textarea form element with label</p></div></header><div class="Panel" style="padding:16px;margin-bottom:16px;background-color:#fff;border-width:1px;border-style:solid;border-color:#111;border-radius:2px;"><div class="PanelHeader" style="display:flex;align-items:center;font-weight:bold;margin-top:-17px;margin-right:-17px;margin-left:-17px;margin-bottom:16px;padding:16px;color:#fff;background-color:#111;border-radius:2px 2px 0 0;">Example</div><div class="Permutations"><p class="Text" style="font-size:12px;margin:0;">Variations</p><div style="position:relative;margin-bottom:16px;"><div><div class="Textarea" style="margin-bottom:16px;"><label for="Textarea" class="Label" style="font-size:14px;font-weight:600;position:absolute;height:1px;width:1px;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);">Textarea</label><textarea title="<Textarea label='Textarea' hideLabel={true} />" name="Textarea" style="font-family:inherit;font-size:inherit;box-sizing:border-box;display:block;width:100%;margin:0;padding:8px;border-radius:2px;border-width:1px;border-styles:solid;border-color:rgba(0, 0, 0, .25);margin-right:16px;"></textarea></div><div class="Textarea" style="margin-bottom:16px;"><label for="Textarea" class="Label" style="font-size:14px;font-weight:600;">Textarea</label><textarea title="<Textarea label='Textarea' hideLabel={false} />" name="Textarea" style="font-family:inherit;font-size:inherit;box-sizing:border-box;display:block;width:100%;margin:0;padding:8px;border-radius:2px;border-width:1px;border-styles:solid;border-color:rgba(0, 0, 0, .25);margin-right:16px;"></textarea></div></div></div></div></div><div style="max-width:100%;overflow-x:scroll;"><table style="font-size:14px;line-height:1.125;min-width:512px;border-collapse:separate;border-spacing:0;max-width:100%;width:100%;"><thead><tr><th style="text-align:left;padding:8px 8px 8px 0;vertical-align:bottom;border-bottom:2px solid rgba(0, 0, 0, .125);">Prop</th><th style="text-align:left;padding:8px 8px 8px 0;vertical-align:bottom;border-bottom:2px solid rgba(0, 0, 0, .125);">Type</th><th style="text-align:left;padding:8px 8px 8px 0;vertical-align:bottom;border-bottom:2px solid rgba(0, 0, 0, .125);">Description</th></tr></thead><tbody><tr><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;" title="Required">label *</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;">string</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);">Label for form element</td></tr><tr><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;" title="Required">name *</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;">string</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);">Name attribute for form element</td></tr><tr><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;" title="false">message </td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;">string</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);">Adds a helper or error message below the textarea</td></tr><tr><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;" title="false">hideLabel </td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;">bool</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);">Hides the form element label</td></tr></tbody></table></div><div style="box-sizing:border-box;padding-top:16px;" class="Box"><div style="display:flex;margin-left:-8px;margin-right:-8px;" class="Flex"><div style="box-sizing:border-box;flex:1 1 auto;" class="Box"></div><a href="#" class="NavItem" style="font-size:12px;font-weight:600;line-height:1rem;text-decoration:none;display:flex;align-items:center;align-self:stretch;padding:4px 8px;color:inherit;cursor:pointer;">Back to Top</a></div></div></section><section id="Toolbar" class="Section" style="padding-top:64px;padding-bottom:64px;"><header class="SectionHeader" style="display:flex;align-items:center;padding-bottom:8px;margin-top:32px;margin-bottom:32px;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:rgba(0, 0, 0, .25);border-color:inherit;"><div style="flex:1 1 auto;"><h2 class="Heading" style="font-size:24px;font-weight:600;margin:0;"><a href="#Toolbar" style="color:inherit;text-decoration:none;">Toolbar</a></h2><p class="Text" style="font-size:16px;margin:0;">Toolbar component that vertically centers children with display flex</p></div></header><div class="Panel" style="padding:16px;margin-bottom:16px;background-color:#fff;border-width:1px;border-style:solid;border-color:#111;border-radius:2px;"><div class="PanelHeader" style="display:flex;align-items:center;font-weight:bold;margin-top:-17px;margin-right:-17px;margin-left:-17px;margin-bottom:16px;padding:16px;color:#fff;background-color:#111;border-radius:2px 2px 0 0;">Example</div><div class="mb2"><div class="Toolbar" style="display:flex;align-items:center;min-height:48px;padding-left:8px;padding-right:8px;color:#fff;background-color:#08e;"><a class="NavItem" style="font-size:14px;font-weight:600;line-height:1rem;text-decoration:none;display:flex;align-items:center;align-self:stretch;padding:8px;color:inherit;cursor:pointer;">Toolbar</a><a class="NavItem" style="font-size:14px;font-weight:600;line-height:1rem;text-decoration:none;display:flex;align-items:center;align-self:stretch;padding:8px;color:inherit;cursor:pointer;">NavItem</a><div class="Space" style="display:inline-block;flex:1 1 auto;width:8px;"></div><a class="NavItem" style="font-size:14px;font-weight:600;line-height:1rem;text-decoration:none;display:flex;align-items:center;align-self:stretch;padding:8px;color:inherit;cursor:pointer;">NavItem</a></div><pre class="Pre" style="font-family:'Roboto Mono', Menlo, Consolas, monospace;padding-left:16px;margin-bottom:16px;border-left:4px solid rgba(0, 0, 0, .25);overflow-x:scroll;"><Toolbar>
<NavItem Component="a">
Toolbar
</NavItem>
<NavItem Component="a">
NavItem
</NavItem>
<Space
auto={true}
x={1}
/>
<NavItem Component="a">
NavItem
</NavItem>
</Toolbar></pre></div><div></div></div><div></div><div style="box-sizing:border-box;padding-top:16px;" class="Box"><div style="display:flex;margin-left:-8px;margin-right:-8px;" class="Flex"><div style="box-sizing:border-box;flex:1 1 auto;" class="Box"></div><a href="#" class="NavItem" style="font-size:12px;font-weight:600;line-height:1rem;text-decoration:none;display:flex;align-items:center;align-self:stretch;padding:4px 8px;color:inherit;cursor:pointer;">Back to Top</a></div></div></section><section id="Tooltip" class="Section" style="padding-top:64px;padding-bottom:64px;"><header class="SectionHeader" style="display:flex;align-items:center;padding-bottom:8px;margin-top:32px;margin-bottom:32px;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:rgba(0, 0, 0, .25);border-color:inherit;"><div style="flex:1 1 auto;"><h2 class="Heading" style="font-size:24px;font-weight:600;margin:0;"><a href="#Tooltip" style="color:inherit;text-decoration:none;">Tooltip</a></h2><p class="Text" style="font-size:16px;margin:0;">Styled tooltip that shows on hover</p></div></header><div class="Panel" style="padding:16px;margin-bottom:16px;background-color:#fff;border-width:1px;border-style:solid;border-color:#111;border-radius:2px;"><div class="PanelHeader" style="display:flex;align-items:center;font-weight:bold;margin-top:-17px;margin-right:-17px;margin-left:-17px;margin-bottom:16px;padding:16px;color:#fff;background-color:#111;border-radius:2px 2px 0 0;">Example</div><div class="mb2"><span class="Tooltip" title="Hello!" style="position:relative;display:inline-block;cursor:pointer;"><style> .Tooltip:hover::after { content: attr(title); white-space: nowrap; font-size: 12px; box-sizing: border-box; display: block; padding: 4px 8px; position: absolute; z-index: 4; bottom: 100%; left: 50%; color: #fff; background-color: #111; border-radius: 2px; transform: translateX(-50%) translateY(-8px); } .Tooltip:hover::before { content: ''; position: absolute; z-index: 4; bottom: calc(100% - 4px); left: 50%; border: 6px solid transparent; border-top-color: #111; transform: translateX(-50%); } </style><h3 class="Heading" style="font-size:20px;font-weight:600;margin:0;">Tooltip</h3></span><pre class="Pre" style="font-family:'Roboto Mono', Menlo, Consolas, monospace;padding-left:16px;margin-bottom:16px;border-left:4px solid rgba(0, 0, 0, .25);overflow-x:scroll;"><Tooltip title="Hello!">
<Heading level={3}>
Tooltip
</Heading>
</Tooltip></pre></div><div></div></div><div style="max-width:100%;overflow-x:scroll;"><table style="font-size:14px;line-height:1.125;min-width:512px;border-collapse:separate;border-spacing:0;max-width:100%;width:100%;"><thead><tr><th style="text-align:left;padding:8px 8px 8px 0;vertical-align:bottom;border-bottom:2px solid rgba(0, 0, 0, .125);">Prop</th><th style="text-align:left;padding:8px 8px 8px 0;vertical-align:bottom;border-bottom:2px solid rgba(0, 0, 0, .125);">Type</th><th style="text-align:left;padding:8px 8px 8px 0;vertical-align:bottom;border-bottom:2px solid rgba(0, 0, 0, .125);">Description</th></tr></thead><tbody><tr><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;" title="false">title </td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);font-family:"Roboto Mono", monospace;">string</td><td style="padding:8px 8px 8px 0;border-bottom:1px solid rgba(0, 0, 0, .125);">Text to display in tooltip</td></tr></tbody></table></div><div style="box-sizing:border-box;padding-top:16px;" class="Box"><div style="display:flex;margin-left:-8px;margin-right:-8px;" class="Flex"><div style="box-sizing:border-box;flex:1 1 auto;" class="Box"></div><a href="#" class="NavItem" style="font-size:12px;font-weight:600;line-height:1rem;text-decoration:none;display:flex;align-items:center;align-self:stretch;padding:4px 8px;color:inherit;cursor:pointer;">Back to Top</a></div></div></section><section id="Related" class="Section" style="padding-top:64px;padding-bottom:64px;"><header class="SectionHeader" style="display:flex;align-items:center;padding-bottom:8px;margin-top:32px;margin-bottom:32px;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:rgba(0, 0, 0, .25);border-color:inherit;"><div style="flex:1 1 auto;"><h2 class="Heading" style="font-size:24px;font-weight:600;margin:0;"><a href="#Related" style="color:inherit;text-decoration:none;">Related</a></h2></div></header><a href="http://jxnblk.com/reflexbox" class="LinkBlock" style="display:block;text-decoration:none;color:inherit;"><div style="box-sizing:border-box;padding-top:16px;padding-bottom:16px;" class="Box"><h4 class="Heading" style="font-size:24px;font-weight:600;margin:0;">Reflexbox</h4><p class="Text" style="font-size:16px;margin:0;">React flexbox layout and grid system</p></div></a><a href="http://jxnblk.com/react-geomicons" class="LinkBlock" style="display:block;text-decoration:none;color:inherit;"><div style="box-sizing:border-box;padding-top:16px;padding-bottom:16px;" class="Box"><h4 class="Heading" style="font-size:24px;font-weight:600;margin:0;">React Geomicons</h4><p class="Text" style="font-size:16px;margin:0;">React icon component for Geomicons</p></div></a></section></main><div class="Block" style="box-sizing:border-box;padding:64px;margin-bottom:64px;border-style:none;border-left-style:solid;border-width:4px;border-color:#08e;color:inherit;"><div style="display:flex;align-items:center;" class="Flex"><div><h2 class="Heading" style="font-size:32px;font-weight:600;margin:0;">Get Started</h2><pre class="Pre" style="font-family:'Roboto Mono', Menlo, Consolas, monospace;padding-left:16px;margin-bottom:16px;border-left:4px solid rgba(0, 0, 0, .25);overflow-x:scroll;">npm i rebass</pre></div><div class="Space" style="display:inline-block;flex:1 1 auto;width:8px;"></div><a href="https://github.com/jxnblk/rebass" class="Button" style="font-family:inherit;font-size:14px;font-weight:600;line-height:16px;text-decoration:none;display:inline-block;margin:0;padding:8px 16px;cursor:pointer;border:0;color:#fff;background-color:#08e;border-radius:2px;">GitHub</a><div class="Space" style="display:inline-block;flex:1 1 auto;width:8px;"></div></div></div><p class="Text" style="font-size:12px;margin:0;">Documentation generated with <a href="https://github.com/jxnblk/static-react">static-react</a>, <a href="https://github.com/reactjs/react-docgen">react-docgen</a>, and <a href="https://github.com/jxnblk/react-component-permutations">react-component-permutations</a>.</p><footer class="Footer" style="display:flex;flex-wrap:wrap;align-items:center;font-size:14px;margin-top:32px;padding-top:32px;padding-bottom:32px;border-top-width:1px;border-top-style:solid;border-top-color:rgba(0, 0, 0, .25);"><a href="https://github.com/jxnblk/rebass" class="NavItem" style="font-size:14px;font-weight:600;line-height:1rem;text-decoration:none;display:flex;align-items:center;align-self:stretch;padding:8px;color:inherit;cursor:pointer;">GitHub</a><div class="Space" style="display:inline-block;flex:1 1 auto;width:8px;"></div><a href="http://jxnblk.com" class="NavItem" style="font-size:14px;font-weight:600;line-height:1rem;text-decoration:none;display:flex;align-items:center;align-self:stretch;padding:8px;color:inherit;cursor:pointer;">Made by Jxnblk</a></footer></div></body></html>