Cheatsheet
.containerIf something is outside of a nunucks component, the container class will apply basic layout and max-width.
Multi column elements will make every 'child html tag' into a column, and fit what it can. These elements will also use as much real-estate as possible, breaking outside of the text containers.
These classes make the columns conform to a width between the number in the name, and -100px. So .multi-column--min-400 maintains a width between 400-300px.
.multi-column--200-wide.multi-column--300-wide.multi-column--400-wide.multi-column--500-wide.multi-column--600-wideThese classes will try to make as many columns as there are 'children html tags' until it hits the minimum width hinted in the class.
.multi-column--min-200-wideWith 2 Columns
With 7 Columns
.multi-column--min-300-wideWith 2 Columns
With 7 Columns
.multi-column--min-400-wideWith 2 Columns
With 7 Columns
.multi-column--min-500-wideWith 2 Columns
With 7 Columns
.multi-column--min-600-wideWith 2 Columns
With 7 Columns
These classes allow margin-top or margin-bottom, and come in units of 8px. So adding the class margin-bottom--1 is margin-bottom: 8px, 2 is 16px, etc.
.margin-bottom--1.margin-bottom--2.margin-bottom--3.margin-bottom--4.margin-bottom--5.margin-bottom--6Sections should wrap parts of content that have a headline. It enforces rules for basic page layout and line-lengths.
{% section headline='Headline goes here' %}
HTML for whatever goes in this section
{%- endsection %}By default headlines have an h2 tag, to change it with the headingLevel flag
{% section headline="Headline goes here",
headingLevel="3"
%}
HTML for whatever goes in this section
{%- endsection %}This is a nunjucks component we can use to wrap example images or live component examples
{% example palette='lightest' %}
Component or Image
{%- endsection %}
