HEADING 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

General Body Copy

Maecenas pulvinar ut velit vel tristique. Phasellus lacinia felis neque, sed bibendum felis lacinia nec. Suspendisse consequat lorem nisi, lacinia tincidunt eros efficitur eu. Etiam vel diam lectus. Nullam nec turpis in justo faucibus pellentesque in non sem. Pellentesque urna enim, hendrerit sed varius non, volutpat sed leo. Morbi aliquam velit at quam bibendum iaculis vel et purus. Nulla placerat nibh turpis, a maximus libero ullamcorper fermentum. Vivamus ut venenatis mauris. Nam lacinia eleifend dui vitae varius. Suspendisse gravida urna quis elit aliquet aliquam. Nulla pellentesque odio in urna egestas tempor. Donec ut semper lacus, a sagittis tellus.

Nulla facilisi. Phasellus neque dui, finibus ac libero et, molestie suscipit urna. Vivamus auctor tristique risus, ut eleifend urna aliquet sit amet. Praesent ultricies vestibulum justo, pretium dictum mi mollis in. Sed lectus metus, mattis in ullamcorper sit amet, vehicula et sapien. Mauris id nunc ornare, sollicitudin felis ut, rhoncus lectus. Curabitur vulputate mi a arcu fermentum, vitae pulvinar risus elementum.

Duis ut viverra nisl. Morbi sagittis tincidunt finibus. Vestibulum scelerisque luctus diam, eu dictum erat posuere nec. Vivamus non leo gravida, pharetra purus in, porta odio. Proin non dictum nulla, vitae finibus tortor. Maecenas ultricies eros sapien, dictum convallis quam consectetur sit amet. Pellentesque lacus velit, ullamcorper quis lectus eu, aliquam cursus purus. Donec pharetra sem lorem, ac luctus nulla eleifend non.

Color Classes

The site uses a number of classes that are useful for changing background colors, foreground colors, hover colors, etc. You can use these class names in the "Button" shortcode with the "class=xx" attribute, or anywhere you need to input custom HTML. The general format of all of these class names is as follows:

[colorcode][hover (optional)]

Color 1, Color 2, Black, White, and other colors are all controlled via Settings -> Theme Options -> Colors.

Foreground Colors

fg-c1 Change the foreground of the element to Color 1
fg-c2 Change the foreground of the element to Color 2
fg-body Change the foreground of the element to the Body Color
fg-white Change the foreground of the element to the theme White color
fg-black Change the foreground of the element to the theme Black color

Foreground Colors - Hover

fg-c1-hover Change the foreground of the element to Color 1 on hover
fg-c2-hover Change the foreground of the element to Color 2 on hover
fg-body-hover Change the foreground of the element to Theme Body Color on hover
fg-white-hover Change the foreground of the element to Theme White Color on hover
fg-black-hover Change the foreground of the element to Theme Black Color on hover

Background Colors

bg-c1 Change the background of the element to Color 1
bg-c2 Change the background of the element to Color 2
bg-body Change the background of the element to Body Color
bg-white Change the background of the element to Theme White
bg-black Change the background of the element to Theme Black

Background Color and Opacities

bg-c1-opacity Change the background of the element to Color 1, partially transparent
bg-c2-opacity Change the background of the element to Color 2, partially transparent
bg-white-opacity Change the background of the element to Theme White, partially transparent
bg-black-opacity Change the background of the element to Theme Black, partially transparent

Background Color and Opacities - Hover

bg-c1-opacity-hover Change the background of the element to Color 1, partially transparent on hover
bg-c2-opacity-hover Change the background of the element to Color 2, partially transparent on hover
bg-white-opacity-hover Change the background of the element to Theme White, partially transparent on hover
bg-black-opacity-hover Change the background of the element to Theme Black, partially transparent on hover

Background Colors - Hover

bg-c1-hover Change the background of the element to Color 1 on hover
bg-c2-hover Change the background of the element to Color 2 on hover
bg-white-hover Change the background of the element to Theme White on hover
bg-black-hover Change the background of the element to Theme White on hover

Border Colors

border-c1 Add a border to the element with color set to Color 1
border-c2 Add a border to the element with color set to Color 2
border-white Add a border to the element with color set to Theme White
border-black Add a border to the element with color set to Theme Black

Single Borders

border-top-c1 Add a border to the element with color set to Color 1 at the top
border-top-c2 Add a border to the element with color set to Color 2 at the top
border-top-white Add a border to the element with color set to Theme White at the top
border-top-black Add a border to the element with color set to Theme Black at the top

border-left-c1 Add a border to the element with color set to Color 1 at the left
border-left-c2 Add a border to the element with color set to Color 2 at the left
border-left-white Add a border to the element with color set to Theme White at the left
border-left-black Add a border to the element with color set to Theme Black at the left

border-right-c1 Add a border to the element with color set to Color 1 at the right
border-right-c2 Add a border to the element with color set to Color 2 at the right
border-right-white Add a border to the element with color set to Theme White at the right
border-right-black Add a border to the element with color set to Theme Black at the right

