Site Style Guide - Do Not Delete
CLOSE

Visit Graceland

Plan your ultimate trip to Graceland with our Plan Your Visit tool. View tours, options, and much more in order to create an experience fit for the King himself!

Make Plans Now

CLOSE

Ticket Info

Ultimate VIP Tour

Starts at $174.00

Elvis Entourage VIP Tour

Starts at $99.00

ELVIS Experience Tour

Starts at $61.00

Graceland Mansion Only Tour

Starts at $41.00

Buy Tickets Now
Explore Ticket Options

CLOSE

MAP & DIRECTIONS

Graceland Parking

3717 Elvis Presley Blvd.
Memphis, TN 38116
Only 10 minutes from downtown and 3 minutes from the Memphis Airport.

The Guest House at Graceland

3600 Elvis Presley Blvd.
Memphis, TN 38116

See a Graceland property map
CLOSE

Hours

Daily:  9:00 a.m. to 4:00 p.m.

 

Free walk-ups to the Meditation Garden are daily from 7:30 - 8:30 a.m.

 

 

CLOSE

SEARCH GRACELAND

Enter your search term and press enter.
Helpful Links

Site Style Guide - Do Not Delete

Image Sizing
Banner Image Recommended Size 1500px x 600px

For use in the hero area of the page. Images can be taller but will only show the middle 400px portion of the image.

Header One Styling
HTML CODE <h1>Header One Tag</h1>
OUTPUT

Heading One

This is a test paragraph. To add some length to it, let us mention that this page was primarily written for testing the effect of user style sheets. You can use it for various other purposes as well, like just checking how your browser displays various HTML elements.

Header Two Styling
HTML CODE <h2>Header Two Tag</h2>
OUTPUT

Heading Two

This is a test paragraph. To add some length to it, let us mention that this page was primarily written for testing the effect of user style sheets. You can use it for various other purposes as well, like just checking how your browser displays various HTML elements.

Header Three Styling
HTML CODE <h3>Header Three Tag</h3>
OUTPUT

Heading Three

This is a test paragraph. To add some length to it, let us mention that this page was primarily written for testing the effect of user style sheets. You can use it for various other purposes as well, like just checking how your browser displays various HTML elements.

Header Four Styling
HTML CODE <h4>Header Four Tag</h4>
OUTPUT

Heading Four

This is a test paragraph. To add some length to it, let us mention that this page was primarily written for testing the effect of user style sheets. You can use it for various other purposes as well, like just checking how your browser displays various HTML elements.

Header Five Styling
HTML CODE <h5>Header Five Tag</h5>
OUTPUT
Heading Five

This is a test paragraph. To add some length to it, let us mention that this page was primarily written for testing the effect of user style sheets. You can use it for various other purposes as well, like just checking how your browser displays various HTML elements.

Header Six Styling
HTML CODE <h6>Header Six Tag</h6>
OUTPUT
Heading Six

This is a test paragraph. To add some length to it, let us mention that this page was primarily written for testing the effect of user style sheets. You can use it for various other purposes as well, like just checking how your browser displays various HTML elements.

Paragraph Styling
HTML CODE <p>Paragraph Tag</p>
OUTPUT

This is a test paragraph. To add some length to it, let us mention that this page was primarily written for testing the effect of user style sheets. You can use it for various other purposes as well, like just checking how your browser displays various HTML elements.

This is a paragraph that contains some inline styles. To add some length to it, let us mention that this page was primarily written for testing the effect of user style sheets. You can use it for various other purposes as well, like just checking how your browser displays various HTML elements.

Additional Text Styling
HTML CODE

<strong>Bold Text</strong>
<u>Underline Text</u>
<em>Italic Text</em>

OUTPUT

Bold Text
Underline Text
Italic Text

Button and Link Styles
HTML CODE <a class="btn" href="">Button</a>
<a class="link" href="">Text Link</a>
OUTPUT Button
Text Link
Icon System
HTML CODE <span class="icon-mail"></span>
OUTPUT
AVAILABLE ICONS

icon-airplane

icon-attachment

icon-bed

icon-book

icon-books

icon-bookmark

icon-bubble

icon-bullhorn

icon-camera

icon-check

icon-calendar

icon-clipboard

icon-clock

icon-film

icon-flag

icon-gift

icon-graceland

icon-headphones

icon-hotel

icon-library

icon-lock

icon-location2

icon-map

icon-mug

icon-music

icon-newspaper

icon-quotes-right

icon-phone

icon-power

icon-pushpin

icon-ticket

icon-search

icon-spoon-knife

icon-star-empty

icon-star-full

icon-tag

icon-trophy

icon-tv

icon-video-camera

icon-facebook

icon-twitter

icon-google

icon-instagram

icon-youtube

icon-tripadvisor

icon-chevron-up

icon-chevron-down

icon-chevron-left

icon-chevron-right

icon-caret-down

icon-x
Brand Colors
AVAILABLE COLORS
blue - Hex: #293569
light-blue - Hex: #4D6299
gold - Hex: #D88E18
red - Hex: #F53510
COLOR USAGE IN TEXT <h4 class="light-blue">LIGHT BLUE TEXT</h4>

LIGHT BLUE TEXT

