Brings flexibility and control to responsive layouts.
Allows the user interface to be split into multiple columns by defining the number of columns required at specific viewports.
Note: This is used for arranging components and content not multiple columns like you would see in a newspaper or magazine.
|💚 Do's||💔 Don'ts|
|Pick the number of columns to complement the content||Have complicated column structures, try to simplify your content first|
|Test the full responsive range of your page's and not just the defined viewports||Use in components that are too small to support multiple components|
|Try to stick to one column as much as possible||Use to put components in columns that are designed to be standalone or stack (e.g multiple ns-highlighers or ns-accordions)|
|Try to avoid having widowed items||Use to create newspaper style columns and layouts|
|Use multiple columns when the user needs to compare items|
|Use the ratio options to add side panels|
|When using ratios put the primary page content in the largest column|
Some components (e.g.
ns-cta) have a minimum width, care should be taken so that these components don't overflow the columns.
The ns-column component can be used in the following components:
Note: only used in ns-inputter to control the layout of ns-selector
|The number of columns to show at the Basketball Court viewport|
|The number of columns to show at the Hockey Pitch viewport|
|The number of columns to show at the Football Pitch viewport|
|The number of columns to show at the Rugby Pitch viewport|
|The number of columns to show at the Polo Field viewport|
Each value is applied at that viewpoint and each larger viewport unless the larger viewport has a column value applied.
If you want to have width ratios that make for a different width for your columns, you can set the value to 1:2, 2:1, 1:3, and 3:1. The first value will apply to the width of all odd child elements, and the second to all child even elements.
If we take 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.
This is how your markup would look like:
- Do you have insights or concerns to share? You can raise an issue via Github bugs.
- See all the issues already raised via Github issues.
💩 🎉 🦄 If you have any questions, contact us on Microsoft Teams in the Nucleus Design System channels.