Sizing
Components come in different sizes, suitable for different viewports.
Also known as:
Responsive
Guidelines
Need to know
- Use "Small", "Medium", "Large" and, in code, use `sm`, `md`, `lg`.
- For additional sizing options: in code, use `xxs`, `xs`, `sm`, `md`, `lg`, `xl`, `xxl`.
To keep in mind
- We use 3 primary Sizing options for most components: "Small", "Medium", "Large".
- In code,
sm
,md
,lg
. - Some components only need 2 sizes, e.g. “Small” and “Medium”.
- If a component has only one size, we refer to it by its name or “default”.
- In code,
- For additional sizing options, if absolutely necessary, you can use these 7 options: "Extra Extra Small", "Extra Small", "Small", "Medium", "Large", "Extra Large", and "Extra Extra Large".
- In code,
xxs
,xs
,sm
,md
,lg
,xl
, andxxl
.
- In code,
- A component sizing option doesn’t mean it is necessarily fixed width or fluid width.
- In some cases, we don’t specify a “size” but rather a minimum and maximum width and let the content determine what exact width is appropriate. For example, our modals have min and max widths instead of sizes.
- For some components, the page, context, and content will likely dictate where breakpoints make sense. For example, a data table would vary depending on what data is present.
When to use and when not to use
When to use
- When the component has a particular layout at a particular size.
- Use this component sizing with fixed width or fluid width components.
- Let containers decide the exact size.
When not to use
- For describing specific content such as body, heading, image, use those words instead of sizes (that is, don’t use “tall” to describe a heading when you could use “heading” or “square” to describe an image when you could use “image”)
External links
Here are some examples of other design systems:
- Salesforce's Lightning Design System: sizing utilities
- Salesforce's Lightning Design System: sizing tokens
- Semantic-ui
- Atlassian's Design System: logos
- Redbubble: button
- Yelp: layout
- USPTO: icons
- Wal-Mart: layout
- Microsoft: layout
- Microsoft: spacing
- Bootstrap: buttons
- Bootstrap: sizing
- Elements: tag
- Elements: checkbox
- Code for America: bookmark icons
- Ionic: menu
- Thumbprint: button