<h5 class="blue">BLUE TEXT</h5>
BLUE TEXT
<h5 class="gold">GOLD TEXT</h5>
GOLD TEXT
COLOR USAGE IN DIVS

Add a background color to your div by adding a class to your custom content.
Syntax: bg-[ color of choice ]

<div class="bg-gold">bg-gold</div>
bg-gold

NOTE: When using dark backgrounds, you can make your text white by adding the class invert to your custom content.

<div class="bg-blue invert">bg-blue invert</div>
bg-blue invert
Artifacts
AVAILABLE ARTIFACTS
<div class="belt"></div>
<div class="sunglasses"></div>
<div class="ring"></div>
<div class="watch"></div>
<div class="record"></div>
<div class="guitarpick"></div>
<div class="grammy"></div>
AVAILABLE LOCATIONS
<div class="ring left"></div>
<div class="belt center"></div>
<div class="record right"></div>
Grid System
HTML CODE  <div class="w-30">...</div>
 <div class="w-70">...</div>
 <div class="w-100">...</div>
OUTPUT
FULL GRID
w-10
w-10
w-10
w-10
w-10
w-10
w-10
w-10
w-10
w-10
w-20
w-20
w-20
w-20
w-20
w-third
w-third
w-third
w-third
w-two-thirds
w-10
w-90
w-20
w-80
w-25
w-75
w-30
w-70
w-40
w-60
w-50
w-50
w-100
Padding System
PADDING ALL

These show uniform padding around the content.
Definition: pa[ ] = padding all [amount of padding]

HTML CODE <div class="pa1">[Content Here]</div>
<div class="pa2">[Content Here]</div>
<div class="pa3">[Content Here]</div>
<div class="pa4">[Content Here]</div>
<div class="pa5">[Content Here]</div>
OUTPUT
pa1
pa2
pa3
pa4
pa5
PADDING VERTICAL

These show vertical padding above and below the content.
Definition: pv[ ] = padding vertical [amount of padding]

HTML CODE <div class="pv1">[Content Here]</div>
<div class="pv2">[Content Here]</div>
<div class="pv3">[Content Here]</div>
<div class="pv4">[Content Here]</div>
<div class="pv5">[Content Here]</div>
OUTPUT
pv1
pv2
pv3
pv4
pv5
PADDING HORIZONTAL

These show horizontal padding to the left and right of the content.
Definition: ph[ ] = padding horizontal [amount of padding]

HTML CODE <div class="ph1">[Content Here]</div>
<div class="ph2">[Content Here]</div>
<div class="ph3">[Content Here]</div>
<div class="ph4">[Content Here]</div>
<div class="ph5">[Content Here]</div>
OUTPUT
ph1
ph2
ph3
ph4
ph5
ADDITIONAL PADDING LOCATIONS

These show the top, right, bottom, left padding options. The different padding scales shown above also apply to these.

Definitions:
pt[ ] = padding top [amount of padding]
pr[ ] = padding right [amount of padding]
pb[ ] = padding bottom [amount of padding]
pl[ ] = padding left [amount of padding]

EXAMPLES
pt4
pr4
pb4
pl4
RESPONSIVE DESIGN

Here are the available options to make the GRID and PADDING responsive to different devices.

Definitions:
[w-50 or pa4]-ns = the settings in the bracket will only apply to NOT-SMALL screens (tablet and desktop size)
[w-50 or pa4]-m = the settings in the bracket will only apply to MEDIUM screens (tablet size)
[w-50 or pa4]-l = the settings in the bracket will only apply to LARGE screens (desktop sizes)

HTML CODE <div class="w-third-l w-50-m w-100">[Content Here]</div>
OUTPUT ON DESKTOP
w-third-l w-50-m w-100
OUTPUT ON MOBILE
w-third-l w-50-m w-100
OUTPUT ON TABLET
w-third-l w-50-m w-100
Page Part Settings

So where do I add all these classes anyway?

I'm glad you asked! The grid sizes, padding, and background colors will need to be added to the Class Field for that particular custom content.

1. CLICK THE GEAR
2. ADD YOUR CLASSES
Layout Examples

To the right, you will find the overview of your default template.

Below you will find examples of how you can organize the content on your page.

OVERALL LAYOUT GUIDE

Heading Level Three

This is a test paragraph. To add some length to it, let us mention that this page was primarily written for testing the effect of user style sheets. You can use it for various other purposes as well, like just checking how your browser displays various HTML elements.

CLASSES USED TO CREATE THIS LAYOUT  <div class="w-50-ns w-100 pa4 bg-light-gray">...</div>

Heading Level Four

This is a test paragraph. To add some length to it, let us mention that this page was primarily written for testing the effect of user style sheets. You can use it for various other purposes as well, like just checking how your browser displays various HTML elements.

CLASSES USED TO CREATE THIS LAYOUT  <div class="w-50-ns w-100 pa4 bg-blue invert">...</div>
Heading Level Five

This is a test paragraph. To add some length to it, let us mention that this page was primarily written for testing the effect of user style sheets. You can use it for various other purposes as well, like just checking how your browser displays various HTML elements.

CLASSES USED TO CREATE THIS LAYOUT  <div class="w-50-ns w-100 pa4">...</div>
CLASSES USED TO CREATE THIS LAYOUT  <div class="w-50-ns w-100 pa4 bg-image-js">...</div>
Buy Tickets