Menu
Menu
About
About
Catering
Catering
Team
Team
Blog
Blog
Contact
Contact
Res. Events
Res. Events
Icon Cross

Reserve Your Table

To ensure a seamless experience, reservations for larger groups may require a card on file

Icon
Icon Arrow
Plan a Private event
Plan a Private event
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Style Guide

This style guide page contains styles and components that are to be used throughout a website.

Headings

The different heading styles used throughout the site.

H1

Sample Heading

heading-style-h1

Sample Heading

H2

Sample Heading

heading-style-h2

Sample Heading

H3

Sample Heading

heading-style-h3

Sample Heading

H4

Sample Heading

heading-style-h4

Sample Heading

H5
Sample Heading
heading-style-h5
Sample Heading
H6
Sample Heading
heading-style-h6
Sample Heading

Other HTML Tags

Other HTML tags used throughout the site.

All paragraphs

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.

All links
Text link
All Unordered Lists
  • Sample text is being used as a placeholder for real text that is normally present.
  • Sample text is being used as a placeholder for real text that is normally present.
  • Sample text is being used as a placeholder for real text that is normally present.
All Ordered Lists
  1. Sample text is being used as a placeholder for real text that is normally present.
  2. Sample text is being used as a placeholder for real text that is normally present.
  3. Sample text is being used as a placeholder for real text that is normally present.
All quotes
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website.

Text Size Classes

The different Text size classes used throughout the site.

section-text-large

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.

section-text-medium

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.

text-size-4xlarge

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.

text-size-3xlarge

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.

text-size-xxlarge

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.

text-size-xlarge

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.

text-size-large

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.

text-size-semi-large

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.

text-size-medium

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.

text-size-semi-medium

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.

text-size-normal

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.

text-size-small

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.

text-size-xsmall

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.

text-size-2xsmall

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.

Buttons

The different types of buttons used throughout the website.

Primary Button
catering
catering
Primary Button - Large
catering
catering
Primary Button - Secondary Large
catering
catering
Primary Button - Tertiary
catering
catering
Primary Button - Tertiary Small
catering
catering
Nav Button
catering
catering
Nav Button - Secondary
catering
catering
Nav Button - Tertiary
catering
catering
Nav Button - Booking
catering
catering
Submit Button

Text Links

The different types of Text Links used throughout the website.

Text Link Primary
Sample Text
Sample Text
Footer Nav Link
Home
Home

Colors

The different weights of colors used throughout the website.

Brand Colors

Brand 100
Brand 200
Brand 300
Brand 400
‍




‍
Brand 500

Neutral Colors

Neutral 100
Neutral 200
Neutral 300
Neutral 400
‍




‍
Neutral 500
Neutral 600
Neutral 700
Neutral 800

System Colors

Error
Success
Warning
Empty
‍




‍

Max Widths

The different max-widths used throughout the website.

max-width-2xsmall
max-width-xsmall
max-width-small
max-width-medium
max-width-semi-large
max-width-large
max-width-xlarge
max-width-2xlarge

Containers

The different containers used throughout the website.

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