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.
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
Wrap in a
Use to put components in columns that are designed to be standalone or stack (e.g multiple ns-highlighers or ns-accordions)
Try to stick to one column as much as possible
Use to create newpaper style columns and layouts
Try to avoid having widowed items
Use multiple columns when the user needs to compare items
Some components (e.g.
ns-cta) have a minimum width, care should be taken so that these components don't overflow the columns.
To see examples visit Storybook
<ns-column basketballcourt="" hockeypitch="" rugbypitch="" polofield=""></ns-column>
Does it live in a panel?
Does it live inside other components?
What layout classes can be used?
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 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.
<ns-column basketballcourt="2" class="splash"></ns-column>
<ns-column hockeypitch="3" class="splish"></ns-column>
<ns-column hockeypitch="2" rugbypitch="4" class="splash"></ns-column>
<ns-column basketballcourt="2" rugbypitch="4" polofield="3" class="splash"></ns-column>
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.
💩 🎉 🦄 You can also contact the team on Slack on the