Columns

Container options

Span multiple rows

By default, columns will continue in a single line but this can be overridden to allow columns to wrap onto multiple lines by adding sta-row--multiline modifier to a sta-row container.

Open example in new window

<div class="sta-row sta-row--multiline">
  <div class="sta-col sta-col--one-half">
    <div class="sta-box sta-box--more-emphasis sta-box--padding">Column 1 - half width</div>
  </div>
  <div class="sta-col sta-col--one-half">
    <div class="sta-box sta-box--more-emphasis sta-box--padding">Column 2 - half width</div>
  </div>
  <div class="sta-col sta-col--full">
    <div class="sta-box sta-box--more-emphasis sta-box--padding">Column 3 - full width to wrap on to new line</div>
  </div>
</div>

Gaps between columns and rows

By default, a sta-row container has a negative margin value while the sta-col columns within has a matching positive padding value. This produces a gap between all columns both horizontally, and vertically when wrapping onto multiple lines, in the same way CSS Grid operates.

This can be changed by adding one of the following modifiers to a sta-row container.

• sta-row--gapless removes all horizontal and vertical gaps.
• sta-row--gapless-h removes all horizontal gaps only.
• sta-row--gapless-v removes all vertical gaps only.

Gaps removed

Open example in new window

<div class="sta-row sta-row--gapless sta-row--multiline">
  <div class="sta-col sta-col--one-half">
    <div class="sta-box sta-box--more-emphasis sta-box--padding">Column 1 - no gaps</div>
  </div>
  <div class="sta-col sta-col--one-half">
    <div class="sta-box sta-box--more-emphasis sta-box--padding">Column 2 - no gaps</div>
  </div>
  <div class="sta-col sta-col--full">
    <div class="sta-box sta-box--more-emphasis sta-box--padding">Column 3 - no gaps</div>
  </div>
</div>

Horizontal gaps removed

Open example in new window

<div class="sta-row sta-row--gapless-h sta-row--multiline">
  <div class="sta-col sta-col--one-half">
    <div class="sta-box sta-box--more-emphasis sta-box--padding">Column 1 - no horizontal gaps</div>
  </div>
  <div class="sta-col sta-col--one-half">
    <div class="sta-box sta-box--more-emphasis sta-box--padding">Column 2 - no horizontal gaps</div>
  </div>
  <div class="sta-col sta-col--full">
    <div class="sta-box sta-box--more-emphasis sta-box--padding">Column 3 - no horizontal gaps</div>
  </div>
</div>

Vertical gaps removed

Open example in new window

<div class="sta-row sta-row--gapless-v sta-row--multiline">
  <div class="sta-col sta-col--one-half">
    <div class="sta-box sta-box--more-emphasis sta-box--padding">Column 1 - no vertical gaps</div>
  </div>
  <div class="sta-col sta-col--one-half">
    <div class="sta-box sta-box--more-emphasis sta-box--padding">Column 2 - no vertical gaps</div>
  </div>
  <div class="sta-col sta-col--full">
    <div class="sta-box sta-box--more-emphasis sta-box--padding">Column 3 - no vertical gaps</div>
  </div>
</div>

Vertical alignment

Default alignment is to the top of the row, while the following modifiers can be added to a sta-row container.

• sta-row--align-center to vertically align columns in the centre of the row.
• sta-row--align-bottom to vertically align columns at the bottom of the row.
• sta-row--align-stretch to make all columns the same height as the tallest column.

Vertically aligned centre

Open example in new window

<div class="sta-row sta-row--align-center">
  <div class="sta-col">
    <div class="sta-box sta-box--more-emphasis sta-box--padding">Column 1 - Lorem ipsum dolor sit amet.</div>
  </div>
  <div class="sta-col">
    <div class="sta-box sta-box--more-emphasis sta-box--padding">Column 2 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vitae lorem at mauris pellentesque semper.</div>
  </div>
  <div class="sta-col">
    <div class="sta-box sta-box--more-emphasis sta-box--padding">Column 3 - Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
  </div>
</div>

Vertically aligned bottom

Open example in new window

