Spacing
A set of prescribed spacers allow us to be consistent in our use of white space.
The following spacing tokens are used throughout Sage:
| Token | Value |
|---|---|
| 2xs | 4px |
| xs | 8px |
| sm | 16px |
| md | 24px |
| lg | 32px |
| xl | 48px |
We use several different "tiers" of spacings as follows:
- Application-level:
48px-- this is the outermost tier where foundational page elements such as the page heading and any organizing panels are contained. - Panel-level:
32px-- this is next layer in where groups of elements are presented with a slight smaller internal spacing. This may be distinct panels or groups of content similar to such panels. - Card-level:
24px-- card components or smaller groups of content receive this smaller spacing. - Stack-level:
8px-- stacks of content that are visually groups such as blocks of paragraphs or list items get this smallest spacing.
A spacer attribute is available on all Sage Rails components that can apply a spacing value to any side of an element (top, right, bottom, left).
Usage works like this:
<%= sage_component SageButton, { value: "Sample", spacer: { top: "xs", bottom: "lg" }} %>
Finally, beyond component attributes, the SageClassnames module makes these same spacer classes available anywhere.
In Rails:
<b class="<%= SageClassnames::SPACERS::LG_TOP %>">I have extra space above!</b>
In React:
<b className={SageClassnames.SPACERS.LG_TOP}>I have extra space above!</b>