Spacing

Space content out in a consistent and flexible manner that works for all screen sizes.

Contents

1. Global spacing
2. Sections
3. Asides
4. Overriding spacing

Global spacing

One spacing unit is defined as 16px by default. All margins and paddings are based off this base unit.

A top margin has been applied to some elements within TNA Frontend in order to space them evenly on a page.

The common mixin space-above is used to apply a consistent 2 units (32px) margin to the top of elements such as:

• headings and text (<h1>—<h6> and <p>)
• lists (.tna-ul, .tna-ol and .tna-dl)
• components (.tna-message, .tna-card, tna-tabs, tna-picture)
• component groups (.tna-button-group)

This margin is removed when the element is the first child.

Rationale

Adding margins to the top of elements means we can chose how much of a margin to add based on the element itself. As an example, a <ul> element might need less space above it than a <table> element:

p     { margin-top: 16px; } /* the p is separated from anything above by 16px */
ul    { margin-top: 32px; } /* the ul is separated from anything above by 32px */
table { margin-top: 48px; } /* the table is separated from anything above by 48px */

Headings

On top of the global spacing, headings have an additional top padding which:

• creates more separation between topics
• adds a space above the heading when it is jumped to with an anchor (e.g. above the heading for this section when you use a heading link)

Sections

The .tna-section class applies padding to the top and bottom of an element to space it out enough from surrounding content.

<section class="tna-section">
  <h2 class="tna-heading-l">Section 1</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce consequat semper sagittis. Quisque magna nisl, vulputate a nunc id, efficitur luctus metus. Sed viverra metus sed lacus iaculis, at ultricies quam tristique.</p>
</section>
<hr>
<section class="tna-section">
  <h2 class="tna-heading-l">Section 2</h2>
  <p>Integer ipsum nisl, tempus sed quam vel, ultricies finibus tortor. Vestibulum laoreet sagittis risus at accumsan.</p>
  <p>Curabitur ut varius nulla. Sed nec quam massa. Nulla vitae diam at purus tincidunt convallis sed non neque. Cras condimentum molestie nunc, sed auctor ex iaculis ut.</p>
</section>

Asides

The .tna-aside class can be used to pad out a block of content that acts as an aside to the main article.

It is designed to be used with a background colour.

<aside class="tna-aside tna-background-contrast">
  <h3 class="tna-heading-m">Aside</h3>
  <p>Lorem ipsum</p>
</aside>
<aside class="tna-aside tna-background-tint">
  <h3 class="tna-heading-m">Aside</h3>
  <p>Lorem ipsum</p>
</aside>
<aside class="tna-aside tna-aside--tight tna-background-accent">
  <h3 class="tna-heading-m">Aside</h3>
  <p>Lorem ipsum</p>
</aside>

Overriding spacing

Removing space

property options:

• margin
• padding

direction options:

• top
• bottom
• vertical (top and bottom)

device options (optional):

• large
• medium
• small
• tiny

The format for the spacing removal classes are:

// For all devices
tna-!--no-[property]-[direction]

// For a specific device size
tna-!--no-[property]-[direction]-[device]

Adding space

The property and direction options are the same as removing space.

size options:

The format for the extra spacing override classes is:

tna-!--[property]-[direction]-[size]

<p>Lorem ipsum</p>
<p class="tna-!--no-margin-top">Lorem ipsum (tna-!--no-margin-top)</p>
<p class="tna-!--margin-top-xs">Lorem ipsum (tna-!--margin-top-xs)</p>
<p class="tna-!--margin-top-s">Lorem ipsum (tna-!--margin-top-s)</p>
<p class="tna-!--margin-top-m">Lorem ipsum (tna-!--margin-top-m)</p>
<p class="tna-!--margin-top-l">Lorem ipsum (tna-!--margin-top-l)</p>
<p class="tna-!--margin-top-xl">Lorem ipsum (tna-!--margin-top-xl)</p>
<p class="tna-!--margin-top-xxl">Lorem ipsum (tna-!--margin-top-xxl)</p>