<div class="sta-row sta-row--align-bottom">
  <div class="sta-col">
    <div class="sta-box sta-box--more-emphasis sta-box--padding">Column 1 - Lorem ipsum dolor sit amet.</div>
  </div>
  <div class="sta-col">
    <div class="sta-box sta-box--more-emphasis sta-box--padding">Column 2 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vitae lorem at mauris pellentesque semper.</div>
  </div>
  <div class="sta-col">
    <div class="sta-box sta-box--more-emphasis sta-box--padding">Column 3 - Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
  </div>
</div>

Vertically aligned stretch

Open example in new window

<div class="sta-row sta-row--align-stretch">
  <div class="sta-col">
    <div class="sta-box sta-box--more-emphasis sta-box--padding" style="height:100%;">Column 1 - Lorem ipsum dolor sit amet.</div>
  </div>
  <div class="sta-col">
    <div class="sta-box sta-box--more-emphasis sta-box--padding" style="height:100%;">Column 2 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vitae lorem at mauris pellentesque semper. </div>
  </div>
  <div class="sta-col">
    <div class="sta-box sta-box--more-emphasis sta-box--padding" style="height:100%;">Column 3 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div>
  </div>
</div>

Column direction

Default placement of columns is left to right, this can be reversed by adding sta-row--reverse modifier to a sta-row container.

Open example in new window

<div class="sta-row sta-row--reverse">
  <div class="sta-col">
    <div class="sta-box sta-box--more-emphasis sta-box--padding">Column 1</div>
  </div>
  <div class="sta-col">
    <div class="sta-box sta-box--more-emphasis sta-box--padding">Column 2</div>
  </div>
  <div class="sta-col">
    <div class="sta-box sta-box--more-emphasis sta-box--padding">Column 3</div>
  </div>
</div>

Column widths

Columns can have their widths specified in two different ways.

Named widths

Add one of the following modifiers to a sta-col element to specify the width in relation to the width of the container.

• sta-col--one-half
• sta-col--one-third
• sta-col--two-thirds
• sta-col--one-quarter
• sta-col--three-quarters
• sta-col--one-fifth
• sta-col--two-fifths
• sta-col--three-fifths
• sta-col--four-fifths

Open example in new window

<div class="sta-row">
  <div class="sta-col sta-col--full">
    <div class="sta-box sta-box--more-emphasis sta-box--padding">Full width</div>
  </div>
</div>

<div class="sta-row">
  <div class="sta-col sta-col--one-half">
    <div class="sta-box sta-box--more-emphasis sta-box--padding">One half</div>
  </div>
  <div class="sta-col">
    <div class="sta-box sta-box--less-emphasis sta-box--padding">Auto</div>
  </div>
</div>

<div class="sta-row">
  <div class="sta-col sta-col--one-third">
    <div class="sta-box sta-box--more-emphasis sta-box--padding">One third</div>
  </div>
  <div class="sta-col">
    <div class="sta-box sta-box--less-emphasis sta-box--padding">Auto</div>
  </div>
</div>

<div class="sta-row">
  <div class="sta-col sta-col--two-thirds">
    <div class="sta-box sta-box--more-emphasis sta-box--padding">Two thirds</div>
  </div>
  <div class="sta-col">
    <div class="sta-box sta-box--less-emphasis sta-box--padding">Auto</div>
  </div>
</div>

<div class="sta-row">
  <div class="sta-col sta-col--one-quarter">
    <div class="sta-box sta-box--more-emphasis sta-box--padding">One quarter</div>
  </div>
  <div class="sta-col">
    <div class="sta-box sta-box--less-emphasis sta-box--padding">Auto</div>
  </div>
</div>

<div class="sta-row">
  <div class="sta-col sta-col--three-quarters">
    <div class="sta-box sta-box--more-emphasis sta-box--padding">Three quarters</div>
  </div>
  <div class="sta-col">
    <div class="sta-box sta-box--less-emphasis sta-box--padding">Auto</div>
  </div>
</div>

