Colors
#260859
#c2cd23
#ebebeb
Typography
Fonts
Montserrat is used throughout the site for headings and body copy.Headings
Primary heading ("Heading 1")
Secondary heading ("Heading 2")
Tertiary heading ("Heading 3")
Paragraph text. Cookie jelly beans wafer gummi bears chocolate cheesecake liquorice. Caramels sesame snaps topping sweet roll toffee tiramisu gummi bears. Caramels cake jelly-o. Second paragraph to demonstrate inter-paragraph spacing. Icing chocolate cake pie jelly-o. Chocolate bar cookie sweet roll jelly beans. Caramels. Cotton candy powder jujubes bonbon marshmallow jelly candy canes.Lists
Unordered list
- Ice cream bonbon.
- Marzipan gummies.
- Fruitcake chocolate bar bonbon.
- Donut soufflé icing dessert carrot cake lollipop fruitcake jelly beans.
- Candy canes gummies bonbon cupcake cookie chupa chups.
- Bear claw cake fruitcake tart pudding.
Ordered list
- Marzipan marzipan.
- Pudding candy pastry lollipop cheesecake bear claw.
- Cake cheesecake pudding croissant.
- Pudding cupcake tart gummies tootsie roll danish.
- Icing chocolate cake pie jelly-o.
- Chocolate bar cookie sweet roll jelly beans.
- Caramels.
- Cotton candy powder jujubes bonbon marshmallow jelly candy canes.
- Sweet croissant sugar plum pie jujubes chupa chups wafer. Carrot cake biscuit bonbon.
Blockquotes
Cookie jelly beans wafer gummi bears cheesecake liquorice. Caramels sesame snaps topping sweet roll toffee tiramisu gummi bears. Caramels cake jelly-o.
Links
A standard link. A link within a sentence. A visited link.UI components
Buttons
For use in the text/HTML editor
<a class="button" href="#">Read more</a>Read more
<a class="button giant" href="#">Read more</a>Read more
For use in the visual editor
Basic usage
[button url="https://example.com" text="Read more"]
Force it to open in a new tab/window
[button url="https://example.com" text="Read more" new-window="true"]
Add extra classes
[button url="https://example.com" text="Read more" class="additional-class-name another-additional-class-name"]
Forms
Layout classes
Utility CSS classes
- center
- Centers block-level elements with fixed widths.
- clear
- Makes element automatically clear its child elements, so you don't need to add additional markup. The clearfix is a way to combat the zero-height container problem for floated elements.
- invert
- Makes the content white; this is a useful class to apply to a row with a dark background.