Button smallButton Button large
Arrow Button Arrow Button large
Show more button Load more button Login button Register button
This is a leader paragraph (used in hero and page paragraph intros)
This is a small leader paragraph (used in certain panels, as a slightly smaller variant)
For content where you need vertical rhythm and spacing between items (like articles etc) we use the class .flow on the parent element.
By default the margins between the elements are 1.5rem (24px).
If we want larger margins between items we can just add some extra classes to the .flow class. The parent element here uses .flow-spacing-700
We use a minimal grid system throughout the site for signposts and anything that has columns in a horizontal row (.columns). There is a flexbox version and a CSS grid version.
You can change the spacing between the columns by using utility classes on the parent ( .spacing-sm, .spacing-lg, .spacing-xl )
The difference is the flexbox grid does not wrap columns. The columns are always next to each other, and they will just shrink to fit depending in how many you have.
When the page goes below 900px width the columns will all stack so they lay out vertically for mobile/tablet portrait.
If you want the grid to be multi-line then you should use .grid instead
There are utility classes available to change column widths just as you'd find in a more fleshed out framework, but it was never our intention to provide a large framework like a Boostrap or Tailwind, so for simplicity the columns all break down to single columns under 900px. There are no multi-breakpoint utility classes. It was built to be minimal and serve the purpose of laying out the NEC site, not having lots of code for layouts we did not need.
What you might also notice here is the .col-6 below isn't quite the same width as the combined width of the other two .col-3 divs next to it, which you might expect. This is simply because we use margins for our spacing (instead of padding you often see on grid systems which then need negative margins on parent to pull the edges back out) we let flexbox size them itself. But if you are wanting to build equal columns anyway then you don't need any column classes and can let the default layout equally size them.
.col-6.
.col-3
.col-3
The grid system .grid is what should be used for columns which you expect to be multi-row.
By default this system auto-fits around 3 columns of content per row.
The columns will automatically change to 2 columns, then 1 column based on their minimum widths. So again it gives less full control, but is much simpler and more minimal than a complex framework which we wanted to avoid.
Much like the Flexbox system you can use utility classes to change the grid spacing, but it does not have fixed column classes by default.
1
2
3
4
5
6
They go up in weights of 100, up to 700. You have a .padding-section class which applies a large top and bottom padding to page sections (4rem on mobile, 5.5rem on tablet+. This can be changed in _padding.scss partial file).
You can get more granular with padding by applying it to whatever sides you want, for example .padding-left-300 will apply 1rem of padding to the left of your element. If you add .padding-bottom-700 it will apply a bottom padding of 3rem to your element. You get the idea.
With regards to the number use (100-700) these are just arbitrary increments to represent a higher padding amount. We do this so we can change their values in the CSS at any time and you'll still have a good idea that a high number will be higher padding etc.
Just to note these classes also all work with margin. So to add margin top and bottom to an element you can add .margin-y-700 to it.
.bg-black .padding-y-700
.bg-white .padding-y-600
.bg-blue .padding-y-500
.bg-blue-2 .padding-y-400
.bg-blue-3 .padding-y-300
.bg-blue-4 .padding-y-300
.bg-grey .padding-y-300
.bg-grey-2 .padding-y-300
.bg-grey-3 .padding-y-300
.bg-grey-4 .padding-y-300
.bg-grey-5 .padding-y-300
.bg-grey-6 .padding-y-300
.bg-brand-orange .padding-y-300
.bg-brand-blue .padding-y-300
.bg-brand-green .padding-y-300
.text-black .padding-y-300
.text-blue .padding-y-300
.text-blue-2 .padding-y-300
.text-grey .padding-y-300
.text-grey-2 .padding-y-300
.text-grey-3 .padding-y-300
.text-grey-4 .padding-y-300
These will not work in IE, they will simply show all content as though the toggle boxes didn't exist. I think that's fine. Progressive enhancement. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Delectus amet consequatur inventore ducimus corrupti quasi similique magni quia laudantium incidunt velit, dolorum, facere accusamus deserunt. Consectetur voluptates optio tenetur accusamus asperiores, dolor quos iusto voluptatem consequatur inventore id doloremque architecto quo a nisi incidunt repellendus, provident placeat reiciendis omnis quisquam.
These will not work in IE, they will simply show all content as though the toggle boxes didn't exist. I think that's fine. Progressive enhancement. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Delectus amet consequatur inventore ducimus corrupti quasi similique magni quia laudantium incidunt velit, dolorum, facere accusamus deserunt. Consectetur voluptates optio tenetur accusamus asperiores, dolor quos iusto voluptatem consequatur inventore id doloremque architecto quo a nisi incidunt repellendus, provident placeat reiciendis omnis quisquam.
These will not work in IE, they will simply show all content as though the toggle boxes didn't exist. I think that's fine. Progressive enhancement. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Delectus amet consequatur inventore ducimus corrupti quasi similique magni quia laudantium incidunt velit, dolorum, facere accusamus deserunt. Consectetur voluptates optio tenetur accusamus asperiores, dolor quos iusto voluptatem consequatur inventore id doloremque architecto quo a nisi incidunt repellendus, provident placeat reiciendis omnis quisquam.
Tab 1 example. These are simple and accessible tabs. Can be styled pretty easily.
Tab 2 example. These are simple and accessible tabs. Can be styled pretty easily.
Tab 3 example. These are simple and accessible tabs. Can be styled pretty easily.
Tab 4 example. These are simple and accessible tabs. Can be styled pretty easily.
Tab 5 example. These are simple and accessible tabs. Can be styled pretty easily.
Tab 6 example. These are simple and accessible tabs. Can be styled pretty easily.
Tab 7 example. These are simple and accessible tabs. Can be styled pretty easily.
Tab 1 example. These are simple and accessible tabs. Can be styled pretty easily.
Tab 2 example. These are simple and accessible tabs. Can be styled pretty easily.
Tab 3 example. These are simple and accessible tabs. Can be styled pretty easily.
Tab 4 example. These are simple and accessible tabs. Can be styled pretty easily.
Tab 5 example. These are simple and accessible tabs. Can be styled pretty easily.
Tab 6 example. These are simple and accessible tabs. Can be styled pretty easily.
Tab 7 example. These are simple and accessible tabs. Can be styled pretty easily.