The reason you don't see all pages is because these were built using old serverside includes code, which we now don't use. So I'm manually creating full pages whenever we need to change something. In future we should look at moving this in to Astro.
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
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-teal .padding-y-500
.bg-teal-2 .padding-y-500
.bg-teal-3 .padding-y-500
.bg-blue .padding-y-500
.bg-blue-2 .padding-y-400
.bg-blue-3 .padding-y-300
.bg-grey .padding-y-300
.bg-grey-2 .padding-y-300
.bg-grey-3 .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
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.