border-bottom-c1 Add a border to the element with color set to Color 1 at the bottom
border-bottom-c2 Add a border to the element with color set to Color 2 at the bottom
border-bottom-white Add a border to the element with color set to Theme White at the bottom
border-bottom-black Add a border to the element with color set to Theme Black at the bottom

Border Colors: hover

border-c1-hover Add a border to the element with color set to Color 1 when hovered over
border-c2-hover Add a border to the element with color set to Color 2 when hovered over
border-white-hover Add a border to the element with color set to Theme White when hovered over
border-black-hover Add a border to the element with color set to Theme Black when hovered over

CTAs are now Gutenberg blocks, able to be added to any Gutenberg editor slot. Search for "CTA" or "GCom" and choose the relevant options.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Bold Italics Bold-Italics

Bulleted list 1
Bulleted list 2
Bulleted list 3

Numbered list 1
Numbered list 2
Numbered list 3

This is a block quote.

Jobs Individual Post(s)

This block allows you to pick any published Job and display it on the page as shown. This could be helpful for a blog post announcing the job, or one that highlights a given area of expertise. For instance, if we published a post about Premium Insights and we had an opening for a Google-certified search specialist, you could include the posting in the post itself.

CTAs / Buttons

You have a variety of button styles to choose from. Centering a button in a default block is tricky, you have to put it in a group, then add the "center" class to the group under the "Advanced" tab to the right while the group is selected.

Secondary Transparent

White Transparent

Black Transparent

Checkerboards

We have several different checkerboard layouts – rows featuring an image in one column and text in the other, alternating the order to create a pattern – to choose from.

Checkerboard Default Style (each column is 50% width, image corners touch)

Checkerboard Offset Style (text column is 50% width, there's a gap between columns & rows, images are 360px tall by default)

Checkerboard: Tall Blocks style (text column is 45% width, all rows are at least 640px tall)

You can choose to show all rooms in any spot you like, or just selected ones, for instance if you were creating a special for a family or ADA rates.

GCommerce Big Center Slider

GCommerce Clifton Style Slider

GCommerce Caption Over Image

Used in a standard Gutenberg column block

The Caption Over Image is usually used inside a Column block or other. It can be thought of as a replacement for a standard image with a more stylized treatment of the caption.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Automatic shrinkage

When used in multiple columns, the Caption Over Image will shrink to fit.

Expanding Columns

This block should be used for highlighting 3-4 areas of the site, usually on a home page. Each column expands when hovered over and can include an image, text, and an optional url where the user will go if the column is clicked anywhere.

The background overlay color and the text color can be set to accommodate different background images and logos. Each logo should be a transparent PNG.

Free Text Block

The Free Text Block is essentially a replacement for the classic default editor. It allows for shortcodes, formatted text, and inline HTML if you’re so inclined. It features a colored, themed background color and changeable text color. You can also break the content into automated columns and a bottom-positioned CTA is available.

Google Me

Responsive Video Embed

Usually embedded videos are not responsive, meaning they're a set width and height that does not change when the browser width does. Generally that means the video will break mobile layouts. This block allows you to paste in any iframe embed for a video and it will automatically be full-width, and the appropriate height for the aspect ratio.

Content Frames

Essentially these are pre-designed layouts meant to accommodate different lengths of text with auto-responsive and auto-sized images. So no matter how tall the text column is, the image(s) in the other will scale to the same height.

Each block can be set to have the images on the right or the left.

1-Big-Banner (large image at the top, paragraphs below)

Intended for cases where you have a fairly lengthy Frame of text, usually with 2 columns, and a single large featured image that is full width. With just a short Frame of copy, the image will overwhelm the layout. Any H1 line in the copy will be styled in white over the top banner image.

1-Big (text on one side, full height image on the other)

Intended for cases where you have a relatively short Frame of text with one big image to the side.

1-over-2 (text on one side, stack of images on the other with one large image over two short ones)

Intended for cases where you have a fairly lengthy Frame of text; though the images will always scale to fit the height of the text block, the layout does not look as good with just a few lines of copy.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.

Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

1-over-2-short (text on one side, stack of images on the other with one large image over two short ones).

Intended for cases where you have a relatively short Frame of text; though the images will always scale to fit the height of the text block, the layout does not look as good with lots of lines of copy.

1-over-1 (text on one side, two equally sized images stacked on top of each other in the other)

Intended for cases where you have a moderate sized text block; though the images will always scale to fit the height of the text block, the layout does not look as good with just a few lines of copy or with too big a block.

Horizontal Gallery

Originally used in the Hotel Thu DRA, this block provides an alternate way to show galleries that does not use RoboGallery.

Hover Image Grid

3x grid with a large image and text below it, where the entire cell is clickable to go to a specified URL.

Image Break

A background image with two different CTA columns that can be clicked on. The overlay color is variable and the block can be one of two different heights.

Mixed Content Slider (Brewster)

A section containing a large image on the left and text on the right with an optional CTA, where the entire section slides.

Gcommerce Test Page