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>