Revolutions Bars website - UI Kit

Welcome to the UI Kit for the Revolutions Bars website, here we will breakdown every element & components used to create the website.

You'll notice new sections will start with a # before each section title, with subsections identifiable with ##

# Headings # Text & Paragraphs # Buttons # Colours # Cards # Carousels # Forms # Widgets

# Headings

## Sizes

Primary Title

Subtitle

h1 64px/40px

Primary Title

Subtitle

h2 40px/28px

Primary Title

Subtitle

h3 28px/24px

Primary Title

Subtitle

h4 24px/20px

Primary Title

Subtitle

h5 20px/18px

Primary Title

Subtitle

h6 16px/14px

## Subtitles

Primary Title

top left

top left

Primary Title

top center

top center

Primary Title

bottom left

bottom left

Primary Title

bottom center

bottom center

## Alignments

Primary Title Left

top center

Primary Title Centered

top center

Primary Title Right

top center


## Lock ups

Primary Title

bottom center

lockup/afternoon

Primary Title

bottom center

lockup/afterwork

Primary Title

bottom center

lockup/afterdark

## Tiled

Primary Title

bottom center

tile

## Colours

Primary Title

top left

Primary Title

top left

Primary Title

top left

# Paragraphs

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

p, li, a

# Buttons

## Styles

# Colours

black

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

black
coal

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

coal
baeblue

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

baeblue
offwhite

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

offwhite
grey

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

grey
orange

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

orange
green

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

green
pink

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

pink
gradient_afternoon

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

gradient_afternoon
gradient_afterwork

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

gradient_afterwork
gradient_afterdark

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

gradient_afterdark

# Cards

## default

Image

Title goes here

Some quick example text to build on the card title and make up the bulk of the card's content.
Read more...

## photo

## byside

Image

Dish name goes here

Some quick example text to build on the card title and make up the bulk of the card's content.
Book now

# Carousels

## DragScroll

## ClickScroll

## 360Carousel

# Forms

Please enter a valid email address
This is a default inline field messsage.
Please enter a valid email address
This is a default inline field messsage.
Please enter a Name
Please enter a Message
Please select a location
Selected file:

# Widgets

## Facebook

## Popout Location Save (Fixed to right)

Want to save this bar as your local Revolution?

FIND A BAR

Find your nearest Revolution

Loading...

or

USE YOUR LOCATION
Expand

Bars near you: