Column

Overview

Brings flexibility and control to responsive layouts.

✨ 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.

Configure

Guidance

Implementation

Placement

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

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.

Setting 2 columns for every viewport larger than basketball court.

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

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

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

Going from 1 to 2 columns and then 4 columns.

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

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>

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).

Last updated: Oct 28, 2024