Origami Frontend Components & Services

Demos: o-spacing

Named Spaces

This demo visuallies the size of named spaces. It shows a square for each named space, which has a width and height equal to the space size. See the readme for more information on space sizes.

<div class="demo-named-spaces-container">
	<div class="demo-named-space demo-named-space--s1">
		<span class="demo-named-space__name">s1</span>
	</div>

	<div class="demo-named-space demo-named-space--s2">
		<span class="demo-named-space__name">s2</span>
	</div>

	<div class="demo-named-space demo-named-space--s3">
		<span class="demo-named-space__name">s3</span>
	</div>

	<div class="demo-named-space demo-named-space--s4">
		<span class="demo-named-space__name">s4</span>
	</div>

	<div class="demo-named-space demo-named-space--s6">
		<span class="demo-named-space__name">s6</span>
	</div>

	<div class="demo-named-space demo-named-space--s8">
		<span class="demo-named-space__name">s8</span>
	</div>

	<div class="demo-named-space demo-named-space--m12">
		<span class="demo-named-space__name">m12</span>
	</div>

	<div class="demo-named-space demo-named-space--m16">
		<span class="demo-named-space__name">m16</span>
	</div>

	<div class="demo-named-space demo-named-space--l18">
		<span class="demo-named-space__name">l18</span>
	</div>

	<div class="demo-named-space demo-named-space--l24">
		<span class="demo-named-space__name">l24</span>
	</div>
</div>

Utility Classes

<div class="o-spacing-s1"></div>
<div class="o-spacing-s2"></div>
<div class="o-spacing-s3"></div>
<div class="o-spacing-s4"></div>
<div class="o-spacing-s6"></div>
<div class="o-spacing-s8"></div>
<div class="o-spacing-m12"></div>
<div class="o-spacing-m16"></div>
<div class="o-spacing-l18"></div>
<div class="o-spacing-l24"></div>
Switch component view

GitHub Repository

Install o-spacing

If using the Build Service, add o-spacing@^2.0.0 to your link tag.

If running a Manual Build, run bower install --save "o-spacing@^2.0.0".

Help & Support

o-spacing is maintained directly by the Origami team. If you have any questions about o-spacing or Origami in general, we are happy to help. 😊

Slack: #ft-origami
Email: origami.support@ft.com

Feedback / Issues

To report a bug or request features please create an issue on Github. For support or general feedback please get in touch 😊

Slack: #ft-origami
Email: origami.support@ft.com