Sizing
- HTML/CSS:Dev Ready
- Layout:Desktop Only
Sections
You are currently viewing a sandbox preview version of Spring ’20 | Go back to Summer ’20
About Sizing#
Our sizing class names are set up in a human-readable format, e.g. .slds-size_1-of-2
. This equates to a width of 50%.
By default, a group of sizing helpers are created based on standard grid column spans of 2, 3, 4, 5, 6, 7, 8 and 12. For example, if you need 3 cards to horizontally align along the same x-axis, you would use the class .slds-size_1-of-3
on each element. This will make each card take up 33.333% of containing section.
Our sizing helpers have the option to be responsive. By pre-pending a breakpoint name to a sizing helper, e.g. .slds-medium-size_1-of-3
you will output a width at the specified breakpoint name.
Absolute sizing helpers are also available (where widths are declared in rem
units): xx-small
, x-small
, medium
, large
, x-large
and xx-large
as defined in the sizing category of the Design Tokens. e.g. .slds-size_large
.
In some uncommon cases, you may need a sizing helper that is up to a certain breakpoint. For these, use the classes prefixed with max-
to achieve this result.
Here is an overview of our available breakpoint names:
Breakpoint Name | Breakpoint Width |
---|---|
small- | 30em / 480px and higher |
medium- | 48em / 768px and higher |
large- | 64em / 1024px and higher |
max-small- | up to 29.9375em / 479px |
max-medium- | up to 47.9375em / 767px |
max-large- | up to 63.9375em / 1023px |
Our responsive sizing helpers are built upon a mobile first approach. To achieve the desired outcome of this approach, you will need to append responsive sizing helpers to an element that overrides the previous breakpoint. A default sizing helper is required and responsive sizing helpers are additive. The following example demonstrates the class name position for each breakpoint:
<div class="[default] [small size override] [medium size override] [large size override]">
Examples#
2 Column Span#
<div class="demo-only demo-only--sizing slds-grid slds-wrap">
<div class="slds-size_1-of-2">
<div class="slds-box slds-box_x-small slds-text-align_center slds-m-around_x-small">.slds-size_1-of-2</div>
</div>
3 Column Span#
<div class="demo-only demo-only--sizing slds-grid slds-wrap">
<div class="slds-size_1-of-3">
<div class="slds-box slds-box_x-small slds-text-align_center slds-m-around_x-small">.slds-size_1-of-3</div>
</div>
4 Column Span#
<div class="demo-only demo-only--sizing slds-grid slds-wrap">
<div class="slds-size_1-of-4">
<div class="slds-box slds-box_x-small slds-text-align_center slds-m-around_x-small">.slds-size_1-of-4</div>
</div>
5 Column Span#
<div class="demo-only demo-only--sizing slds-grid slds-wrap">
<div class="slds-size_1-of-5">
<div class="slds-box slds-box_x-small slds-text-align_center slds-m-around_x-small">.slds-size_1-of-5</div>
</div>
6 Column Span#
<div class="demo-only demo-only--sizing slds-grid slds-wrap">
<div class="slds-size_1-of-6">
<div class="slds-box slds-box_x-small slds-text-align_center slds-m-around_x-small">.slds-size_1-of-6</div>
</div>
7 Column Span#
<div class="demo-only demo-only--sizing slds-grid slds-wrap">
<div class="slds-size_1-of-7">
<div class="slds-box slds-box_x-small slds-text-align_center slds-m-around_x-small">.slds-size_1-of-7</div>
</div>
8 Column Span#
<div class="demo-only demo-only--sizing slds-grid slds-wrap">
<div class="slds-size_1-of-8">
<div class="slds-box slds-box_x-small slds-text-align_center slds-m-around_x-small">.slds-size_1-of-8</div>
</div>
12 Column Span#
<div class="demo-only demo-only--sizing slds-grid slds-wrap">
<div class="slds-size_1-of-12">
<div class="slds-box slds-box_x-small slds-text-align_center slds-m-around_x-small">.slds-size_1-of-12</div>
</div>
Overview of CSS Classes#
- Selector
- The CSS class being referred to.
- Summary
- A description of what the class does.
- Support
- Whether the class name is dev-ready (meaning it's fully vetted and tested and safe to use) or prototype (which means it's not fully vetted yet).
- Restrict
- The selector that the class name is allowed to be used on.
- Variant
- The base level pattern for a component. A variant can be extended to create another variant of that component, for example, a stateful button is a derivative of the base button.
- Modifier
- A single class that can be added to an HTML element of a component to modify its output. Typically these will be colors, sizing and positioning.
Selector | .slds-size_small |
---|---|
Summary | |
Restrict | * |
Modifier | True |
Selector | .slds-size_full |
---|---|
Summary | |
Restrict | * |
Modifier | True |