Style Guide

Furore Studios - Version 1.0

Global headings

H1

Global heading one

Regular heading one

H2

Global heading two

Regular heading two

H3

Global heading tree

Regular heading tree

H4

Global heading four

Regular heading four

H5
Global heading five

Regular heading five

H6
Global heading six

Regular heading six

Overridden heading sizes

.heading--huge

Heading huge

.heading--large

Global heading tree

.heading--medium

Global heading tree

.heading--small

Global heading four

Other html tags

Paragraph

In presentations, you often require 'dummy text' to fill out the places where actual text will go once the money men buy it from some other overpriced consultant. Historically, this dummy text is a block of fake latin boilerplate that begins with 'Lorem Ipsum'. It fills up the space with sentences and paragraphs, but it's been used so long by so many that - like banner ads and tv commercials - people just gloss over it without paying any attention to the contents. Herein lies your opportunity to subvert the timeless standard.

Block quote
Block Quote

Text sizes

.text-size--xxlarge
Fusce arcu ligula, dictum eget velit ac, aliquet fermentum turpis.
.text-size--xlarge
Fusce arcu ligula, dictum eget velit ac, aliquet fermentum turpis.
.text-size--large
Fusce arcu ligula, dictum eget velit ac, aliquet fermentum turpis.
.text-size--medium
Fusce arcu ligula, dictum eget velit ac, aliquet fermentum turpis.
.text-size--small
Fusce arcu ligula, dictum eget velit ac, aliquet fermentum turpis.
.text-size--xsmall
Fusce arcu ligula, dictum eget velit ac, aliquet fermentum turpis.

Text weights

.text-weight--normal
Fusce arcu ligula, dictum eget velit ac, aliquet fermentum turpis.
.text-weight--medium
Fusce arcu ligula, dictum eget velit ac, aliquet fermentum turpis.

Text styles

.text-style--link
.text-style--italic
Fusce arcu ligula, dictum eget velit ac, aliquet fermentum turpis.
.text-style--strikethrough
Fusce arcu ligula, dictum eget velit ac, aliquet fermentum turpis.
.text-style--allcaps
Fusce arcu ligula, dictum eget velit ac, aliquet fermentum turpis.
.text-style--muted
Fusce arcu ligula, dictum eget velit ac, aliquet fermentum turpis.
.text-style--nowrap
This text doesn't wrap

Text colors

.text-color--white
Fusce arcu ligula, dictum eget velit ac, aliquet fermentum turpis.
.text-color--black
Fusce arcu ligula, dictum eget velit ac, aliquet fermentum turpis.
.text-color--light-blue
Fusce arcu ligula, dictum eget velit ac, aliquet fermentum turpis.

Text alignment

.text-align--left
Fusce arcu ligula, dictum eget velit ac, aliquet fermentum turpis.
.text-align--center
Fusce arcu ligula, dictum eget velit ac, aliquet fermentum turpis.
.text-align--right
Fusce arcu ligula, dictum eget velit ac, aliquet fermentum turpis.

Rich text styling

These elements are styled separately when nested under the class  .text--rich-text

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
This is a block quote

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

This is a link inside of a rich text element

  • List item 1
  • List item 2
  • List item 3
  1. Ordered list item 1
  2. Ordered list item 2
  3. Ordered list item 3
This is an image caption

Background color classes

These color classes can be applied to an element to change it's background color

.background--navy
.background--white
.background--light-blue
.background--pastel-blue

Item opacity

.opacity--10
.opacity--20
.opacity--30
.opacity--40
.opacity--50
.opacity--60
.opacity--70
.opacity--80
.opacity--90

Form elements

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Containers

.container--large
.container--medium
.container--small
.container--xsmall

Max widths

max-width--xxsmall
.max-width--xsmall
.max-width--small
.max-width--medium
.max-width--large
.max-width--xlarge
.max-width--xxlarge

Margin

.margin--0
.margin--tiny
.margin--xxsmall
.margin--xsmall
.margin--small
.margin--medium
.margin--large
.margin--xlarge
.margin--xxlarge
.margin--huge
.margin--xhuge
.margin--xxhuge
.margin--custom1
.margin--custom2
.margin--custom3

Padding

.padding--0
.padding--tiny
.padding--xxsmall
.padding--xsmall
.padding--small
.padding--medium
.padding--large
.padding--xlarge
.padding--xxlarge
.padding--huge
.padding--xhuge
.padding--xxhuge
.padding--custom1
.padding--custom2
.padding--custom3