<div class="sta-row">
  <div class="sta-col sta-col--one-fifth">
    <div class="sta-box sta-box--more-emphasis sta-box--padding">One fifth</div>
  </div>
  <div class="sta-col">
    <div class="sta-box sta-box--less-emphasis sta-box--padding">Auto</div>
  </div>
</div>

<div class="sta-row">
  <div class="sta-col sta-col--two-fifths">
    <div class="sta-box sta-box--more-emphasis sta-box--padding">Two fifths</div>
  </div>
  <div class="sta-col">
    <div class="sta-box sta-box--less-emphasis sta-box--padding">Auto</div>
  </div>
</div>

<div class="sta-row">
  <div class="sta-col sta-col--three-fifths">
    <div class="sta-box sta-box--more-emphasis sta-box--padding">Three fifths</div>
  </div>
  <div class="sta-col">
    <div class="sta-box sta-box--less-emphasis sta-box--padding">Auto</div>
  </div>
</div>

<div class="sta-row">
  <div class="sta-col sta-col--four-fifths">
    <div class="sta-box sta-box--more-emphasis sta-box--padding">Four fifths</div>
  </div>
  <div class="sta-col">
    <div class="sta-box sta-box--less-emphasis sta-box--padding">Auto</div>
  </div>
</div>

Numbered widths

Alternatively, add one of the following modifiers to `.sta-col` to specify the width in relation to a 12 column grid.

• sta-col--1
• sta-col--2
• sta-col--3
• sta-col--4
• sta-col--5
• sta-col--6
• sta-col--7
• sta-col--8
• sta-col--9
• sta-col--10
• sta-col--11
• sta-col--12

Open example in new window

<div class="sta-row">
  <div class="sta-col sta-col--1">
    <div class="sta-box sta-box--more-emphasis sta-box--padding">1/12</div>
  </div>
  <div class="sta-col">
    <div class="sta-box sta-box--less-emphasis sta-box--padding">Auto</div>
  </div>
</div>

<div class="sta-row">
  <div class="sta-col sta-col--2">
    <div class="sta-box sta-box--more-emphasis sta-box--padding">2/12</div>
  </div>
  <div class="sta-col">
    <div class="sta-box sta-box--less-emphasis sta-box--padding">Auto</div>
  </div>
</div>

<div class="sta-row">
  <div class="sta-col sta-col--3">
    <div class="sta-box sta-box--more-emphasis sta-box--padding">3/12</div>
  </div>
  <div class="sta-col">
    <div class="sta-box sta-box--less-emphasis sta-box--padding">Auto</div>
  </div>
</div>

<div class="sta-row">
  <div class="sta-col sta-col--4">
    <div class="sta-box sta-box--more-emphasis sta-box--padding">4/12</div>
  </div>
  <div class="sta-col">
    <div class="sta-box sta-box--less-emphasis sta-box--padding">Auto</div>
  </div>
</div>

<div class="sta-row">
  <div class="sta-col sta-col--5">
    <div class="sta-box sta-box--more-emphasis sta-box--padding">5/12</div>
  </div>
  <div class="sta-col">
    <div class="sta-box sta-box--less-emphasis sta-box--padding">Auto</div>
  </div>
</div>

<div class="sta-row">
  <div class="sta-col sta-col--6">
    <div class="sta-box sta-box--more-emphasis sta-box--padding">6/12</div>
  </div>
  <div class="sta-col">
    <div class="sta-box sta-box--less-emphasis sta-box--padding">Auto</div>
  </div>
</div>

<div class="sta-row">
  <div class="sta-col sta-col--7">
    <div class="sta-box sta-box--more-emphasis sta-box--padding">7/12</div>
  </div>
  <div class="sta-col">
    <div class="sta-box sta-box--less-emphasis sta-box--padding">Auto</div>
  </div>
</div>

<div class="sta-row">
  <div class="sta-col sta-col--8">
    <div class="sta-box sta-box--more-emphasis sta-box--padding">8/12</div>
  </div>
  <div class="sta-col">
    <div class="sta-box sta-box--less-emphasis sta-box--padding">Auto</div>
  </div>
</div>

