forked from rebassjs/rebass
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
212 lines (212 loc) · 151 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
<!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"/><link href="https://npmcdn.com/[email protected]/css/basscss.min.css" rel="stylesheet"/><style>
.NavItem:hover,
.Button:hover {
box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, .125);
}
/*
.NavItem:hover {
background-size: 100% 8px;
background-repeat: no-repeat;
background-position: bottom;
background-image: linear-gradient(transparent, transparent 6px, tomato 6px, tomato);
}
*/
</style></head><body><div class="Container" style="max-width:1024px;padding-left:16px;padding-right:16px;margin:auto;"><header class="PageHeader" style="display:flex;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);"><div style="flex:1 1 auto;"><h1 class="Heading" style="font-size:32px;font-weight:600;margin:0;">Rebass</h1><p style="margin:0;">42 React Stateless Functional UI Components [v0.2.0-beta1]</p></div></header><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:inline-block;padding:8px;color:inherit;cursor:pointer;">Arrow</a><a href="#Badge" class="NavItem" style="font-size:14px;font-weight:600;line-height:1rem;text-decoration:none;display:inline-block;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:inline-block;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:inline-block;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:inline-block;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:inline-block;padding:8px;color:inherit;cursor:pointer;">Button</a><a href="#ButtonOutline" class="NavItem" style="font-size:14px;font-weight:600;line-height:1rem;text-decoration:none;display:inline-block;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:inline-block;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:inline-block;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:inline-block;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:inline-block;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:inline-block;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:inline-block;padding:8px;color:inherit;cursor:pointer;">Divider</a><a href="#Drawer" class="NavItem" style="font-size:14px;font-weight:600;line-height:1rem;text-decoration:none;display:inline-block;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:inline-block;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:inline-block;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:inline-block;padding:8px;color:inherit;cursor:pointer;">Embed</a><a href="#Footer" class="NavItem" style="font-size:14px;font-weight:600;line-height:1rem;text-decoration:none;display:inline-block;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:inline-block;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:inline-block;padding:8px;color:inherit;cursor:pointer;">HeadingLink</a><a href="#Input" class="NavItem" style="font-size:14px;font-weight:600;line-height:1rem;text-decoration:none;display:inline-block;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:inline-block;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:inline-block;padding:8px;color:inherit;cursor:pointer;">Label</a><a href="#Media" class="NavItem" style="font-size:14px;font-weight:600;line-height:1rem;text-decoration:none;display:inline-block;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:inline-block;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:inline-block;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:inline-block;padding:8px;color:inherit;cursor:pointer;">NavItem</a><a href="#PageHeader" class="NavItem" style="font-size:14px;font-weight:600;line-height:1rem;text-decoration:none;display:inline-block;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:inline-block;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:inline-block;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:inline-block;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:inline-block;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:inline-block;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:inline-block;padding:8px;color:inherit;cursor:pointer;">Radio</a><a href="#Section" class="NavItem" style="font-size:14px;font-weight:600;line-height:1rem;text-decoration:none;display:inline-block;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:inline-block;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:inline-block;padding:8px;color:inherit;cursor:pointer;">Select</a><a href="#Space" class="NavItem" style="font-size:14px;font-weight:600;line-height:1rem;text-decoration:none;display:inline-block;padding:8px;color:inherit;cursor:pointer;">Space</a><a href="#Text" class="NavItem" style="font-size:14px;font-weight:600;line-height:1rem;text-decoration:none;display:inline-block;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:inline-block;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:inline-block;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:inline-block;padding:8px;color:inherit;cursor:pointer;">Tooltip</a></div></nav><main><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);"><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;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:-16px;margin-right:-16px;margin-left:-16px;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;display:inline-block;margin:0;padding:8px 16px;cursor:pointer;border:0;border-radius:2px;color:#fff;background-color:#08e;">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-left:-8px;margin-right:-8px;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:8px;"></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:8px;"></div></div></div></div></div><div style="max-width:100%;overflow-x:scroll;"><table style="border-collapse:separate;border-spacing:0;max-width:100%;width:100%;"><thead><tr><th style="text-align:left;padding:4px 0;vertical-align:bottom;border-bottom:2px solid #ddd;">Prop</th><th style="text-align:left;padding:4px 0;vertical-align:bottom;border-bottom:2px solid #ddd;">Type</th><th style="text-align:left;padding:4px 0;vertical-align:bottom;border-bottom:2px solid #ddd;">Description</th></tr></thead><tbody><tr><td style="padding:4px 0;border-bottom:1px solid #ddd;">direction </td><td style="padding:4px 0;border-bottom:1px solid #ddd;">oneOf(['up', 'down'])</td><td style="padding:4px 0;border-bottom:1px solid #ddd;">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:inline-block;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);"><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;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:-16px;margin-right:-16px;margin-left:-16px;margin-bottom:16px;padding:16px;color:#fff;background-color:#111;border-radius:2px 2px 0 0;">Example</div><div class="mb2"><div><h2 class="Heading" style="font-size:24px;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;display:inline-block;vertical-align:center;padding-left:8px;padding-right:8px;color:#fff;border-radius:2px;background-color:#08e;">0.2.0</div></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;"><div>
<Heading level={2}>
Rebass
<Space x={1} />
<Badge type="info">
0.2.0
</Badge>
</Heading>
</div></pre></div><div class="Permutations"><p class="Text" style="font-size:12px;margin:0;">Variations</p><div style="position:relative;margin-left:-8px;margin-right:-8px;margin-bottom:16px;"><div><div title="<Badge type='default' />" name="Badge" class="Badge" style="font-size:12px;font-weight:600;display:inline-block;vertical-align:center;padding-left:8px;padding-right:8px;color:#fff;border-radius:2px;background-color:#111;margin:8px;">Badge</div><div title="<Badge type='info' />" name="Badge" class="Badge" style="font-size:12px;font-weight:600;display:inline-block;vertical-align:center;padding-left:8px;padding-right:8px;color:#fff;border-radius:2px;background-color:#08e;margin:8px;">Badge</div><div title="<Badge type='success' />" name="Badge" class="Badge" style="font-size:12px;font-weight:600;display:inline-block;vertical-align:center;padding-left:8px;padding-right:8px;color:#fff;border-radius:2px;background-color:#1c7;margin:8px;">Badge</div><div title="<Badge type='warning' />" name="Badge" class="Badge" style="font-size:12px;font-weight:600;display:inline-block;vertical-align:center;padding-left:8px;padding-right:8px;color:#fff;border-radius:2px;background-color:#f90;margin:8px;">Badge</div><div title="<Badge type='error' />" name="Badge" class="Badge" style="font-size:12px;font-weight:600;display:inline-block;vertical-align:center;padding-left:8px;padding-right:8px;color:#fff;border-radius:2px;background-color:#f52;margin:8px;">Badge</div></div></div></div></div><div style="max-width:100%;overflow-x:scroll;"><table style="border-collapse:separate;border-spacing:0;max-width:100%;width:100%;"><thead><tr><th style="text-align:left;padding:4px 0;vertical-align:bottom;border-bottom:2px solid #ddd;">Prop</th><th style="text-align:left;padding:4px 0;vertical-align:bottom;border-bottom:2px solid #ddd;">Type</th><th style="text-align:left;padding:4px 0;vertical-align:bottom;border-bottom:2px solid #ddd;">Description</th></tr></thead><tbody><tr><td style="padding:4px 0;border-bottom:1px solid #ddd;">type </td><td style="padding:4px 0;border-bottom:1px solid #ddd;">oneOf(['default', 'info', 'success', 'warning', 'error'])</td><td style="padding:4px 0;border-bottom:1px solid #ddd;">Sets color based on type of badge</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:inline-block;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);"><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;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:-16px;margin-right:-16px;margin-left:-16px;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="border-collapse:separate;border-spacing:0;max-width:100%;width:100%;"><thead><tr><th style="text-align:left;padding:4px 0;vertical-align:bottom;border-bottom:2px solid #ddd;">Prop</th><th style="text-align:left;padding:4px 0;vertical-align:bottom;border-bottom:2px solid #ddd;">Type</th><th style="text-align:left;padding:4px 0;vertical-align:bottom;border-bottom:2px solid #ddd;">Description</th></tr></thead><tbody><tr><td style="padding:4px 0;border-bottom:1px solid #ddd;">align </td><td style="padding:4px 0;border-bottom:1px solid #ddd;">oneOf(['left', 'center', 'right'])</td><td style="padding:4px 0;border-bottom:1px solid #ddd;">Horizontal alignment</td></tr><tr><td style="padding:4px 0;border-bottom:1px solid #ddd;">backgroundImage </td><td style="padding:4px 0;border-bottom:1px solid #ddd;">string</td><td style="padding:4px 0;border-bottom:1px solid #ddd;">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:inline-block;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);"><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;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:-16px;margin-right:-16px;margin-left:-16px;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:48px;margin-top:16px;margin-bottom:16px;border-style:none;border-left-style:solid;color:inherit;background-color:#eee;border-width:4px;border-color:#08e;"><div class="Media" style="display:flex;margin-bottom:16px;"><img src="http://lorempixel.com/128/128/cats" style="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
backgroundColor="#eee"
borderLeft={true}
padding={48}
>
<Media img="http://lorempixel.com/128/128/cats">
<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="border-collapse:separate;border-spacing:0;max-width:100%;width:100%;"><thead><tr><th style="text-align:left;padding:4px 0;vertical-align:bottom;border-bottom:2px solid #ddd;">Prop</th><th style="text-align:left;padding:4px 0;vertical-align:bottom;border-bottom:2px solid #ddd;">Type</th><th style="text-align:left;padding:4px 0;vertical-align:bottom;border-bottom:2px solid #ddd;">Description</th></tr></thead><tbody><tr><td style="padding:4px 0;border-bottom:1px solid #ddd;">margin </td><td style="padding:4px 0;border-bottom:1px solid #ddd;">oneOfType([number, string])</td><td style="padding:4px 0;border-bottom:1px solid #ddd;">Adds margin around component</td></tr><tr><td style="padding:4px 0;border-bottom:1px solid #ddd;">padding </td><td style="padding:4px 0;border-bottom:1px solid #ddd;">oneOfType([number, string])</td><td style="padding:4px 0;border-bottom:1px solid #ddd;">Adjust padding within component</td></tr><tr><td style="padding:4px 0;border-bottom:1px solid #ddd;">color </td><td style="padding:4px 0;border-bottom:1px solid #ddd;">string</td><td style="padding:4px 0;border-bottom:1px solid #ddd;">Text color</td></tr><tr><td style="padding:4px 0;border-bottom:1px solid #ddd;">backgroundColor </td><td style="padding:4px 0;border-bottom:1px solid #ddd;">string</td><td style="padding:4px 0;border-bottom:1px solid #ddd;">Background color</td></tr><tr><td style="padding:4px 0;border-bottom:1px solid #ddd;">borderColor </td><td style="padding:4px 0;border-bottom:1px solid #ddd;">string</td><td style="padding:4px 0;border-bottom:1px solid #ddd;">Border color</td></tr><tr><td style="padding:4px 0;border-bottom:1px solid #ddd;">border </td><td style="padding:4px 0;border-bottom:1px solid #ddd;">bool</td><td style="padding:4px 0;border-bottom:1px solid #ddd;">Adds a border</td></tr><tr><td style="padding:4px 0;border-bottom:1px solid #ddd;">borderTop </td><td style="padding:4px 0;border-bottom:1px solid #ddd;">bool</td><td style="padding:4px 0;border-bottom:1px solid #ddd;">Adds a border to the top side</td></tr><tr><td style="padding:4px 0;border-bottom:1px solid #ddd;">borderRight </td><td style="padding:4px 0;border-bottom:1px solid #ddd;">bool</td><td style="padding:4px 0;border-bottom:1px solid #ddd;">Adds a border to the right side</td></tr><tr><td style="padding:4px 0;border-bottom:1px solid #ddd;">borderBottom </td><td style="padding:4px 0;border-bottom:1px solid #ddd;">bool</td><td style="padding:4px 0;border-bottom:1px solid #ddd;">Adds a border to the bottom side</td></tr><tr><td style="padding:4px 0;border-bottom:1px solid #ddd;">borderLeft </td><td style="padding:4px 0;border-bottom:1px solid #ddd;">bool</td><td style="padding:4px 0;border-bottom:1px solid #ddd;">Adds a border to the left side</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:inline-block;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);"><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;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:-16px;margin-right:-16px;margin-left:-16px;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="border-collapse:separate;border-spacing:0;max-width:100%;width:100%;"><thead><tr><th style="text-align:left;padding:4px 0;vertical-align:bottom;border-bottom:2px solid #ddd;">Prop</th><th style="text-align:left;padding:4px 0;vertical-align:bottom;border-bottom:2px solid #ddd;">Type</th><th style="text-align:left;padding:4px 0;vertical-align:bottom;border-bottom:2px solid #ddd;">Description</th></tr></thead><tbody><tr><td style="padding:4px 0;border-bottom:1px solid #ddd;">links *</td><td style="padding:4px 0;border-bottom:1px solid #ddd;">array</td><td style="padding:4px 0;border-bottom:1px solid #ddd;">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:inline-block;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);"><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;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:-16px;margin-right:-16px;margin-left:-16px;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;display:inline-block;margin:0;padding:8px 16px;cursor:pointer;border:0;border-radius:2px;color:#fff;background-color:#08e;">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-left:-8px;margin-right:-8px;margin-bottom:16px;"><div><button title="<Button rounded={true} big={true} />" name="Button" class="Button" style="font-family:inherit;font-size:14px;font-weight:600;display:inline-block;margin:8px;padding:16px;cursor:pointer;border:0;border-radius:2px;color:#fff;background-color:#08e;">Button</button><button title="<Button rounded={true} big={false} />" name="Button" class="Button" style="font-family:inherit;font-size:14px;font-weight:600;display:inline-block;margin:8px;padding:8px 16px;cursor:pointer;border:0;border-radius:2px;color:#fff;background-color:#08e;">Button</button></div></div></div></div><div style="max-width:100%;overflow-x:scroll;"><table style="border-collapse:separate;border-spacing:0;max-width:100%;width:100%;"><thead><tr><th style="text-align:left;padding:4px 0;vertical-align:bottom;border-bottom:2px solid #ddd;">Prop</th><th style="text-align:left;padding:4px 0;vertical-align:bottom;border-bottom:2px solid #ddd;">Type</th><th style="text-align:left;padding:4px 0;vertical-align:bottom;border-bottom:2px solid #ddd;">Description</th></tr></thead><tbody><tr><td style="padding:4px 0;border-bottom:1px solid #ddd;">href </td><td style="padding:4px 0;border-bottom:1px solid #ddd;">string</td><td style="padding:4px 0;border-bottom:1px solid #ddd;">Pass an href prop to make the Button an <a> tag instead of a <button></td></tr><tr><td style="padding:4px 0;border-bottom:1px solid #ddd;">color </td><td style="padding:4px 0;border-bottom:1px solid #ddd;">string</td><td style="padding:4px 0;border-bottom:1px solid #ddd;">Button color</td></tr><tr><td style="padding:4px 0;border-bottom:1px solid #ddd;">backgroundColor </td><td style="padding:4px 0;border-bottom:1px solid #ddd;">string</td><td style="padding:4px 0;border-bottom:1px solid #ddd;">Button background color</td></tr><tr><td style="padding:4px 0;border-bottom:1px solid #ddd;">rounded </td><td style="padding:4px 0;border-bottom:1px solid #ddd;">oneOfType([bool, enum])</td><td style="padding:4px 0;border-bottom:1px solid #ddd;">Controls the border radius for creating button groups</td></tr><tr><td style="padding:4px 0;border-bottom:1px solid #ddd;">big </td><td style="padding:4px 0;border-bottom:1px solid #ddd;">bool</td><td style="padding:4px 0;border-bottom:1px solid #ddd;">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:inline-block;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);"><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;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:-16px;margin-right:-16px;margin-left:-16px;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;display:inline-block;margin:0;padding:8px 16px;cursor:pointer;border:0;border-radius:2px 0 0 2px;color:#08e;background-color:transparent;box-shadow:inset 0 0 0 1px;">Button</button><button class="ButtonOutline" style="font-family:inherit;font-size:14px;font-weight:600;display:inline-block;margin:0;padding:8px 16px;cursor:pointer;border:0;border-radius:0;color:#08e;background-color:transparent;box-shadow:inset 0 0 0 1px;margin-left:-1px;">Group</button><button class="Button" style="font-family:inherit;font-size:14px;font-weight:600;display:inline-block;margin:0;padding:8px 16px;cursor:pointer;border:0;border-radius:0 2px 2px 0;color:#fff;background-color:#08e;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-left:-8px;margin-right:-8px;margin-bottom:16px;"><div><button title="<ButtonOutline rounded={true} big={true} />" name="ButtonOutline" class="ButtonOutline" style="font-family:inherit;font-size:14px;font-weight:600;display:inline-block;margin:8px;padding:16px;cursor:pointer;border:0;border-radius:2px;color:#08e;background-color:transparent;box-shadow:inset 0 0 0 1px;">ButtonOutline</button><button title="<ButtonOutline rounded={true} big={false} />" name="ButtonOutline" class="ButtonOutline" style="font-family:inherit;font-size:14px;font-weight:600;display:inline-block;margin:8px;padding:8px 16px;cursor:pointer;border:0;border-radius:2px;color:#08e;background-color:transparent;box-shadow:inset 0 0 0 1px;">ButtonOutline</button></div></div></div></div><div style="max-width:100%;overflow-x:scroll;"><table style="border-collapse:separate;border-spacing:0;max-width:100%;width:100%;"><thead><tr><th style="text-align:left;padding:4px 0;vertical-align:bottom;border-bottom:2px solid #ddd;">Prop</th><th style="text-align:left;padding:4px 0;vertical-align:bottom;border-bottom:2px solid #ddd;">Type</th><th style="text-align:left;padding:4px 0;vertical-align:bottom;border-bottom:2px solid #ddd;">Description</th></tr></thead><tbody><tr><td style="padding:4px 0;border-bottom:1px solid #ddd;">href </td><td style="padding:4px 0;border-bottom:1px solid #ddd;">string</td><td style="padding:4px 0;border-bottom:1px solid #ddd;">Pass an href prop to make the ButtonOutline an <a> tag instead of a <button></td></tr><tr><td style="padding:4px 0;border-bottom:1px solid #ddd;">color </td><td style="padding:4px 0;border-bottom:1px solid #ddd;">string</td><td style="padding:4px 0;border-bottom:1px solid #ddd;">Text color</td></tr><tr><td style="padding:4px 0;border-bottom:1px solid #ddd;">rounded </td><td style="padding:4px 0;border-bottom:1px solid #ddd;">oneOfType([bool, enum])</td><td style="padding:4px 0;border-bottom:1px solid #ddd;">Controls the border radius for creating button groups</td></tr><tr><td style="padding:4px 0;border-bottom:1px solid #ddd;">big </td><td style="padding:4px 0;border-bottom:1px solid #ddd;">bool</td><td style="padding:4px 0;border-bottom:1px solid #ddd;">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:inline-block;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);"><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;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:-16px;margin-right:-16px;margin-left:-16px;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" 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" />
<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="border-collapse:separate;border-spacing:0;max-width:100%;width:100%;"><thead><tr><th style="text-align:left;padding:4px 0;vertical-align:bottom;border-bottom:2px solid #ddd;">Prop</th><th style="text-align:left;padding:4px 0;vertical-align:bottom;border-bottom:2px solid #ddd;">Type</th><th style="text-align:left;padding:4px 0;vertical-align:bottom;border-bottom:2px solid #ddd;">Description</th></tr></thead><tbody><tr><td style="padding:4px 0;border-bottom:1px solid #ddd;">width </td><td style="padding:4px 0;border-bottom:1px solid #ddd;">oneOfType([number, string])</td><td style="padding:4px 0;border-bottom:1px solid #ddd;">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:inline-block;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);"><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;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:-16px;margin-right:-16px;margin-left:-16px;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" 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" />
</div></pre></div><div></div></div><div style="max-width:100%;overflow-x:scroll;"><table style="border-collapse:separate;border-spacing:0;max-width:100%;width:100%;"><thead><tr><th style="text-align:left;padding:4px 0;vertical-align:bottom;border-bottom:2px solid #ddd;">Prop</th><th style="text-align:left;padding:4px 0;vertical-align:bottom;border-bottom:2px solid #ddd;">Type</th><th style="text-align:left;padding:4px 0;vertical-align:bottom;border-bottom:2px solid #ddd;">Description</th></tr></thead><tbody><tr><td style="padding:4px 0;border-bottom:1px solid #ddd;">src *</td><td style="padding:4px 0;border-bottom:1px solid #ddd;">string</td><td style="padding:4px 0;border-bottom:1px solid #ddd;">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:inline-block;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);"><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;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:-16px;margin-right:-16px;margin-left:-16px;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="border-collapse:separate;border-spacing:0;max-width:100%;width:100%;"><thead><tr><th style="text-align:left;padding:4px 0;vertical-align:bottom;border-bottom:2px solid #ddd;">Prop</th><th style="text-align:left;padding:4px 0;vertical-align:bottom;border-bottom:2px solid #ddd;">Type</th><th style="text-align:left;padding:4px 0;vertical-align:bottom;border-bottom:2px solid #ddd;">Description</th></tr></thead><tbody><tr><td style="padding:4px 0;border-bottom:1px solid #ddd;">label *</td><td style="padding:4px 0;border-bottom:1px solid #ddd;">string</td><td style="padding:4px 0;border-bottom:1px solid #ddd;">Label for form element</td></tr><tr><td style="padding:4px 0;border-bottom:1px solid #ddd;">name *</td><td style="padding:4px 0;border-bottom:1px solid #ddd;">string</td><td style="padding:4px 0;border-bottom:1px solid #ddd;">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:inline-block;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);"><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;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:-16px;margin-right:-16px;margin-left:-16px;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:inline-block;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);"><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;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:-16px;margin-right:-16px;margin-left:-16px;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:inline-block;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);"><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;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:-16px;margin-right:-16px;margin-left:-16px;margin-bottom:16px;padding:16px;color:#fff;background-color:#111;border-radius:2px 2px 0 0;">Example</div><div class="mb2"><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);"/><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;"><Divider /></pre></div><div></div></div><div style="max-width:100%;overflow-x:scroll;"><table style="border-collapse:separate;border-spacing:0;max-width:100%;width:100%;"><thead><tr><th style="text-align:left;padding:4px 0;vertical-align:bottom;border-bottom:2px solid #ddd;">Prop</th><th style="text-align:left;padding:4px 0;vertical-align:bottom;border-bottom:2px solid #ddd;">Type</th><th style="text-align:left;padding:4px 0;vertical-align:bottom;border-bottom:2px solid #ddd;">Description</th></tr></thead><tbody><tr><td style="padding:4px 0;border-bottom:1px solid #ddd;">compact </td><td style="padding:4px 0;border-bottom:1px solid #ddd;">bool</td><td style="padding:4px 0;border-bottom:1px solid #ddd;">Removes margin top and bottom</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:inline-block;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);"><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;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:-16px;margin-right:-16px;margin-left:-16px;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 Page</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 Page
</a></pre></div><div></div></div><div style="max-width:100%;overflow-x:scroll;"><table style="border-collapse:separate;border-spacing:0;max-width:100%;width:100%;"><thead><tr><th style="text-align:left;padding:4px 0;vertical-align:bottom;border-bottom:2px solid #ddd;">Prop</th><th style="text-align:left;padding:4px 0;vertical-align:bottom;border-bottom:2px solid #ddd;">Type</th><th style="text-align:left;padding:4px 0;vertical-align:bottom;border-bottom:2px solid #ddd;">Description</th></tr></thead><tbody><tr><td style="padding:4px 0;border-bottom:1px solid #ddd;">size </td><td style="padding:4px 0;border-bottom:1px solid #ddd;">number</td><td style="padding:4px 0;border-bottom:1px solid #ddd;">Width or height of drawer, depending on placement</td></tr><tr><td style="padding:4px 0;border-bottom:1px solid #ddd;">open </td><td style="padding:4px 0;border-bottom:1px solid #ddd;">bool</td><td style="padding:4px 0;border-bottom:1px solid #ddd;">Shows and hides the drawer</td></tr><tr><td style="padding:4px 0;border-bottom:1px solid #ddd;">position </td><td style="padding:4px 0;border-bottom:1px solid #ddd;">oneOf(['top', 'right', 'bottom', 'left'])</td><td style="padding:4px 0;border-bottom:1px solid #ddd;">Position relative to the viewport</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:inline-block;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);"><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;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:-16px;margin-right:-16px;margin-left:-16px;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:72px;margin-top:16px;margin-bottom:16px;border-style:none;color:inherit;background-color:transparent;border-width:4px;border-color:#08e;"><div class="Dropdown" style="position:relative;"><button class="Button" style="font-family:inherit;font-size:14px;font-weight:600;display:inline-block;margin:0;padding:8px 16px;cursor:pointer;border:0;border-radius:2px;color:#fff;background-color:#08e;">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:inline-block;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:inline-block;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 padding={72}>
<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:inline-block;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);"><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;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:-16px;margin-right:-16px;margin-left:-16px;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="border-collapse:separate;border-spacing:0;max-width:100%;width:100%;"><thead><tr><th style="text-align:left;padding:4px 0;vertical-align:bottom;border-bottom:2px solid #ddd;">Prop</th><th style="text-align:left;padding:4px 0;vertical-align:bottom;border-bottom:2px solid #ddd;">Type</th><th style="text-align:left;padding:4px 0;vertical-align:bottom;border-bottom:2px solid #ddd;">Description</th></tr></thead><tbody><tr><td style="padding:4px 0;border-bottom:1px solid #ddd;">open </td><td style="padding:4px 0;border-bottom:1px solid #ddd;">bool</td><td style="padding:4px 0;border-bottom:1px solid #ddd;">Toggles visibility of DropdownMenu</td></tr><tr><td style="padding:4px 0;border-bottom:1px solid #ddd;">right </td><td style="padding:4px 0;border-bottom:1px solid #ddd;">bool</td><td style="padding:4px 0;border-bottom:1px solid #ddd;">Anchors menu to the right</td></tr><tr><td style="padding:4px 0;border-bottom:1px solid #ddd;">top </td><td style="padding:4px 0;border-bottom:1px solid #ddd;">bool</td><td style="padding:4px 0;border-bottom:1px solid #ddd;">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:inline-block;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);"><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;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:-16px;margin-right:-16px;margin-left:-16px;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/658WsCFwm9A" 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/658WsCFwm9A"
/>
</Embed></pre></div><div></div></div><div style="max-width:100%;overflow-x:scroll;"><table style="border-collapse:separate;border-spacing:0;max-width:100%;width:100%;"><thead><tr><th style="text-align:left;padding:4px 0;vertical-align:bottom;border-bottom:2px solid #ddd;">Prop</th><th style="text-align:left;padding:4px 0;vertical-align:bottom;border-bottom:2px solid #ddd;">Type</th><th style="text-align:left;padding:4px 0;vertical-align:bottom;border-bottom:2px solid #ddd;">Description</th></tr></thead><tbody><tr><td style="padding:4px 0;border-bottom:1px solid #ddd;">ratio </td><td style="padding:4px 0;border-bottom:1px solid #ddd;">number</td><td style="padding:4px 0;border-bottom:1px solid #ddd;">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:inline-block;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);"><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;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:-16px;margin-right:-16px;margin-left:-16px;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:inline-block;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);"><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;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:-16px;margin-right:-16px;margin-left:-16px;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-left:-8px;margin-right:-8px;margin-bottom:16px;"><div><h1 title="<Heading level={1} />" name="Heading" class="Heading" style="font-size:32px;font-weight:600;margin:8px;">Heading</h1><h2 title="<Heading level={2} />" name="Heading" class="Heading" style="font-size:24px;font-weight:600;margin:8px;">Heading</h2><h3 title="<Heading level={3} />" name="Heading" class="Heading" style="font-size:20px;font-weight:600;margin:8px;">Heading</h3><h4 title="<Heading level={4} />" name="Heading" class="Heading" style="font-size:16px;font-weight:600;margin:8px;">Heading</h4><h5 title="<Heading level={5} />" name="Heading" class="Heading" style="font-size:14px;font-weight:600;margin:8px;">Heading</h5><h6 title="<Heading level={6} />" name="Heading" class="Heading" style="font-size:12px;font-weight:600;margin:8px;">Heading</h6></div></div></div></div><div style="max-width:100%;overflow-x:scroll;"><table style="border-collapse:separate;border-spacing:0;max-width:100%;width:100%;"><thead><tr><th style="text-align:left;padding:4px 0;vertical-align:bottom;border-bottom:2px solid #ddd;">Prop</th><th style="text-align:left;padding:4px 0;vertical-align:bottom;border-bottom:2px solid #ddd;">Type</th><th style="text-align:left;padding:4px 0;vertical-align:bottom;border-bottom:2px solid #ddd;">Description</th></tr></thead><tbody><tr><td style="padding:4px 0;border-bottom:1px solid #ddd;">level </td><td style="padding:4px 0;border-bottom:1px solid #ddd;">oneOf([1, 2, 3, 4, 5, 6])</td><td style="padding:4px 0;border-bottom:1px solid #ddd;">Heading level, e.g. level={1} for <h1></td></tr><tr><td style="padding:4px 0;border-bottom:1px solid #ddd;">size </td><td style="padding:4px 0;border-bottom:1px solid #ddd;">oneOf([0, 1, 2, 3, 4, 5, 6])</td><td style="padding:4px 0;border-bottom:1px solid #ddd;">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:inline-block;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);"><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;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:-16px;margin-right:-16px;margin-left:-16px;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-left:-8px;margin-right:-8px;margin-bottom:16px;"><div><h1 class="Heading" style="font-size:32px;font-weight:600;margin:8px;"><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:8px;"><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:8px;"><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:8px;"><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:8px;"><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:8px;"><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="border-collapse:separate;border-spacing:0;max-width:100%;width:100%;"><thead><tr><th style="text-align:left;padding:4px 0;vertical-align:bottom;border-bottom:2px solid #ddd;">Prop</th><th style="text-align:left;padding:4px 0;vertical-align:bottom;border-bottom:2px solid #ddd;">Type</th><th style="text-align:left;padding:4px 0;vertical-align:bottom;border-bottom:2px solid #ddd;">Description</th></tr></thead><tbody><tr><td style="padding:4px 0;border-bottom:1px solid #ddd;">level </td><td style="padding:4px 0;border-bottom:1px solid #ddd;">oneOf([1, 2, 3, 4, 5, 6])</td><td style="padding:4px 0;border-bottom:1px solid #ddd;">Heading level, e.g. level={1} for <h1></td></tr><tr><td style="padding:4px 0;border-bottom:1px solid #ddd;">size </td><td style="padding:4px 0;border-bottom:1px solid #ddd;">oneOf([1, 2, 3, 4, 5, 6])</td><td style="padding:4px 0;border-bottom:1px solid #ddd;">Visual size of heading</td></tr><tr><td style="padding:4px 0;border-bottom:1px solid #ddd;">href </td><td style="padding:4px 0;border-bottom:1px solid #ddd;">string</td><td style="padding:4px 0;border-bottom:1px solid #ddd;">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:inline-block;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);"><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</p></div></header><div class="Panel" style="padding:16px;margin-bottom:16px;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:-16px;margin-right:-16px;margin-left:-16px;margin-bottom:16px;padding:16px;color:#fff;background-color:#111;border-radius:2px 2px 0 0;">Example</div><div class="mb2"><div class="Input"><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-bottom:16px;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"
type="text"
/></pre></div><div class="Permutations"><p class="Text" style="font-size:12px;margin:0;">Variations</p><div style="position:relative;margin-left:-8px;margin-right:-8px;margin-bottom:16px;"><div><div class="Input" style="margin:8px;"><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} />" 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-bottom:16px;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:8px;"><label for="Input" class="Label" style="font-size:14px;font-weight:600;">Input</label><input title="<Input label='Input' hideLabel={false} />" 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-bottom:16px;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="border-collapse:separate;border-spacing:0;max-width:100%;width:100%;"><thead><tr><th style="text-align:left;padding:4px 0;vertical-align:bottom;border-bottom:2px solid #ddd;">Prop</th><th style="text-align:left;padding:4px 0;vertical-align:bottom;border-bottom:2px solid #ddd;">Type</th><th style="text-align:left;padding:4px 0;vertical-align:bottom;border-bottom:2px solid #ddd;">Description</th></tr></thead><tbody><tr><td style="padding:4px 0;border-bottom:1px solid #ddd;">label *</td><td style="padding:4px 0;border-bottom:1px solid #ddd;">string</td><td style="padding:4px 0;border-bottom:1px solid #ddd;">Label for form element</td></tr><tr><td style="padding:4px 0;border-bottom:1px solid #ddd;">name *</td><td style="padding:4px 0;border-bottom:1px solid #ddd;">string</td><td style="padding:4px 0;border-bottom:1px solid #ddd;">Name attribute for form element</td></tr><tr><td style="padding:4px 0;border-bottom:1px solid #ddd;">type </td><td style="padding:4px 0;border-bottom:1px solid #ddd;">string</td><td style="padding:4px 0;border-bottom:1px solid #ddd;">Form element type</td></tr><tr><td style="padding:4px 0;border-bottom:1px solid #ddd;">hideLabel </td><td style="padding:4px 0;border-bottom:1px solid #ddd;">bool</td><td style="padding:4px 0;border-bottom:1px solid #ddd;">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:inline-block;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);"><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;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:-16px;margin-right:-16px;margin-left:-16px;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-left:-8px;margin-right:-8px;margin-bottom:16px;"><div><div class="InputRange" style="margin:8px;"><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-top:0;margin-bottom:16px;padding-top:8px;padding-bottom:8px;cursor:pointer;color:inherit;background-color:transparent;-webkit-appearance:none;appearance:none;"/></div><div class="InputRange" style="margin:8px;"><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-top:0;margin-bottom:16px;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="border-collapse:separate;border-spacing:0;max-width:100%;width:100%;"><thead><tr><th style="text-align:left;padding:4px 0;vertical-align:bottom;border-bottom:2px solid #ddd;">Prop</th><th style="text-align:left;padding:4px 0;vertical-align:bottom;border-bottom:2px solid #ddd;">Type</th><th style="text-align:left;padding:4px 0;vertical-align:bottom;border-bottom:2px solid #ddd;">Description</th></tr></thead><tbody><tr><td style="padding:4px 0;border-bottom:1px solid #ddd;">label *</td><td style="padding:4px 0;border-bottom:1px solid #ddd;">string</td><td style="padding:4px 0;border-bottom:1px solid #ddd;">Label for form element</td></tr><tr><td style="padding:4px 0;border-bottom:1px solid #ddd;">name *</td><td style="padding:4px 0;border-bottom:1px solid #ddd;">string</td><td style="padding:4px 0;border-bottom:1px solid #ddd;">Name attribute for form element</td></tr><tr><td style="padding:4px 0;border-bottom:1px solid #ddd;">hideLabel </td><td style="padding:4px 0;border-bottom:1px solid #ddd;">bool</td><td style="padding:4px 0;border-bottom:1px solid #ddd;">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:inline-block;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);"><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;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:-16px;margin-right:-16px;margin-left:-16px;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="border-collapse:separate;border-spacing:0;max-width:100%;width:100%;"><thead><tr><th style="text-align:left;padding:4px 0;vertical-align:bottom;border-bottom:2px solid #ddd;">Prop</th><th style="text-align:left;padding:4px 0;vertical-align:bottom;border-bottom:2px solid #ddd;">Type</th><th style="text-align:left;padding:4px 0;vertical-align:bottom;border-bottom:2px solid #ddd;">Description</th></tr></thead><tbody><tr><td style="padding:4px 0;border-bottom:1px solid #ddd;">hide </td><td style="padding:4px 0;border-bottom:1px solid #ddd;">bool</td><td style="padding:4px 0;border-bottom:1px solid #ddd;">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:inline-block;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);"><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;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:-16px;margin-right:-16px;margin-left:-16px;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" style="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"
>
<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-left:-8px;margin-right:-8px;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:8px;"><img src="http://placehold.it/96" style="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:8px;"><img src="http://placehold.it/96" style="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:8px;"><img src="http://placehold.it/96" style="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:8px;"><img src="http://placehold.it/96" style="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:8px;"><img src="http://placehold.it/96" style="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:8px;"><img src="http://placehold.it/96" style="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="border-collapse:separate;border-spacing:0;max-width:100%;width:100%;"><thead><tr><th style="text-align:left;padding:4px 0;vertical-align:bottom;border-bottom:2px solid #ddd;">Prop</th><th style="text-align:left;padding:4px 0;vertical-align:bottom;border-bottom:2px solid #ddd;">Type</th><th style="text-align:left;padding:4px 0;vertical-align:bottom;border-bottom:2px solid #ddd;">Description</th></tr></thead><tbody><tr><td style="padding:4px 0;border-bottom:1px solid #ddd;">img </td><td style="padding:4px 0;border-bottom:1px solid #ddd;">string</td><td style="padding:4px 0;border-bottom:1px solid #ddd;">Image source</td></tr><tr><td style="padding:4px 0;border-bottom:1px solid #ddd;">right </td><td style="padding:4px 0;border-bottom:1px solid #ddd;">bool</td><td style="padding:4px 0;border-bottom:1px solid #ddd;">Displays image to the right</td></tr><tr><td style="padding:4px 0;border-bottom:1px solid #ddd;">align </td><td style="padding:4px 0;border-bottom:1px solid #ddd;">oneOf(['top', 'center', 'bottom'])</td><td style="padding:4px 0;border-bottom:1px solid #ddd;">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:inline-block;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);"><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;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:-16px;margin-right:-16px;margin-left:-16px;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:inline-block;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:inline-block;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:inline-block;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:inline-block;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);"><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;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:-16px;margin-right:-16px;margin-left:-16px;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 Diana!<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 Diana!
<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-left:-8px;margin-right:-8px;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:8px;">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:8px;">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:8px;">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:8px;">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:8px;">Message</div></div></div></div></div><div style="max-width:100%;overflow-x:scroll;"><table style="border-collapse:separate;border-spacing:0;max-width:100%;width:100%;"><thead><tr><th style="text-align:left;padding:4px 0;vertical-align:bottom;border-bottom:2px solid #ddd;">Prop</th><th style="text-align:left;padding:4px 0;vertical-align:bottom;border-bottom:2px solid #ddd;">Type</th><th style="text-align:left;padding:4px 0;vertical-align:bottom;border-bottom:2px solid #ddd;">Description</th></tr></thead><tbody><tr><td style="padding:4px 0;border-bottom:1px solid #ddd;">type </td><td style="padding:4px 0;border-bottom:1px solid #ddd;">oneOf(['default', 'info', 'success', 'warning', 'error'])</td><td style="padding:4px 0;border-bottom:1px solid #ddd;">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:inline-block;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);"><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;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:-16px;margin-right:-16px;margin-left:-16px;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-left:-8px;margin-right:-8px;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:inline-block;padding:4px 8px;color:inherit;cursor:pointer;margin:8px;">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:inline-block;padding:8px;color:inherit;cursor:pointer;margin:8px;">NavItem</a></div></div></div></div><div style="max-width:100%;overflow-x:scroll;"><table style="border-collapse:separate;border-spacing:0;max-width:100%;width:100%;"><thead><tr><th style="text-align:left;padding:4px 0;vertical-align:bottom;border-bottom:2px solid #ddd;">Prop</th><th style="text-align:left;padding:4px 0;vertical-align:bottom;border-bottom:2px solid #ddd;">Type</th><th style="text-align:left;padding:4px 0;vertical-align:bottom;border-bottom:2px solid #ddd;">Description</th></tr></thead><tbody><tr><td style="padding:4px 0;border-bottom:1px solid #ddd;">small </td><td style="padding:4px 0;border-bottom:1px solid #ddd;">bool</td><td style="padding:4px 0;border-bottom:1px solid #ddd;">Sets a smaller font size for compact UI</td></tr><tr><td style="padding:4px 0;border-bottom:1px solid #ddd;">Component </td><td style="padding:4px 0;border-bottom:1px solid #ddd;">node</td><td style="padding:4px 0;border-bottom:1px solid #ddd;">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:inline-block;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);"><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;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:-16px;margin-right:-16px;margin-left:-16px;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;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);"><div style="flex:1 1 auto;"><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="border-collapse:separate;border-spacing:0;max-width:100%;width:100%;"><thead><tr><th style="text-align:left;padding:4px 0;vertical-align:bottom;border-bottom:2px solid #ddd;">Prop</th><th style="text-align:left;padding:4px 0;vertical-align:bottom;border-bottom:2px solid #ddd;">Type</th><th style="text-align:left;padding:4px 0;vertical-align:bottom;border-bottom:2px solid #ddd;">Description</th></tr></thead><tbody><tr><td style="padding:4px 0;border-bottom:1px solid #ddd;">heading </td><td style="padding:4px 0;border-bottom:1px solid #ddd;">string</td><td style="padding:4px 0;border-bottom:1px solid #ddd;">Page heading</td></tr><tr><td style="padding:4px 0;border-bottom:1px solid #ddd;">description </td><td style="padding:4px 0;border-bottom:1px solid #ddd;">string</td><td style="padding:4px 0;border-bottom:1px solid #ddd;">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:inline-block;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);"><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;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:-16px;margin-right:-16px;margin-left:-16px;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;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:-16px;margin-right:-16px;margin-left:-16px;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-left:-8px;margin-right:-8px;margin-bottom:16px;"><div><div title="<Panel type='default' />" name="Panel" class="Panel" style="padding:16px;margin-bottom:16px;border-width:1px;border-style:solid;border-color:#111;border-radius:2px;margin:8px;">Panel</div><div title="<Panel type='info' />" name="Panel" class="Panel" style="padding:16px;margin-bottom:16px;border-width:1px;border-style:solid;border-color:#08e;border-radius:2px;margin:8px;">Panel</div><div title="<Panel type='success' />" name="Panel" class="Panel" style="padding:16px;margin-bottom:16px;border-width:1px;border-style:solid;border-color:#1c7;border-radius:2px;margin:8px;">Panel</div><div title="<Panel type='warning' />" name="Panel" class="Panel" style="padding:16px;margin-bottom:16px;border-width:1px;border-style:solid;border-color:#f90;border-radius:2px;margin:8px;">Panel</div><div title="<Panel type='error' />" name="Panel" class="Panel" style="padding:16px;margin-bottom:16px;border-width:1px;border-style:solid;border-color:#f52;border-radius:2px;margin:8px;">Panel</div></div></div></div></div><div style="max-width:100%;overflow-x:scroll;"><table style="border-collapse:separate;border-spacing:0;max-width:100%;width:100%;"><thead><tr><th style="text-align:left;padding:4px 0;vertical-align:bottom;border-bottom:2px solid #ddd;">Prop</th><th style="text-align:left;padding:4px 0;vertical-align:bottom;border-bottom:2px solid #ddd;">Type</th><th style="text-align:left;padding:4px 0;vertical-align:bottom;border-bottom:2px solid #ddd;">Description</th></tr></thead><tbody><tr><td style="padding:4px 0;border-bottom:1px solid #ddd;">type </td><td style="padding:4px 0;border-bottom:1px solid #ddd;">oneOf(['default', 'info', 'success', 'warning', 'error'])</td><td style="padding:4px 0;border-bottom:1px solid #ddd;">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:inline-block;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);"><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;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:-16px;margin-right:-16px;margin-left:-16px;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-left:-8px;margin-right:-8px;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;margin:8px;">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;margin:8px;">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;margin:8px;">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;margin:8px;">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;margin:8px;">PanelFooter</div></div></div></div></div><div style="max-width:100%;overflow-x:scroll;"><table style="border-collapse:separate;border-spacing:0;max-width:100%;width:100%;"><thead><tr><th style="text-align:left;padding:4px 0;vertical-align:bottom;border-bottom:2px solid #ddd;">Prop</th><th style="text-align:left;padding:4px 0;vertical-align:bottom;border-bottom:2px solid #ddd;">Type</th><th style="text-align:left;padding:4px 0;vertical-align:bottom;border-bottom:2px solid #ddd;">Description</th></tr></thead><tbody><tr><td style="padding:4px 0;border-bottom:1px solid #ddd;">type </td><td style="padding:4px 0;border-bottom:1px solid #ddd;">oneOf(['default', 'info', 'success', 'warning', 'error'])</td><td style="padding:4px 0;border-bottom:1px solid #ddd;">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:inline-block;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);"><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;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:-16px;margin-right:-16px;margin-left:-16px;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-left:-8px;margin-right:-8px;margin-bottom:16px;"><div><div title="<PanelHeader type='default' />" name="PanelHeader" class="PanelHeader" style="display:flex;align-items:center;font-weight:bold;margin-top:-16px;margin-right:-16px;margin-left:-16px;margin-bottom:16px;padding:16px;color:#fff;background-color:#111;border-radius:2px 2px 0 0;margin:8px;">PanelHeader</div><div title="<PanelHeader type='info' />" name="PanelHeader" class="PanelHeader" style="display:flex;align-items:center;font-weight:bold;margin-top:-16px;margin-right:-16px;margin-left:-16px;margin-bottom:16px;padding:16px;color:#fff;background-color:#08e;border-radius:2px 2px 0 0;margin:8px;">PanelHeader</div><div title="<PanelHeader type='success' />" name="PanelHeader" class="PanelHeader" style="display:flex;align-items:center;font-weight:bold;margin-top:-16px;margin-right:-16px;margin-left:-16px;margin-bottom:16px;padding:16px;color:#fff;background-color:#1c7;border-radius:2px 2px 0 0;margin:8px;">PanelHeader</div><div title="<PanelHeader type='warning' />" name="PanelHeader" class="PanelHeader" style="display:flex;align-items:center;font-weight:bold;margin-top:-16px;margin-right:-16px;margin-left:-16px;margin-bottom:16px;padding:16px;color:#fff;background-color:#f90;border-radius:2px 2px 0 0;margin:8px;">PanelHeader</div><div title="<PanelHeader type='error' />" name="PanelHeader" class="PanelHeader" style="display:flex;align-items:center;font-weight:bold;margin-top:-16px;margin-right:-16px;margin-left:-16px;margin-bottom:16px;padding:16px;color:#fff;background-color:#f52;border-radius:2px 2px 0 0;margin:8px;">PanelHeader</div></div></div></div></div><div style="max-width:100%;overflow-x:scroll;"><table style="border-collapse:separate;border-spacing:0;max-width:100%;width:100%;"><thead><tr><th style="text-align:left;padding:4px 0;vertical-align:bottom;border-bottom:2px solid #ddd;">Prop</th><th style="text-align:left;padding:4px 0;vertical-align:bottom;border-bottom:2px solid #ddd;">Type</th><th style="text-align:left;padding:4px 0;vertical-align:bottom;border-bottom:2px solid #ddd;">Description</th></tr></thead><tbody><tr><td style="padding:4px 0;border-bottom:1px solid #ddd;">type </td><td style="padding:4px 0;border-bottom:1px solid #ddd;">oneOf(['default', 'info', 'success', 'warning', 'error'])</td><td style="padding:4px 0;border-bottom:1px solid #ddd;">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:inline-block;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);"><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;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:-16px;margin-right:-16px;margin-left:-16px;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:inline-block;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);"><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;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:-16px;margin-right:-16px;margin-left:-16px;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="border-collapse:separate;border-spacing:0;max-width:100%;width:100%;"><thead><tr><th style="text-align:left;padding:4px 0;vertical-align:bottom;border-bottom:2px solid #ddd;">Prop</th><th style="text-align:left;padding:4px 0;vertical-align:bottom;border-bottom:2px solid #ddd;">Type</th><th style="text-align:left;padding:4px 0;vertical-align:bottom;border-bottom:2px solid #ddd;">Description</th></tr></thead><tbody><tr><td style="padding:4px 0;border-bottom:1px solid #ddd;">value </td><td style="padding:4px 0;border-bottom:1px solid #ddd;">number</td><td style="padding:4px 0;border-bottom:1px solid #ddd;">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:inline-block;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);"><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;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:-16px;margin-right:-16px;margin-left:-16px;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="border-collapse:separate;border-spacing:0;max-width:100%;width:100%;"><thead><tr><th style="text-align:left;padding:4px 0;vertical-align:bottom;border-bottom:2px solid #ddd;">Prop</th><th style="text-align:left;padding:4px 0;vertical-align:bottom;border-bottom:2px solid #ddd;">Type</th><th style="text-align:left;padding:4px 0;vertical-align:bottom;border-bottom:2px solid #ddd;">Description</th></tr></thead><tbody><tr><td style="padding:4px 0;border-bottom:1px solid #ddd;">label *</td><td style="padding:4px 0;border-bottom:1px solid #ddd;">string</td><td style="padding:4px 0;border-bottom:1px solid #ddd;">Label for form element</td></tr><tr><td style="padding:4px 0;border-bottom:1px solid #ddd;">name *</td><td style="padding:4px 0;border-bottom:1px solid #ddd;">string</td><td style="padding:4px 0;border-bottom:1px solid #ddd;">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:inline-block;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);"><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;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:-16px;margin-right:-16px;margin-left:-16px;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:inline-block;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);"><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;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:-16px;margin-right:-16px;margin-left:-16px;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);"><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="border-collapse:separate;border-spacing:0;max-width:100%;width:100%;"><thead><tr><th style="text-align:left;padding:4px 0;vertical-align:bottom;border-bottom:2px solid #ddd;">Prop</th><th style="text-align:left;padding:4px 0;vertical-align:bottom;border-bottom:2px solid #ddd;">Type</th><th style="text-align:left;padding:4px 0;vertical-align:bottom;border-bottom:2px solid #ddd;">Description</th></tr></thead><tbody><tr><td style="padding:4px 0;border-bottom:1px solid #ddd;">heading </td><td style="padding:4px 0;border-bottom:1px solid #ddd;">string</td><td style="padding:4px 0;border-bottom:1px solid #ddd;">Section heading</td></tr><tr><td style="padding:4px 0;border-bottom:1px solid #ddd;">href </td><td style="padding:4px 0;border-bottom:1px solid #ddd;">string</td><td style="padding:4px 0;border-bottom:1px solid #ddd;">Link to section, used in HeadingLink</td></tr><tr><td style="padding:4px 0;border-bottom:1px solid #ddd;">description </td><td style="padding:4px 0;border-bottom:1px solid #ddd;">string</td><td style="padding:4px 0;border-bottom:1px solid #ddd;">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:inline-block;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);"><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;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:-16px;margin-right:-16px;margin-left:-16px;margin-bottom:16px;padding:16px;color:#fff;background-color:#111;border-radius:2px 2px 0 0;">Example</div><div class="mb2"><div class="Select"><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:8px;margin-bottom:16px;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-left:-8px;margin-right:-8px;margin-bottom:16px;"><div><div class="Select" style="margin:8px;"><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:8px;margin-bottom:16px;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 label="One" value="One"></option><option label="Two" value="Two"></option><option label="Three" value="Three"></option></select></div><div class="Select" style="margin:8px;"><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:8px;margin-bottom:16px;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 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="border-collapse:separate;border-spacing:0;max-width:100%;width:100%;"><thead><tr><th style="text-align:left;padding:4px 0;vertical-align:bottom;border-bottom:2px solid #ddd;">Prop</th><th style="text-align:left;padding:4px 0;vertical-align:bottom;border-bottom:2px solid #ddd;">Type</th><th style="text-align:left;padding:4px 0;vertical-align:bottom;border-bottom:2px solid #ddd;">Description</th></tr></thead><tbody><tr><td style="padding:4px 0;border-bottom:1px solid #ddd;">label *</td><td style="padding:4px 0;border-bottom:1px solid #ddd;">string</td><td style="padding:4px 0;border-bottom:1px solid #ddd;">Label for form element</td></tr><tr><td style="padding:4px 0;border-bottom:1px solid #ddd;">name *</td><td style="padding:4px 0;border-bottom:1px solid #ddd;">string</td><td style="padding:4px 0;border-bottom:1px solid #ddd;">Name attribute for form element</td></tr><tr><td style="padding:4px 0;border-bottom:1px solid #ddd;">options *</td><td style="padding:4px 0;border-bottom:1px solid #ddd;">array</td><td style="padding:4px 0;border-bottom:1px solid #ddd;">Options for select</td></tr><tr><td style="padding:4px 0;border-bottom:1px solid #ddd;">hideLabel </td><td style="padding:4px 0;border-bottom:1px solid #ddd;">bool</td><td style="padding:4px 0;border-bottom:1px solid #ddd;">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:inline-block;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);"><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;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:-16px;margin-right:-16px;margin-left:-16px;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;display:inline-block;margin:0;padding:8px 16px;cursor:pointer;border:0;border-radius:2px;color:#fff;background-color:#08e;">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;display:inline-block;margin:0;padding:8px 16px;cursor:pointer;border:0;border-radius:2px;color:#fff;background-color:#08e;">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;display:inline-block;margin:0;padding:8px 16px;cursor:pointer;border:0;border-radius:2px;color:#fff;background-color:#08e;">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="border-collapse:separate;border-spacing:0;max-width:100%;width:100%;"><thead><tr><th style="text-align:left;padding:4px 0;vertical-align:bottom;border-bottom:2px solid #ddd;">Prop</th><th style="text-align:left;padding:4px 0;vertical-align:bottom;border-bottom:2px solid #ddd;">Type</th><th style="text-align:left;padding:4px 0;vertical-align:bottom;border-bottom:2px solid #ddd;">Description</th></tr></thead><tbody><tr><td style="padding:4px 0;border-bottom:1px solid #ddd;">x </td><td style="padding:4px 0;border-bottom:1px solid #ddd;">oneOf([1, 2, 3, 4])</td><td style="padding:4px 0;border-bottom:1px solid #ddd;">Width of space based on the spacing scale</td></tr><tr><td style="padding:4px 0;border-bottom:1px solid #ddd;">auto </td><td style="padding:4px 0;border-bottom:1px solid #ddd;">bool</td><td style="padding:4px 0;border-bottom:1px solid #ddd;">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:inline-block;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);"><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;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:-16px;margin-right:-16px;margin-left:-16px;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-left:-8px;margin-right:-8px;margin-bottom:16px;"><div><p title="<Text small={true} />" name="Text" class="Text" style="font-size:12px;margin:8px;">Text</p><p title="<Text small={false} />" name="Text" class="Text" style="font-size:16px;margin:8px;">Text</p></div></div></div></div><div style="max-width:100%;overflow-x:scroll;"><table style="border-collapse:separate;border-spacing:0;max-width:100%;width:100%;"><thead><tr><th style="text-align:left;padding:4px 0;vertical-align:bottom;border-bottom:2px solid #ddd;">Prop</th><th style="text-align:left;padding:4px 0;vertical-align:bottom;border-bottom:2px solid #ddd;">Type</th><th style="text-align:left;padding:4px 0;vertical-align:bottom;border-bottom:2px solid #ddd;">Description</th></tr></thead><tbody><tr><td style="padding:4px 0;border-bottom:1px solid #ddd;">small </td><td style="padding:4px 0;border-bottom:1px solid #ddd;">bool</td><td style="padding:4px 0;border-bottom:1px solid #ddd;">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:inline-block;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);"><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;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:-16px;margin-right:-16px;margin-left:-16px;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-left:-8px;margin-right:-8px;margin-bottom:16px;"><div><div class="Textarea" style="margin:8px;"><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%;padding:8px;margin-bottom:16px;border-radius:2px;border-width:1px;border-styles:solid;border-color:rgba(0, 0, 0, .25);"></textarea></div><div class="Textarea" style="margin:8px;"><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%;padding:8px;margin-bottom:16px;border-radius:2px;border-width:1px;border-styles:solid;border-color:rgba(0, 0, 0, .25);"></textarea></div></div></div></div></div><div style="max-width:100%;overflow-x:scroll;"><table style="border-collapse:separate;border-spacing:0;max-width:100%;width:100%;"><thead><tr><th style="text-align:left;padding:4px 0;vertical-align:bottom;border-bottom:2px solid #ddd;">Prop</th><th style="text-align:left;padding:4px 0;vertical-align:bottom;border-bottom:2px solid #ddd;">Type</th><th style="text-align:left;padding:4px 0;vertical-align:bottom;border-bottom:2px solid #ddd;">Description</th></tr></thead><tbody><tr><td style="padding:4px 0;border-bottom:1px solid #ddd;">label *</td><td style="padding:4px 0;border-bottom:1px solid #ddd;">string</td><td style="padding:4px 0;border-bottom:1px solid #ddd;">Label for form element</td></tr><tr><td style="padding:4px 0;border-bottom:1px solid #ddd;">name *</td><td style="padding:4px 0;border-bottom:1px solid #ddd;">string</td><td style="padding:4px 0;border-bottom:1px solid #ddd;">Name attribute for form element</td></tr><tr><td style="padding:4px 0;border-bottom:1px solid #ddd;">hideLabel </td><td style="padding:4px 0;border-bottom:1px solid #ddd;">bool</td><td style="padding:4px 0;border-bottom:1px solid #ddd;">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:inline-block;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);"><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;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:-16px;margin-right:-16px;margin-left:-16px;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:inline-block;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:inline-block;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:inline-block;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:inline-block;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);"><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;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:-16px;margin-right:-16px;margin-left:-16px;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="border-collapse:separate;border-spacing:0;max-width:100%;width:100%;"><thead><tr><th style="text-align:left;padding:4px 0;vertical-align:bottom;border-bottom:2px solid #ddd;">Prop</th><th style="text-align:left;padding:4px 0;vertical-align:bottom;border-bottom:2px solid #ddd;">Type</th><th style="text-align:left;padding:4px 0;vertical-align:bottom;border-bottom:2px solid #ddd;">Description</th></tr></thead><tbody><tr><td style="padding:4px 0;border-bottom:1px solid #ddd;">title </td><td style="padding:4px 0;border-bottom:1px solid #ddd;">string</td><td style="padding:4px 0;border-bottom:1px solid #ddd;">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:inline-block;padding:4px 8px;color:inherit;cursor:pointer;">Back to Top</a></div></div></section></main><p class="Text" style="font-size:16px;margin:0;">Documentation generated with <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:inline-block;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:inline-block;padding:8px;color:inherit;cursor:pointer;">Made by Jxnblk</a></footer></div></body></html>