Sizes
.small, .medium and .large. The default size needs no class.
The size classes work on these elements. Everything else keeps its size.
| Element | What changes |
|---|---|
| Buttons | Padding and font size |
| Inputs, selects and textareas | Padding, font size, room for icons |
| Groups | Every control inside |
| Select buttons | Padding and font size, like a select |
| Tables | Cell padding and font size |
| Cards | Padding |
| Progress and meter | Bar height |
| Avatars | Diameter |
| Icons | Box size |
Badges have no size classes. They follow the font size around them, so a badge in a heading is larger than one in a paragraph.
Safari on iPhone zooms in on a field with text smaller than 16px, so
.small inputs zoom when they get focus. Keep the default size for
fields people type in on phones.
Buttons and controls
Cards and bars
Small card
Large card