<div class="sta-row">
  <div class="sta-col sta-col--9">
    <div class="sta-box sta-box--more-emphasis sta-box--padding">9/12</div>
  </div>
  <div class="sta-col">
    <div class="sta-box sta-box--less-emphasis sta-box--padding">Auto</div>
  </div>
</div>

<div class="sta-row">
  <div class="sta-col sta-col--10">
    <div class="sta-box sta-box--more-emphasis sta-box--padding">10/12</div>
  </div>
  <div class="sta-col">
    <div class="sta-box sta-box--less-emphasis sta-box--padding">Auto</div>
  </div>
</div>

<div class="sta-row">
  <div class="sta-col sta-col--11">
    <div class="sta-box sta-box--more-emphasis sta-box--padding">11/12</div>
  </div>
  <div class="sta-col">
    <div class="sta-box sta-box--less-emphasis sta-box--padding">Auto</div>
  </div>
</div>

Collapsing column width

If a column does not have a specifed width then it will automatically fill any remaining space in the row. If more than one column does not have a specified width then they will share the total free space evenly between them. To override this behaviour and make the column expand only to the maximum width of its content, add the sta-col--collapse modifier to the sta-col element.

Open example in new window

<div class="sta-row">
  <div class="sta-col sta-col--collapse">
    <div class="sta-box sta-box--more-emphasis sta-box--padding">Collapse to match 200px width</div>
  </div>
  <div class="sta-col">
    <div class="sta-box sta-box--less-emphasis sta-box--padding">Auto</div>
  </div>
  <div class="sta-col">
    <div class="sta-box sta-box--less-emphasis sta-box--padding">Auto</div>
  </div>
</div>

Offsetting columns

A column can be offset by either a named width or numbered width, which sets a margin on that column. If the row of columns is left to right then then margin is added to the left, while a reversed row of columns causes the offset margin to be added to the right hand side of columns.

Named width offset

Add one of the modifiers to a sta-col element.

• sta-col--offset-one-half
• sta-col--offset-one-third
• sta-col--offset-two-thirds
• sta-col--offset-one-quarter
• sta-col--offset-two-quarters
• sta-col--offset-one-fifth
• sta-col--offset-two-fifths
• sta-col--offset-three-fifths
• sta-col--offset-four-fifths

Open example in new window

<div class="sta-row">
  <div class="sta-col sta-col--offset-one-half">
    <div class="sta-box sta-box--more-emphasis sta-box--padding">One half offset</div>
  </div>
</div>

<div class="sta-row">
  <div class="sta-col sta-col--offset-one-third">
    <div class="sta-box sta-box--more-emphasis sta-box--padding">One third offset</div>
  </div>
</div>

<div class="sta-row">
  <div class="sta-col sta-col--offset-two-thirds">
    <div class="sta-box sta-box--more-emphasis sta-box--padding">Two thirds offset</div>
  </div>
</div>

<div class="sta-row">
  <div class="sta-col sta-col--offset-one-quarter">
    <div class="sta-box sta-box--more-emphasis sta-box--padding">One quarter offset</div>
  </div>
</div>

<div class="sta-row">
  <div class="sta-col sta-col--offset-three-quarters">
    <div class="sta-box sta-box--more-emphasis sta-box--padding">Three quarters offset</div>
  </div>
</div>

<div class="sta-row">
  <div class="sta-col sta-col--offset-one-fifth">
    <div class="sta-box sta-box--more-emphasis sta-box--padding">One fifth offset</div>
  </div>
</div>

<div class="sta-row">
  <div class="sta-col sta-col--offset-two-fifths">
    <div class="sta-box sta-box--more-emphasis sta-box--padding">Two fifths offset</div>
  </div>
</div>

<div class="sta-row">
  <div class="sta-col sta-col--offset-three-fifths">
    <div class="sta-box sta-box--more-emphasis sta-box--padding">Three fifths offset</div>
  </div>
</div>

<div class="sta-row">
  <div class="sta-col sta-col--offset-four-fifths">
    <div class="sta-box sta-box--more-emphasis sta-box--padding">Four fifths offset</div>
  </div>
