Images
Icons
abcdefghijklmnopgrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopgrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
section element sets default horizontal padding (24px) used in row/column layouts at all breakpoints.
sections, rows and columns are all position relative. Overflow is visible to allow use of position:sticky, use class hide-over-(md|sm|xs) where required to over-ride this
row has align:top by default to allow for position:sticky, use .row-vcentre to over-ride in special cases
.to-edge-(t|r|b|l|all) styling sets appropriate padding to 0 for special cases
Columns are 100% width and include default padding of 36px, 24px with overflow hidden.
Background styling can be set on row or individual column element and carries through at all breakpoints
Wrapping row element includes -ve margin to match default horizontal padding set in section. Uses display:flex with no-wrap and vertical fill; at small screen switch to wrap.
Content here
Content here
.to-edge-(t|r|b|l|all) styling sets appropriate padding to 0 for special cases: use on section or column (not row)