Inset Space

Version: 0.9.0

Edit

Utilities that define the padded space around an item.

Space Inset

Author: Mary Ditchen
Since: 0.9.0
Source: /source/patterns/utilities/space-insets.scss#L11

Space Inset

Space Inset Compact

Space Inset Tight

Space Inset Loose

Space Inset Expanded

Space Inset Spacious

Space Inset Zero

Space Inset XXXS

Space Inset XXS

Space Inset XS

Space Inset Small

Space Inset Medium

Space Inset Large

Space Inset XL

Space Inset XXL

Space Inset XXXL

<!-- space inset -->
<div class="u-space-inset"><span>Space Inset</span></div>

<!-- space inset compact -->
<div class="u-space-inset-compact"><span>Space Inset Compact</span></div>

<!-- space inset tight -->
<div class="u-space-inset-tight"><span>Space Inset Tight</span></div>

<!-- space inset loose -->
<div class="u-space-inset-loose"><span>Space Inset Loose</span></div>

<!-- space inset expanded -->
<div class="u-space-inset-expanded"><span>Space Inset Expanded</span></div>

<!-- space inset spacious -->
<div class="u-space-inset-spacious"><span>Space Inset Spacious</span></div>

<!-- space inset zero -->
<div class="u-space-inset-zero"><span>Space Inset Zero</span></div>

<!-- space inset xxxs -->
<div class="u-space-inset-xxxs"><span>Space Inset XXXS</span></div>

<!-- space inset xxs -->
<div class="u-space-inset-xxs"><span>Space Inset XXS</span></div>

<!-- space inset xs -->
<div class="u-space-inset-xs"><span>Space Inset XS</span></div>

<!-- space inset sm -->
<div class="u-space-inset-sm"><span>Space Inset Small</span></div>

<!-- space inset md -->
<div class="u-space-inset-md"><span>Space Inset Medium</span></div>

<!-- space inset lg -->
<div class="u-space-inset-lg"><span>Space Inset Large</span></div>

<!-- space inset xl -->
<div class="u-space-inset-xl"><span>Space Inset XL</span></div>

<!-- space inset xxl -->
<div class="u-space-inset-xxl"><span>Space Inset XXL</span></div>

<!-- space inset xxxl -->
<div class="u-space-inset-xxxl"><span>Space Inset XXXL</span></div>

Space Inset Squish

Author: Mary Ditchen
Since: 0.9.0
Source: /source/patterns/utilities/space-insets.scss#L130

Space Inset Squish

Space Inset Squish Tight

Space Inset Squish Loose

Space Inset Squish Expanded

Space Inset Squish Spacious

Space Inset Squish XXS

Space Inset Squish XS

Space Inset Squish Small

Space Inset Squish Medium

Space Inset Squish Large

Space Inset Squish XL

Space Inset Squish XXL

Space Inset Squish XXXL

<!-- space inset squish -->
<div class="u-space-inset-squish"><span>Space Inset Squish</span></div>

<!-- space inset squish tight -->
<div class="u-space-inset-squish-tight"><span>Space Inset Squish Tight</span></div>

<!-- space inset squish loose -->
<div class="u-space-inset-squish-loose"><span>Space Inset Squish Loose</span></div>

<!-- space inset squish expanded -->
<div class="u-space-inset-squish-expanded"><span>Space Inset Squish Expanded</span></div>

<!-- space inset squish spacious -->
<div class="u-space-inset-squish-spacious"><span>Space Inset Squish Spacious</span></div>

<!-- space inset squish xxs -->
<div class="u-space-inset-squish-xxs"><span>Space Inset Squish XXS</span></div>

<!-- space inset squish xs -->
<div class="u-space-inset-squish-xs"><span>Space Inset Squish XS</span></div>

<!-- space inset squish sm -->
<div class="u-space-inset-squish-sm"><span>Space Inset Squish Small</span></div>

<!-- space inset squish md -->
<div class="u-space-inset-squish-md"><span>Space Inset Squish Medium</span></div>

<!-- space inset squish lg -->
<div class="u-space-inset-squish-lg"><span>Space Inset Squish Large</span></div>

<!-- space inset squish xl -->
<div class="u-space-inset-squish-xl"><span>Space Inset Squish XL</span></div>

<!-- space inset squish xxl -->
<div class="u-space-inset-squish-xxl"><span>Space Inset Squish XXL</span></div>

<!-- space inset squish xxxl -->
<div class="u-space-inset-squish-xxxl"><span>Space Inset Squish XXXL</span></div>

Space Inset Stretch

Author: Mary Ditchen
Since: 0.9.0
Source: /source/patterns/utilities/space-insets.scss#L218

Space Inset Stretch

Space Inset Stretch Tight

Space Inset Stretch Loose