</div>

<div class="sta-row sta-row--reverse">
  <div class="sta-col sta-col--offset-one-half">
    <div class="sta-box sta-box--more-emphasis sta-box--padding">One half offset reverse</div>
  </div>
</div>

<div class="sta-row sta-row--reverse">
  <div class="sta-col sta-col--offset-one-third">
    <div class="sta-box sta-box--more-emphasis sta-box--padding">One third offset reverse</div>
  </div>
</div>

<div class="sta-row sta-row--reverse">
  <div class="sta-col sta-col--offset-two-thirds">
    <div class="sta-box sta-box--more-emphasis sta-box--padding">Two thirds offset reverse</div>
  </div>
</div>

<div class="sta-row sta-row--reverse">
  <div class="sta-col sta-col--offset-one-quarter">
    <div class="sta-box sta-box--more-emphasis sta-box--padding">One quarter offset reverse</div>
  </div>
</div>

<div class="sta-row sta-row--reverse">
  <div class="sta-col sta-col--offset-three-quarters">
    <div class="sta-box sta-box--more-emphasis sta-box--padding">Three quarters offset reverse</div>
  </div>
</div>

<div class="sta-row sta-row--reverse">
  <div class="sta-col sta-col--offset-one-fifth">
    <div class="sta-box sta-box--more-emphasis sta-box--padding">One fifth offset reverse</div>
  </div>
</div>

<div class="sta-row sta-row--reverse">
  <div class="sta-col sta-col--offset-two-fifths">
    <div class="sta-box sta-box--more-emphasis sta-box--padding">Two fifths offset reverse</div>
  </div>
</div>

<div class="sta-row sta-row--reverse">
  <div class="sta-col sta-col--offset-three-fifths">
    <div class="sta-box sta-box--more-emphasis sta-box--padding">Three fifths offset reverse</div>
  </div>
</div>

<div class="sta-row sta-row--reverse">
  <div class="sta-col sta-col--offset-four-fifths">
    <div class="sta-box sta-box--more-emphasis sta-box--padding">Four fifths offset reverse</div>
  </div>
</div>

Numbered width offset

A number between 1 and 12 can also be used to define an offset based on a 12 column grid.

For example sta-col--offset-4 would add a margin equal to 4 column widths.

Responsive behaviour

Column layouts can be set to adapt to changes in the width of the browser.

Stacked columns

Default placement of columns is as follows:

• Stacked on mobile.
• Row of columns on sizes larger than mobile (currently 576px).

This placement can be changed by adding the following modifier to a sta-row container.

• sta-row--xs enables columns on any size.
• sta-row--sm enables columns on any size greater than 576px - this is the default behaviour.
• sta-row--md enables columns on any size greater than 768px.
• sta-row--lg enables columns on any size greater than 992px.
• sta-row--xl enables columns on any size greater than 1200px.
• sta-row--xxl enables columns on any size greater than 1400px.

Open example in new window

<p><code>sta-row--xs</code> enables columns on any size.</p>
<div class="sta-row sta-row--xs">
  <div class="sta-col">
    <div class="sta-box sta-box--less-emphasis sta-box--padding">Auto</div>
  </div>
  <div class="sta-col">
    <div class="sta-box sta-box--less-emphasis sta-box--padding">Auto</div>
  </div>
  <div class="sta-col">
    <div class="sta-box sta-box--less-emphasis sta-box--padding">Auto</div>
  </div>
  <div class="sta-col">
    <div class="sta-box sta-box--less-emphasis sta-box--padding">Auto</div>
  </div>
</div>

<p><code>sta-row--sm</code> enables columns on any size greater than 576px - this is the default behaviour.</p>
<div class="sta-row sta-row--sm">
  <div class="sta-col">
    <div class="sta-box sta-box--less-emphasis sta-box--padding">Auto</div>
  </div>
  <div class="sta-col">
    <div class="sta-box sta-box--less-emphasis sta-box--padding">Auto</div>
  </div>
  <div class="sta-col">
    <div class="sta-box sta-box--less-emphasis sta-box--padding">Auto</div>
  </div>
  <div class="sta-col">
    <div class="sta-box sta-box--less-emphasis sta-box--padding">Auto</div>
  </div>
