Colours
Grids
Typography
A Mega Heading
Heading 1 example
Heading 2 example
Heading 3 example
Heading 4 example
A subheader example
A subheader two example
Caption example
Vestibulum facilisis quam sit amet ex mattis, ac dignissim erat gravida. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi condimentum nulla in rutrum faucibus. Duis metus tortor, ullamcorper vitae ipsum sed, sagittis luctus quam. Vivamus porttitor id turpis scelerisque ultrices. Proin ornare pellentesque urna sed lacinia. Mauris ultrices ultricies est, eget laoreet nulla venenatis id. Mauris id pharetra lectus, in fermentum libero. Proin sagittis nisl eget tristique dignissim. Mauris vehicula pellentesque eros sit amet auctor. Donec posuere ac nisl eu euismod. Curabitur mattis elit non diam posuere aliquet. Quisque tempor elit arcu.
Mauris ultrices ultricies est, eget laoreet nulla venenatis id. Mauris id pharetra lectus, in fermentum libero. Proin sagittis nisl eget tristique dignissim. Mauris vehicula pellentesque eros sit amet auctor. Donec posuere ac nisl eu euismod. Curabitur mattis elit non diam posuere aliquet. Quisque tempor elit arcu.
- Vestibulum facilisis quam sit amet ex mattis, ac dignissim erat gravida. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
- Vestibulum facilisis quam sit amet ex mattis, ac dignissim erat gravida.
- Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Mauris ultrices ultricies est, eget laoreet nulla venenatis id. Mauris id pharetra lectus, in fermentum libero. Proin sagittis nisl eget tristique dignissim. Mauris vehicula pellentesque eros sit amet auctor. Donec posuere ac nisl eu euismod. Curabitur mattis elit non diam posuere aliquet. Quisque tempor elit arcu.
- Vestibulum facilisis quam sit amet ex mattis, ac dignissim erat gravida. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
- Vestibulum facilisis quam sit amet ex mattis, ac dignissim erat gravida.
- Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Mauris ultrices ultricies est, eget laoreet nulla venenatis id. Mauris id pharetra lectus, in fermentum libero. Proin sagittis nisl eget tristique dignissim. Mauris vehicula pellentesque eros sit amet auctor. Donec posuere ac nisl eu euismod. Curabitur mattis elit non diam posuere aliquet. Quisque tempor elit arcu.
Buttons
Links
Icons
Icons are created as css variables so we can easily change background colours, and load them in with the other styles - thereby avoiding flash of unstyled icons and layout shift.
One limitation of doing things this way though is that we can't have the "vector-effect: non-scaling-stroke" property applied to them, so the stroke will scale proportionally with the size of the icon.
We can add different icons if they are being used at larger sizes though to combat this. But at the moment, I can't see any examples used at larger sizes in the actual designs. So i'm leaving scaled styles for the moment.
Things
Keyword Hover
Tabs
Accordion
Image Ratios
Landscape
Portrait
Image Parallax
