Space Sink

Space Constants

Inset

$mds-space-inset-quarter-x
padding: 2px;
$mds-space-inset-half-x
padding: 4px;
$mds-space-inset-three-quarter-x
padding: 6px;
$mds-space-inset-1-x
padding: 8px;
$mds-space-inset-1-and-a-half-x
padding: 12px;
$mds-space-inset-2-x
padding: 16px;
$mds-space-inset-3-x
padding: 24px;
$mds-space-inset-4-x
padding: 32px;
$mds-space-inset-8-x
padding: 64px;

Inset Stretch

$mds-space-inset-stretch-s
padding: 6px 12px;
$mds-space-inset-stretch-m
padding: 8px 16px;
$mds-space-inset-stretch-l
padding: 12px 24px;

Stack

$mds-space-stack-quarter-x
margin: 0 0 2px;
Demo Block
$mds-space-stack-half-x
margin: 0 0 4px;
Demo Block
$mds-space-stack-three-quarter-x
margin: 0 0 6px;
Demo Block
$mds-space-stack-1-x
margin: 0 0 8px;
Demo Block
$mds-space-stack-1-and-a-half-x
margin: 0 0 12px;
Demo Block
$mds-space-stack-2-x
margin: 0 0 16px;
Demo Block
$mds-space-stack-3-x
margin: 0 0 24px;
Demo Block
$mds-space-stack-4-x
margin: 0 0 32px;
Demo Block
$mds-space-stack-8-x
margin: 0 0 64px;
Demo Block

Inline Right

Demo Block
$mds-space-inline-right-half-x
margin: 0 0 0 4px;
Demo Block
$mds-space-inline-right-three-quarter-x
margin: 0 0 0 6px;
Demo Block
$mds-space-inline-right-1-x
margin: 0 0 0 8px;
Demo Block
$mds-space-inline-right-1-and-a-half-x
margin: 0 0 0 12px;
Demo Block
$mds-space-inline-right-2-x
margin: 0 0 0 16px;

Small

Medium

Large

.mds-form__input--small

.mds-form__input

.mds-form__input--large

.mds-form__textarea--small

.mds-form__textarea

.mds-form__textarea--large

.mds-form__select--small

.mds-form__select

.mds-form__select--large

.mds-list-group--small

.mds-list-group

.mds-list-group--large

.mds-data-table--small

Here is where we want an accurate description about the data displayed and/or the table's intent
Index
Value
Change
DJIA 20,975.78 −36.50
Morningstar Small Cap 6,016.39 −5.70
Morningstar Wide Moat Focus 7,752.66 15.49
— — —
NASDAQ 6,120.59 17.93

.mds-data-table

Here is where we want an accurate description about the data displayed and/or the table's intent
Index
Value
Change
DJIA 20,975.78 −36.50
Morningstar Small Cap 6,016.39 −5.70
Morningstar Wide Moat Focus 7,752.66 15.49
— — —
NASDAQ 6,120.59 17.93

.mds-data-table--large

Here is where we want an accurate description about the data displayed and/or the table's intent
Index
Value
Change
DJIA 20,975.78 −36.50
Morningstar Small Cap 6,016.39 −5.70
Morningstar Wide Moat Focus 7,752.66 15.49
— — —
NASDAQ 6,120.59 17.93

mds-text-crop() mixin

Using the mds-text-crop() mixin in scss will remove the "extra" space from the top and bottom of a text element.

The amount of space calculated for the "content box" varies from browser to browser and on different platforms. The mixin attempts to remove the correct amount of space, but it may not always render the desired result. You can manually "tune" the amount of space cropped using the $top-adjustment and $bottom-adjustment arguments.

The mixin also accepts a $line-height argument to override the default system line height.

Before mds-text-crop

Some SAMPLE Text

After mds-text-crop

Some SAMPLE Text
Some SAMPLE Text - XS
Some SAMPLE Text - S
Some SAMPLE Text - M
Some SAMPLE Text - L

Works with any line height

Wrapping lines of text to illustrate
line height differences. Line height 1.25.
Wrapping lines of text to illustrate
line height differences. Line height 1.4.
Wrapping lines of text to illustrate
line height differences. Line height 1.6.
Wrapping lines of text to illustrate
line height differences. Line height 2.

Useful for ensuring only system padding & margins are creating space between and within elements. Also useful for vertically aligning elements’ top or bottom edges.

Top Alignment Before & After

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi placeat vero amet distinctio ea commodi laboriosam, animi?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi placeat vero amet distinctio ea commodi laboriosam, animi?

Bottom Alignment Before & After

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi placeat vero amet distinctio ea commodi laboriosam, animi?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi placeat vero amet distinctio ea commodi laboriosam, animi?

Pseudo Button Before & After (16px padding)

Call To Action with just text and icon

Call To Action with just text and icon