</div>

<p><code>sta-row--md</code> enables columns on any size greater than 768px.</p>
<div class="sta-row sta-row--md">
  <div class="sta-col">
    <div class="sta-box sta-box--less-emphasis sta-box--padding">Auto</div>
  </div>
  <div class="sta-col">
    <div class="sta-box sta-box--less-emphasis sta-box--padding">Auto</div>
  </div>
  <div class="sta-col">
    <div class="sta-box sta-box--less-emphasis sta-box--padding">Auto</div>
  </div>
  <div class="sta-col">
    <div class="sta-box sta-box--less-emphasis sta-box--padding">Auto</div>
  </div>
</div>

<p><code>sta-row--lg</code> enables columns on any size greater than 992px.</p>
<div class="sta-row sta-row--lg">
  <div class="sta-col">
    <div class="sta-box sta-box--less-emphasis sta-box--padding">Auto</div>
  </div>
  <div class="sta-col">
    <div class="sta-box sta-box--less-emphasis sta-box--padding">Auto</div>
  </div>
  <div class="sta-col">
    <div class="sta-box sta-box--less-emphasis sta-box--padding">Auto</div>
  </div>
  <div class="sta-col">
    <div class="sta-box sta-box--less-emphasis sta-box--padding">Auto</div>
  </div>
</div>

<p><code>sta-row--xl</code> enables columns on any size greater than 1200px.</p>
<div class="sta-row sta-row--xl">
  <div class="sta-col">
    <div class="sta-box sta-box--less-emphasis sta-box--padding">Auto</div>
  </div>
  <div class="sta-col">
    <div class="sta-box sta-box--less-emphasis sta-box--padding">Auto</div>
  </div>
  <div class="sta-col">
    <div class="sta-box sta-box--less-emphasis sta-box--padding">Auto</div>
  </div>
  <div class="sta-col">
    <div class="sta-box sta-box--less-emphasis sta-box--padding">Auto</div>
  </div>
</div>

<p><code>sta-row--xxl</code> enables columns on any size greater than 1400px.</p>
<div class="sta-row sta-row--xxl">
  <div class="sta-col">
    <div class="sta-box sta-box--less-emphasis sta-box--padding">Auto</div>
  </div>
  <div class="sta-col">
    <div class="sta-box sta-box--less-emphasis sta-box--padding">Auto</div>
  </div>
  <div class="sta-col">
    <div class="sta-box sta-box--less-emphasis sta-box--padding">Auto</div>
  </div>
  <div class="sta-col">
    <div class="sta-box sta-box--less-emphasis sta-box--padding">Auto</div>
  </div>
</div>

Responsive column widths

Define specific column widths for the various breakpoints by adding a modifier in the format of sta-col--X-Y where X is the size of the column and Y is the breakpoint that the size should apply to.

For example, sta-col--4-md will set the column width to be 4/12 of the width when the browser is at the 'md' breakpoint range (between 768px and 992px).

Open example in new window

<div class="sta-row sta-row--md sta-row--multiline">
  <div class="sta-col sta-col--full-lg sta-col--full-xl sta-col--full-xxl">
    <div class="sta-box sta-box--more-emphasis sta-box--padding">sta-col--full-lg sta-col--full-xl sta-col--full-xxl</div>
  </div>
  <div class="sta-col sta-col--5-md sta-col--3-lg sta-col--6-xl sta-col--7-xxl">
    <div class="sta-box sta-box--more-emphasis sta-box--padding">sta-col--5-md sta-col--3-lg sta-col--6-xl sta-col--7-xxl</div>
  </div>
  <div class="sta-col sta-col--7-md sta-col--9-lg sta-col--6-xl sta-col--5-xxl">
    <div class="sta-box sta-box--more-emphasis sta-box--padding">sta-col--7-md sta-col--9-lg sta-col--6-xl sta-col--5-xxl</div>
  </div>
</div>