Skip to main content
5.0.3Next5.1.05.0.35.0.25.0.15.0.04.0.94.0.84.0.73.2.03.1.03.0.13.0.02.1.12.0.101.0.0
Version: 5.0.3

Spacing

This page is under construction

In web development, use of space plays a key role in creating usable and responsive user experiences. This page describes how Triton uses spacing.

Note: We also have a component to enable spacing, the Triton Gap component.

Sizes

SizeRemDefault px
tiny0.25rem4px
mini0.5rem8px
small0.75rem12px
base1rem16px
moderate1.2520px
medium1.5rem24px
large2rem32px
xlarge3rem48px
xxlarge4rem64px
xxxlarge8rem128px

How to use

Triton Component Library in use will add all common sizes as rem to the :root with the prefix --space-. To use it in your project pass in the CSS property (Variable) e.g.

.space-between {
margin: 0rem var(--space-medium);
}