Space Inset Stretch Expanded

Space Inset Stretch Spacious

Space Inset Stretch XXS

Space Inset Stretch XS

Space Inset Stretch Small

Space Inset Stretch Medium

Space Inset Stretch Large

Space Inset Stretch XL

Space Inset Stretch XXL

Space Inset Stretch XXXL

<!-- space inset stretch -->
<div class="u-space-inset-stretch"><span>Space Inset Stretch</span></div>

<!-- space inset stretch tight -->
<div class="u-space-inset-stretch-tight"><span>Space Inset Stretch Tight</span></div>

<!-- space inset stretch loose -->
<div class="u-space-inset-stretch-loose"><span>Space Inset Stretch Loose</span></div>

<!-- space inset stretch expanded -->
<div class="u-space-inset-stretch-expanded"><span>Space Inset Stretch Expanded</span></div>

<!-- space inset stretch spacious -->
<div class="u-space-inset-stretch-spacious"><span>Space Inset Stretch Spacious</span></div>

<!-- space inset stretch xxs -->
<div class="u-space-inset-stretch-xxs"><span>Space Inset Stretch XXS</span></div>

<!-- space inset stretch xs -->
<div class="u-space-inset-stretch-xs"><span>Space Inset Stretch XS</span></div>

<!-- space inset stretch sm -->
<div class="u-space-inset-stretch-sm"><span>Space Inset Stretch Small</span></div>

<!-- space inset stretch md -->
<div class="u-space-inset-stretch-md"><span>Space Inset Stretch Medium</span></div>

<!-- space inset stretch lg -->
<div class="u-space-inset-stretch-lg"><span>Space Inset Stretch Large</span></div>

<!-- space inset stretch xl -->
<div class="u-space-inset-stretch-xl"><span>Space Inset Stretch XL</span></div>

<!-- space inset stretch xxl -->
<div class="u-space-inset-stretch-xxl"><span>Space Inset Stretch XXL</span></div>

<!-- space inset stretch xxxl -->
<div class="u-space-inset-stretch-xxxl"><span>Space Inset Stretch XXXL</span></div>

Space Inset Stack

Author: Mary Ditchen
Since: 0.9.0
Source: /source/patterns/utilities/space-insets.scss#L306

Space Inset Stack

Space Inset Stack Compact

Space Inset Stack Tight

Space Inset Stack Loose

Space Inset Stack Expanded

Space Inset Stack Spacious

Space Inset Stack Zero

Space Inset Stack XXXS

Space Inset Stack XXS

Space Inset Stack XS

Space Inset Stack Small

Space Inset Stack Medium

Space Inset Stack Large

Space Inset Stack XL

Space Inset Stack XXL

Space Inset Stack XXXL

<!-- space inset stack -->
<div class="u-space-inset-stack"><span>Space Inset Stack</span></div>

<!-- space inset stack compact -->
<div class="u-space-inset-stack-compact"><span>Space Inset Stack Compact</span></div>

<!-- space inset stack tight -->
<div class="u-space-inset-stack-tight"><span>Space Inset Stack Tight</span></div>

<!-- space inset stack loose -->
<div class="u-space-inset-stack-loose"><span>Space Inset Stack Loose</span></div>

<!-- space inset stack expanded -->
<div class="u-space-inset-stack-expanded"><span>Space Inset Stack Expanded</span></div>

<!-- space inset stack spacious -->
<div class="u-space-inset-stack-spacious"><span>Space Inset Stack Spacious</span></div>

<!-- space inset stack zero -->
<div class="u-space-inset-stack-zero"><span>Space Inset Stack Zero</span></div>

<!-- space inset stack xxxs -->
<div class="u-space-inset-stack-xxxs"><span>Space Inset Stack XXXS</span></div>

<!-- space inset stack xxs -->
<div class="u-space-inset-stack-xxs"><span>Space Inset Stack XXS</span></div>

<!-- space inset stack xs -->
<div class="u-space-inset-stack-xs"><span>Space Inset Stack XS</span></div>

<!-- space inset stack sm -->
<div class="u-space-inset-stack-sm"><span>Space Inset Stack Small</span></div>

<!-- space inset stack md -->
<div class="u-space-inset-stack-md"><span>Space Inset Stack Medium</span></div>

<!-- space inset stack lg -->
<div class="u-space-inset-stack-lg"><span>Space Inset Stack Large</span></div>

<!-- space inset stack xl -->
<div class="u-space-inset-stack-xl"><span>Space Inset Stack XL</span></div>

<!-- space inset stack xxl -->
<div class="u-space-inset-stack-xxl"><span>Space Inset Stack XXL</span></div>

<!-- space inset stack xxxl -->
<div class="u-space-inset-stack-xxxl"><span>Space Inset Stack XXXL</span></div>