Styleguide
Bleed
A wrapper with a blue background that bleeds out to the left and/or right (depending on modifiers used) of the screen
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim.
Bleed--left
Bleeds background out to the left
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim.
Bleed--right
Bleeds background out to the right
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim.
Breadcrumb
Container
Used to wrap content in a centered container with a max-width.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim.
Container--small
Uses a smaller max-width.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim.
Grid
Wraps items in a grid (split into halves by default).
Headline
Geddit? Head*line*. It's a heading with a line. Requires a "type" to determine whether it's a h1/h2/h3 element tag.
History
Headline--alt
Alternate style with a different font size and line colour
History
Headline--light
Uses a white color & line.
History
Headline--center
Centers headline with a line left and right
History
IconText
An icon and some text. Icon text.
Edwardian
IconText--document
Alternative styles designed for documents
document.pdf
ImageCard
A card with an image, title, body and a link.
SearchBanner
Banner with a background image, link and search bar.
Section
Used to add padding to the top & bottom of content to separate them out into sections.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim.
Section--top
Adds default padding to the top of the section.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim.
Section--bottom
Adds default padding to the bottom of the section.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim.
Section--large-top
Adds large padding to the top of the section.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim.
Section--large-bottom
Adds large padding to the bottom of the section.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim.
Section--small-top
Adds small padding to the top of the section.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim.
Section--small-bottom
Adds small padding to the bottom of the section.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim.
Separator
A line used to separate two pieces of content.
Separator--with-space
Adds 30px padding to the top and bottom of the line.
StickyMenu
A menu consisting of anchor links that sticks to the top of its container. Best used in sidebars. Includes an image that comes into view only when external element '.js-sticky-menu-image-target' exits viewport
Toggle
A show/hide content toggler.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim.