Spacing

For common Mainsail spec spacing margins and padding, you can use p-<size> and m-<size> classes.

These are controllable with an intuitive explicit sizing scale that comes from sizes used directly from our Figma specs.

caution

Note: These spacing utility classes utilize !important tags to ensure they can be used as overrides of existing styles.

Available Sizing Scale

Class specifier	Pixels
0	0px
2	2px
4	4px
6	6px
8	8px
10	10px
12	12px
15	15px
16	16px
20	20px
30	30px
48	48px

Margins

Explicit directional margin/padding can be applied by adding a t/b/l/r designation to the class.

E.g. mr-8 will apply margin-right: 8px and ml-8 will apply margin-left: 8px.

If desired, you can supply x or y to apply to both sides.

Examples

// Using margin utility with 8px of top margin<Button className="mt-8" text="Cancel" />
// Using margin utility with 8px of top and 20px of left/right margin<Button className="mt-8 mx-20" text="Confirm"/>

Margin Top

mt-4

mt-8

mt-10

mt-12

mt-15

mt-16

mt-20

mt-30

mt-48

Space Between

If you need to quickly apply some in-between spacing in a simple way use, space-y-<amount> and space-x-<amount> (where amount is an integer in the table above) on a parent item. This adds margin to all but the first item of children.

If you have complex scenarios, reach for AutoGrid.

This example uses space-y-12 for automatic vertical spacing.

This example uses space-x-12 for automatic horizontal spacing.

caution

No responsive features exist for the space- utility at this time. Beware of wrapping elements.

Responsive Spacing & Hiding

Responsive designations for spacing can be applied. The syntax looks like <breakpoint>:<class>

<div className="bg-blue-light p-8 sm:mt-8 md:mt-20 lg:mt-30">mt-48</div>

Margin with 8px at small, 20px at medium and 30 at large (resize browser window to see)

Small and under mt-8Medium breakpoints only mt-20Large and up mt-30