Inline Space

Version: 0.9.0

Edit

Utilities that define the space between inline items.

Space Inline

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

Space Inline

Space Inline Compact

Space Inline Tight

Space Inline Loose

Space Inline Expanded

Space Inline Spacious

Space Inline Zero

Space Inline Auto

Space Inline XXXS

Space Inline XXS

Space Inline XS

Space Inline Small

Space Inline Medium

Space Inline Large

Space Inline XL

Space Inline XXL

Space Inline XXXL

<!-- space inline -->
<div class="u-space-inline">Space Inline</div>

<!-- space inline compact -->
<div class="u-space-inline-compact">Space Inline Compact</div>

<!-- space inline tight -->
<div class="u-space-inline-tight">Space Inline Tight</div>

<!-- space inline loose -->
<div class="u-space-inline-loose">Space Inline Loose</div>

<!-- space inline expanded -->
<div class="u-space-inline-expanded">Space Inline Expanded</div>

<!-- space inline spacious -->
<div class="u-space-inline-spacious">Space Inline Spacious</div>

<!-- space inline zero -->
<div class="u-space-inline-zero">Space Inline Zero</div>

<!-- space inline auto -->
<div class="u-space-inline-auto">Space Inline Auto</div>

<!-- space inline xxxs -->
<div class="u-space-inline-xxxs">Space Inline XXXS</div>

<!-- space inline xxs -->
<div class="u-space-inline-xxs">Space Inline XXS</div>

<!-- space inline xs -->
<div class="u-space-inline-xs">Space Inline XS</div>

<!-- space inline sm -->
<div class="u-space-inline-sm">Space Inline Small</div>

<!-- space inline md -->
<div class="u-space-inline-md">Space Inline Medium</div>

<!-- space inline lg -->
<div class="u-space-inline-lg">Space Inline Large</div>

<!-- space inline xl -->
<div class="u-space-inline-xl">Space Inline XL</div>

<!-- space inline xxl -->
<div class="u-space-inline-xxl">Space Inline XXL</div>

<!-- space inline xxxl -->
<div class="u-space-inline-xxxl">Space Inline XXXL</div>

Space Inline Right

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

Space Inline Right

Space Inline Right Compact

Space Inline Right Tight

Space Inline Right Loose

Space Inline Right Expanded

Space Inline Right Spacious

Space Inline Right Zero

Space Inline Right Auto

Space Inline Right XXXS

Space Inline Right XXS

Space Inline Right XS

Space Inline Right Small

Space Inline Right Medium

Space Inline Right Large

Space Inline Right XL

Space Inline Right XXL

Space Inline Right XXXL

<!-- space inline right -->
<div class="u-space-inline-right">Space Inline Right</div>

<!-- space inline right compact -->
<div class="u-space-inline-right-compact">Space Inline Right Compact</div>

<!-- space inline right tight -->
<div class="u-space-inline-right-tight">Space Inline Right Tight</div>

<!-- space inline right loose -->
<div class="u-space-inline-right-loose">Space Inline Right Loose</div>

<!-- space inline right expanded -->
<div class="u-space-inline-right-expanded">Space Inline Right Expanded</div>

<!-- space inline right spacious -->
<div class="u-space-inline-right-spacious">Space Inline Right Spacious</div>

<!-- space inline right zero -->
<div class="u-space-inline-right-zero">Space Inline Right Zero</div>

<!-- space inline right auto -->
<div class="u-space-inline-right-auto">Space Inline Right Auto</div>

<!-- space inline right xxxs -->
<div class="u-space-inline-right-xxxs">Space Inline Right XXXS</div>

<!-- space inline right xxs -->
<div class="u-space-inline-right-xxs">Space Inline Right XXS</div>

<!-- space inline right xs -->
<div class="u-space-inline-right-xs">Space Inline Right XS</div>

<!-- space inline right sm -->
<div class="u-space-inline-right-sm">Space Inline Right Small</div>

<!-- space inline right md -->
<div class="u-space-inline-right-md">Space Inline Right Medium</div>

<!-- space inline right lg -->
<div class="u-space-inline-right-lg">Space Inline Right Large</div>

<!-- space inline right xl -->
<div class="u-space-inline-right-xl">Space Inline Right XL</div>

<!-- space inline right xxl -->
<div class="u-space-inline-right-xxl">Space Inline Right XXL</div>

<!-- space inline right xxxl -->
<div class="u-space-inline-right-xxxl">Space Inline Right XXXL</div>

Space Inline Left

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

Space Inline Left

Space Inline Left Compact

Space Inline Left Tight

Space Inline Left Loose

Space Inline Left Expanded

Space Inline Left Spacious

Space Inline Left Zero

Space Inline Left Auto

Space Inline Left XXXS

Space Inline Left XXS

Space Inline Left XS

Space Inline Left Small

Space Inline Left Medium

Space Inline Left Large

Space Inline Left XL

Space Inline Left XXL

Space Inline Left XXXL

<!-- space inline left -->
<div class="u-space-inline-left">Space Inline Left</div>

<!-- space inline left compact -->
<div class="u-space-inline-left-compact">Space Inline Left Compact</div>

<!-- space inline left tight -->
<div class="u-space-inline-left-tight">Space Inline Left Tight</div>

<!-- space inline left loose -->
<div class="u-space-inline-left-loose">Space Inline Left Loose</div>

<!-- space inline left expanded -->
<div class="u-space-inline-left-expanded">Space Inline Left Expanded</div>

<!-- space inline left spacious -->
<div class="u-space-inline-left-spacious">Space Inline Left Spacious</div>

<!-- space inline left zero -->
<div class="u-space-inline-left-zero">Space Inline Left Zero</div>

<!-- space inline left auto -->
<div class="u-space-inline-left-auto">Space Inline Left Auto</div>

<!-- space inline left xxxs -->
<div class="u-space-inline-left-xxxs">Space Inline Left XXXS</div>

<!-- space inline left xxs -->
<div class="u-space-inline-left-xxs">Space Inline Left XXS</div>

<!-- space inline left xs -->
<div class="u-space-inline-left-xs">Space Inline Left XS</div>

<!-- space inline left sm -->
<div class="u-space-inline-left-sm">Space Inline Left Small</div>

<!-- space inline left md -->
<div class="u-space-inline-left-md">Space Inline Left Medium</div>

<!-- space inline left lg -->
<div class="u-space-inline-left-lg">Space Inline Left Large</div>

<!-- space inline left xl -->
<div class="u-space-inline-left-xl">Space Inline Left XL</div>

<!-- space inline left xxl -->
<div class="u-space-inline-left-xxl">Space Inline Left XXL</div>

<!-- space inline left xxxl -->
<div class="u-space-inline-left-xxxl">Space Inline Left XXXL</div>