Overview

Brings flexibility and control to responsive layouts.

Summarise it!

✨ This is an auto-generated AI summary of the ns-column's documentation. It may not be accurate. ✨

Allows the user interface to split into multiple columns by defining the number of columns required at specific viewports.

Use for arranging components and content, not for gratuitous numerous columns as perhaps seen in a newspaper or magazine.

Examples

Standard

Configure

Auto

Configure

Guidance

Do

• Use the auto attribute when you want your content to take the best available space or with dynamic content.
• Pick the number of columns to complement the content.
• Test the full responsive range of pages and not just the defined viewports.
• Try to stick to one column as much as possible.
• Try to avoid having widowed items.
• Use the ratio options to add side panels.

Don't

• Have complicated column structures – try to simplify content first.
• Use in components that are too small to support multiple components.
• Use to place components in columns that have been designed to be standalone.
• Use to create newspaper-style columns and layouts.
• Use auto for when you want to have ratios.

Implementation

Placement

The ns-column component can be used in the following components:

• <ns-panel>
• <ns-tabs>
• <ns-inputter>

Specification

Attributes

tennis-court

Property

tenniscourt

Description

The number of columns in the display layout for tennis court viewport.

Type

string

Options

1 2

Default

basketball-court

Property

basketballcourt

Description

The number of columns in the display layout for basketball court viewport.

Type

string

Options

1 2

Default

hockey-pitch

Property

hockeypitch

Description

The number of columns in the display layout for hockey pitch viewport. The ratio denotes the ratio of column widths in the specified order.

Type

string

Options

1 2 3 1:2 2:1

Default

football-pitch

Property

footballpitch

Description

The number of columns in the display layout for football pitch viewport. The ratio denotes the ratio of column widths in the specified order.

Type

string

Options

1 2 3 4 1:2 2:1 1:3 3:1 1:4 4:1 2:3 3:2

Default

rugby-pitch

Property

rugbypitch

Description

The number of columns in the display layout for rugby pitch viewport. The ratio denotes the ratio of column widths in the specified order.

Type

string

Options

1 2 3 4 1:2 2:1 1:3 3:1 1:4 4:1 2:3 3:2

Default

polo-field

Property

polofield

Description

The number of columns in the display layout for polo field viewport. The ratio denotes the ratio of column widths in the specified order.

Type

string

Options

1 2 3 4 1:2 2:1 1:3 3:1 1:4 4:1 2:3 3:2

Default

auto

Property

auto

Description

Toggle to automatically adjust the number of columns based on the viewport and content size.

Type

boolean

Default

false

type

Property

type

Type

string

Default

standard

Slots

Slot	Permitted tags	Description
Anonymous slot		The anonymous slot for the content to that needs to be displayed in the specified number of columns in their respective viewports.

Specification notes

How do viewports inherit values?

Each value is applied at that viewpoint and each larger viewport unless the larger viewport has a column value applied.

2 columns

Setting 2 columns for every viewport larger than basketball court.

<ns-column basketball-court="2"></ns-column>

1 to 3 columns

Going from 1 column to 3 columns at a larger viewport.

  <ns-column hockey-pitch="3"></ns-column>

2 viewports

Going from 1 to 2 columns and then 4 columns.

  <ns-column hockey-pitch="2" rugby-pitch="4"></ns-column>

3 viewports

Going from 2 columns, to 4 columns, and back down to 3 columns

  <ns-column basketball-court="2" rugby-pitch="4" polo-field="3"></ns-column>

ratios

Going from 1 columns to 2:1 columns and then 3:1 columns

  <ns-column hockey-pitch="2:1" polo-field="3:1"></ns-column>

How do the 2:1, 3:1 column ratios work?

Ratios are used in order to have different widths for the columns. The ratios can be 1:2, 2:1, 1:3 and 3:1. The first value will be applied to the width of all odd child elements, and the second to all child even elements.

Considering the example of a 2:1 column, it essentially means that all odd child elements have a width of 2 and all even child elements have a width of 1.

The markup would look like:

<ns-column hockey-pitch="2:1">
  <div>This will have width of 2</div>
  <div>This will have width of 1</div>
</ns-column>

Figma

Please note: The ns-column Figma component configuration instructions are available only to members of the British Gas workspace who have access to the Nucleus Figma UI Kit.

Configuration instructions

(Opens in Figma).