Spacing

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

Contents

• Global spacing
• Sections
• Asides
• 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 */

An element shouldn’t apply a bottom margin unless its next sibling element is known.

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>