CONTENT BOXES

The following boxes provide a nice way to create some separation within your page content. There are shaded and white versions of these boxes. It is not recommended to stack these boxes one after another, but they can be used to place some additional emphasis on a section that offers value to the user. If you're looking for a center aligned shaded or white box with a button, take a look at the CTA Button Rows instead.

Shaded Box

This is a Heading Example

Wafer danish liquorice cookie sweet sweet. Croissant sugar plum chocolate cake. Halvah chocolate cake cake bear claw gingerbread. Chocolate bar topping chocolate cake chocolate croissant. Topping toffee cookie. Apple pie wafer jelly-o cookie cheesecake cookie apple pie tart candy canes. Halvah bear claw candy canes.

Click Here 
<div class="shadedBox">
	<h2>This is a Heading Example</h2>
	<p></p>
	<a class="ctaButton" href="#" title="#">Click Here</a>
</div>

Shaded Box w/ Image Floated Left

#

This is a Heading Example

Wafer danish liquorice cookie sweet sweet. Croissant sugar plum chocolate cake. Halvah chocolate cake cake bear claw gingerbread. Chocolate bar topping chocolate cake chocolate croissant. Topping toffee cookie. Apple pie wafer jelly-o cookie cheesecake cookie apple pie tart candy canes. Halvah bear claw candy canes.

Click Here 
<div class="shadedBox">
	<img class="border oneHalf floatLeft" alt="#" title="#" width="#" height="#" src="#" />
	<h2>#</h2>
	<p>#</p>
	<a class="ctaButton" href="#" title="#">#</a>
</div>

Shaded Box w/ Image Floated Right

#

This is a Heading Example

Wafer danish liquorice cookie sweet sweet. Croissant sugar plum chocolate cake. Halvah chocolate cake cake bear claw gingerbread. Chocolate bar topping chocolate cake chocolate croissant. Topping toffee cookie. Apple pie wafer jelly-o cookie cheesecake cookie apple pie tart candy canes. Halvah bear claw candy canes.

Click Here 
<div class="shadedBox">
	<img class="border oneHalf floatRight" alt="#" title="#" width="#" height="#" src="#" />
	<h2>#</h2>
	<p>#</p>
	<a class="ctaButton" href="#" title="#">#</a>
</div>

Shaded Box w/ Video Text Left

This is a Heading Example

Wafer danish liquorice cookie sweet sweet. Croissant sugar plum chocolate cake. Halvah chocolate cake cake bear claw gingerbread. Chocolate bar topping chocolate cake chocolate croissant. Topping toffee cookie. Apple pie wafer jelly-o cookie cheesecake cookie apple pie tart candy canes. Halvah bear claw candy canes.

Click Here 
<div class="shadedBox textLeft">
	<div class="customYouTube oneHalf">
		<div class="align-center">
			<iframe src="?showinfo=0&amp;wmode=transparent" frameborder="0" allowfullscreen></iframe>
		</div>
	</div>
	<h2>This is a Heading Example</h2>
	<p></p>
	<a class="ctaButton" href="#" title="#">Click Here</a>
</div>

Shaded Box w/ Video Text Right

This is a Heading Example

Wafer danish liquorice cookie sweet sweet. Croissant sugar plum chocolate cake. Halvah chocolate cake cake bear claw gingerbread. Chocolate bar topping chocolate cake chocolate croissant. Topping toffee cookie. Apple pie wafer jelly-o cookie cheesecake cookie apple pie tart candy canes. Halvah bear claw candy canes.

Click Here 
<div class="shadedBox textRight">
	<div class="customYouTube oneHalf">
		<div class="align-center">
			<iframe src="?showinfo=0&amp;wmode=transparent" frameborder="0" allowfullscreen></iframe>
		</div>
	</div>
	<h2></h2>
	<p></p>
	<a class="ctaButton " href="#" title="#">Click Here</a>
</div>

Shaded Box w/ Promo Header Text Left

This is a Heading Example

Wafer danish liquorice cookie sweet sweet. Croissant sugar plum chocolate cake. Halvah chocolate cake cake bear claw gingerbread. Chocolate bar topping chocolate cake chocolate croissant. Topping toffee cookie. Apple pie wafer jelly-o cookie cheesecake cookie apple pie tart candy canes. Halvah bear claw candy canes.

Click Here

Click button to download promo header psd template file.

<div class="shadedBox promoHeader textLeft">
	<img width="960" height="180" src="#" />
	<div class="customYouTube oneHalf">
		<div class="align-center">
			<iframe src="?showinfo=0&amp;wmode=transparent" frameborder="0" allowfullscreen></iframe>
		</div>
	</div>
	<h2></h2>
	<p></p>
	<a class="ctaButton" href="#" title="#">Click Here</a>
</div>

Shaded Box w/ Promo Header Text Right

This is a Heading Example

Wafer danish liquorice cookie sweet sweet. Croissant sugar plum chocolate cake. Halvah chocolate cake cake bear claw gingerbread. Chocolate bar topping chocolate cake chocolate croissant. Topping toffee cookie. Apple pie wafer jelly-o cookie cheesecake cookie apple pie tart candy canes. Halvah bear claw candy canes.

Click Here

Click button to download promo header psd template file.

<div class="shadedBox promoHeader textRight">
	<img width="960" height="180" src="#" />
	<div class="customYouTube oneHalf">
		<div class="align-center">
			<iframe src="?showinfo=0&amp;wmode=transparent" frameborder="0" allowfullscreen></iframe>
		</div>
	</div>
	<h2></h2>
	<p></p>
	<a class="ctaButton" href="#" title="#">Click Here</a>
</div>

White Box

This is a Heading Example

Wafer danish liquorice cookie sweet sweet. Croissant sugar plum chocolate cake. Halvah chocolate cake cake bear claw gingerbread. Chocolate bar topping chocolate cake chocolate croissant. Topping toffee cookie. Apple pie wafer jelly-o cookie cheesecake cookie apple pie tart candy canes. Halvah bear claw candy canes.

Click Here 
<div class="whiteBox">
	<h2></h2>
	<p></p>
	<a class="ctaButton" href="#" title="#">Click Here</a>
</div>

White Box w/ Image Floated Left

#

This is a Heading Example

Wafer danish liquorice cookie sweet sweet. Croissant sugar plum chocolate cake. Halvah chocolate cake cake bear claw gingerbread. Chocolate bar topping chocolate cake chocolate croissant. Topping toffee cookie. Apple pie wafer jelly-o cookie cheesecake cookie apple pie tart candy canes. Halvah bear claw candy canes.

Click Here 
<div class="whiteBox">
	<img class="border oneHalf floatLeft" alt="#" title="#" width="#" height="#" src="#" />
	<h2>#</h2>
	<p>#</p>
	<a class="ctaButton" href="#" title="#">#</a>
</div>

White Box w/ Image Floated Right

#

This is a Heading Example

Wafer danish liquorice cookie sweet sweet. Croissant sugar plum chocolate cake. Halvah chocolate cake cake bear claw gingerbread. Chocolate bar topping chocolate cake chocolate croissant. Topping toffee cookie. Apple pie wafer jelly-o cookie cheesecake cookie apple pie tart candy canes. Halvah bear claw candy canes.

Click Here 
<div class="whiteBox">
	<img class="border oneHalf floatRight" alt="#" title="#" width="#" height="#" src="#" />
	<h2>#</h2>
	<p>#</p>
	<a class="ctaButton" href="#" title="#">#</a>
</div>

White Box w/ Video Text Left

This is a Heading Example

Wafer danish liquorice cookie sweet sweet. Croissant sugar plum chocolate cake. Halvah chocolate cake cake bear claw gingerbread. Chocolate bar topping chocolate cake chocolate croissant. Topping toffee cookie. Apple pie wafer jelly-o cookie cheesecake cookie apple pie tart candy canes. Halvah bear claw candy canes.

Click Here 
<div class="whiteBox textLeft">
	<div class="customYouTube oneHalf">
		<div class="align-center">
			<iframe src="?showinfo=0&amp;wmode=transparent" frameborder="0" allowfullscreen></iframe>
		</div>
	</div>
	<h2></h2>
	<p></p>
	<a class="ctaButton" href="#" title="#">Click Here</a>
</div>

White Box w/ Video Text Right

This is a Heading Example

Wafer danish liquorice cookie sweet sweet. Croissant sugar plum chocolate cake. Halvah chocolate cake cake bear claw gingerbread. Chocolate bar topping chocolate cake chocolate croissant. Topping toffee cookie. Apple pie wafer jelly-o cookie cheesecake cookie apple pie tart candy canes. Halvah bear claw candy canes.

Click Here 
<div class="whiteBox textRight">
	<div class="customYouTube oneHalf">
		<div class="align-center">
			<iframe src="?showinfo=0&amp;wmode=transparent" frameborder="0" allowfullscreen></iframe>
		</div>
	</div>
	<h2></h2>
	<p></p>
	<a class="ctaButton" href="#" title="#">Click Here</a>
</div>

White Box w/ Promo Header Text Left

This is a Heading Example

Wafer danish liquorice cookie sweet sweet. Croissant sugar plum chocolate cake. Halvah chocolate cake cake bear claw gingerbread. Chocolate bar topping chocolate cake chocolate croissant. Topping toffee cookie. Apple pie wafer jelly-o cookie cheesecake cookie apple pie tart candy canes. Halvah bear claw candy canes.

Click Here

Click button to download promo header psd template file.

<div class="whiteBox promoHeader textLeft">
	<img width="#" height="#" src="#" />
	<div class="customYouTube oneHalf">
		<div class="align-center">
			<iframe src="?showinfo=0&amp;wmode=transparent" frameborder="0" allowfullscreen></iframe>
		</div>
	</div>
	<h2></h2>
	<p></p>
	<a class="ctaButton" href="#" title="#">Click Here</a>
</div>

White Box w/ Promo Header Text Right

This is a Heading Example

Wafer danish liquorice cookie sweet sweet. Croissant sugar plum chocolate cake. Halvah chocolate cake cake bear claw gingerbread. Chocolate bar topping chocolate cake chocolate croissant. Topping toffee cookie. Apple pie wafer jelly-o cookie cheesecake cookie apple pie tart candy canes. Halvah bear claw candy canes.

Click Here

Click button to download promo header psd template file.

<div class="whiteBox promoHeader textRight">
	<img width="#" height="#" src="#" />
	<div class="customYouTube oneHalf">
		<div class="align-center">
			<iframe src="?showinfo=0&amp;wmode=transparent" frameborder="0" allowfullscreen></iframe>
		</div>
	</div>
	<h2></h2>
	<p></p>
	<a class="ctaButton" href="#" title="#">Click Here</a>
</div>

Stripe Boxes

Stripe Box White

Great Deals Going on Now!

Check out the current sales and promotions going on right now from the McGrath Family of Dealerships, the #1 auto dealer serving Cedar Rapids, Iowa! Plus, view vehicle walk-around reviews featuring our knowledgeable, dedicated sales team as they take you through the latest cars, trucks and SUVs available right now!

VIEW OUR SPECIALS 
<div class="whiteBox stripe">
	<h2>#</h2>
	<p>#</p>
	<a class="ctaButton" title="#" href="#">VIEW OUR SPECIALS</a>
</div>

Stripe Box Shaded

Great Deals Going on Now!

Check out the current sales and promotions going on right now from the McGrath Family of Dealerships, the #1 auto dealer serving Cedar Rapids, Iowa! Plus, view vehicle walk-around reviews featuring our knowledgeable, dedicated sales team as they take you through the latest cars, trucks and SUVs available right now!

VIEW OUR SPECIALS 
<div class="shadedBox stripe">
	<h2>#</h2>
	<p>#</p>
	<a class="ctaButton" title="#" href="#">VIEW OUR SPECIALS</a>
</div>

Shaded Box w/ Stripe Header - Text Right

Great Deals Going on Now!

Check out the current sales and promotions going on right now from the McGrath Family of Dealerships, the #1 auto dealer serving Cedar Rapids, Iowa! Plus, view vehicle walk-around reviews featuring our knowledgeable, dedicated sales team as they take you through the latest cars, trucks and SUVs available right now!

VIEW OUR SPECIALS 
<div class="customYouTube oneHalf">
  <div class="align-center">
    <iframe src="?showinfo=0&amp;wmode=transparent" frameborder="0" allowfullscreen></iframe>
  </div>
</div>
<div class="shadedBox stripe textRight">
  <h2>#</h2>
  <p>#</p>
  <a class="ctaButton" title="#" href="#">VIEW OUR SPECIALS</a>
</div>

Shaded Box w/ Stripe Header - Text Left

Great Deals Going on Now!

Check out the current sales and promotions going on right now from the McGrath Family of Dealerships, the #1 auto dealer serving Cedar Rapids, Iowa! Plus, view vehicle walk-around reviews featuring our knowledgeable, dedicated sales team as they take you through the latest cars, trucks and SUVs available right now!

VIEW OUR SPECIALS 
<div class="customYouTube oneHalf">
  <div class="align-center">
    <iframe src="?showinfo=0&amp;wmode=transparent" frameborder="0" allowfullscreen></iframe>
  </div>
</div>
<div class="shadedBox stripe textLeft">
  <h2>#</h2>
  <p>#</p>
  <a class="ctaButton" title="#" href="#">VIEW OUR SPECIALS</a>
</div>

This is a Heading Example

Check out the current sales and promotions going on right now from the McGrath Family of Dealerships, the #1 auto dealer serving Cedar Rapids, Iowa! Plus, view vehicle walk-around reviews featuring our knowledgeable, dedicated sales team as they take you through the latest cars, trucks and SUVs available right now!

Click Me 
<img class="oneHalf noMargin" src="#" width="#" height="#">
<div class="whiteBox stripe">
  <h3 class="large">#</h3>
  <p>#</p>
</div>

This is a Heading Example

Check out the current sales and promotions going on right now from the McGrath Family of Dealerships, the #1 auto dealer serving Cedar Rapids, Iowa! Plus, view vehicle walk-around reviews featuring our knowledgeable, dedicated sales team as they take you through the latest cars, trucks and SUVs available right now!

Click Me 
<img class="oneHalf noMargin" src="#" width="#" height="#">
<div class="whiteBox stripe">
  <h3 class="large">#</h3>
  <p>#</p>
</div>

Content Boxes with Background Image

This content element does not translate to the mobile environment. Instead, it's recommended to solve this problem with the solution demonstrated below.

White Box with Background Image

#

Meet the Face Behind McGrath's Camera!

Say hello to Ashlee, the McGrath Family of Dealerships marketing team videographer! Along with the help of our fun team of car experts, Ashlee is constantly churning out new videos with exclusive offers, up-close looks at the newest vehicles and technology, and plenty of goofy showroom shenanigans! Subscribe to our YouTube channel now so you don’t miss a thing!

Subscribe Now 
<img class="noMargin" alt="#" title="#" width="600" height="400" src="#">
<div class="whiteBox bgImage textRight" >
	<h3>#</h3>
	<p>#</p>
	<a class="ctaButton" title="#" href="#">#</a>
</div>

ORB BLURBS

Orb sections aren't recommended if your text exceeds roughly 200 characters. The orb images can be flipped to the opposite side by applying either the floatRight or floatLeft class. Examples below. The recommended minimum dimensions for your orb images are 600x600 (or a square ratio).

Get More with McGrath Fleet & Commercial!

McGrath offers the largest selection of half ton, three-quarter ton, and full ton pickups in Eastern Iowa!

Get More with McGrath Fleet & Commercial!

McGrath offers the largest selection of half ton, three-quarter ton, and full ton pickups in Eastern Iowa!

Get More with McGrath Fleet & Commercial!

McGrath offers the largest selection of half ton, three-quarter ton, and full ton pickups in Eastern Iowa!

Get More with McGrath Fleet & Commercial!

McGrath offers the largest selection of half ton, three-quarter ton, and full ton pickups in Eastern Iowa!

<div class="orbSection twoColumns group">
	<div>
		<img class="orb floatLeft" width="600" height="600" src="#" />
		<h2>#</h2>
		<p>#</p>
	</div>
	<div>
		<img class="orb floatLeft" width="600" height="600" src="#" />
		<h2>#</h2>
		<p>#</p>
	</div>
</div>
<div class="orbSection twoColumns group">
	<div>
		<img class="orb floatRight" width="600" height="600" src="#" />
		<h2>#</h2>
		<p>#</p>
	</div>
	<div>
		<img class="orb floatRight" width="600" height="600" src="#" />
		<h2>#</h2>
		<p>#</p>
	</div>
</div>

ORB BLURBS W/ BUTTONS

Get More with McGrath Fleet & Commercial!

McGrath offers the largest selection of half ton, three-quarter ton, and full ton pickups in Eastern Iowa!

Click Here

Get More with McGrath Fleet & Commercial!

McGrath offers the largest selection of half ton, three-quarter ton, and full ton pickups in Eastern Iowa!

Click Here 
<div class="orbSection twoColumns group">
	<div>
		<img class="orb floatLeft" width="600" height="600" src="#" />
		<h2>#</h2>
		<p>#</p>
		<a class="ctaButton" href="#">Click Here</a>
	</div>
	<div>
		<img class="orb floatLeft" width="600" height="600" src="#" />
		<h2>#</h2>
		<p>#</p>
		<a class="ctaButton" href="#">Click Here</a>
	</div>
</div>

Image Blurbs

The heading image for the element below should be at least 600px wide and can be any height, but all heading images in the group must have same dimensions. For the mobile environment, all column layouts and expanded to full-width and stacked, regardless of column number.

Image Blurb One - Two Columns

#

12 Month / 12,000 Mile Limited Vehicle Warranty

Dragee caramels pie. Muffin dessert sweet candy macaroon cheesecake tart. Dessert Dragee toffee topping candy brownie oat cake toffee. Topping sugar plum chocolate cake cheesecake macaroon tiramisu chocolate cake caramels. Chocolate bar oat cake chocolate cake oat cake cheesecake muffin. Topping sugar plum chocolate cake cheesecake macaroon tiramisu chocolate cake caramels. Chocolate bar oat cake chocolate cake oat cake.

  • List Item 1
  • List Item 2
  • List Item 3
  • List Item 4
#

Free Vehicle History Report with Every McGrath Certified Vehicle

Dragee caramels pie. Muffin dessert sweet candy macaroon cheesecake tart. Dessert Dragee toffee topping candy brownie oat cake toffee. Topping sugar plum chocolate cake cheesecake macaroon tiramisu chocolate cake caramels. Chocolate bar oat cake chocolate cake oat cake cheesecake muffin. Apple pie cake liquorice cupcake carrot cake fruitcake. Topping sugar plum chocolate cake cheesecake macaroon tiramisu chocolate cake caramels. Topping sugar plum chocolate cake cheesecake macaroon tiramisu. Topping sugar plum chocolate cake cheesecake macaroon tiramisu. Topping sugar sugar plum chocolate cake cheesecake macaroon tiramisu. Topping sugar plum chocolate cake cheesecake macaroon tiramisu. Topping sugar plum chocolate cake cheesecake macaroon tiramisu. Topping sugar sugar plum chocolate cake cheesecake macaroon tiramisu.

<div class="twoColumns">
	<div class="imageBlurb">
		<img class="heading" alt="#" width="#" height="#" src="#" />
		<div class="scroller">
			<div>
				<h2>#</h2>
				<p>#</p>
			</div>
		</div>
	</div>
	<div class="imageBlurb">
		<img class="heading" alt="#" width="#" height="#" src="#" />
		<div class="scroller">
			<div>
				<h2>#</h2>
				<p>#</p>
			</div>
		</div>
	</div>
</div>

Image Blurb One - Two Columns w/Buttons

#

12 Month / 12,000 Mile Limited Vehicle Warranty

Dragee caramels pie. Muffin dessert sweet candy macaroon cheesecake tart. Dessert Dragee toffee topping candy brownie oat cake toffee. Topping sugar plum chocolate cake cheesecake macaroon tiramisu chocolate cake caramels. Chocolate bar oat.

Click Here
#

Free Vehicle History Report with Every McGrath Certified Vehicle

Dragee caramels pie. Muffin dessert sweet candy macaroon cheesecake tart. Dessert Dragee toffee topping candy brownie oat cake toffee. Topping sugar plum chocolate cake cheesecake macaroon tiramisu chocolate cake caramels. Chocolate bar oat cake chocolate cake oat cake cheesecake muffin. Apple pie cake liquorice cupcake carrot cake fruitcake. Chupa chups bear claw candy canes candy sugar plum sugar plum toffee cake. Chupa chups bear claw candy canes candy sugar plum sugar plum toffee cake. Dessert Dragee toffee topping candy brownie oat cake toffee.

Click Here 
<div class="twoColumns">
	<div class="imageBlurb cta">
		<img class="heading" alt="#" width="#" height="#" src="#" />
		<div class="scroller">
			<div>
				<h2>#</h2>
				<p>#</p>
			</div>
		</div>
		<div class="cta">
			<a class="ctaButton" href="#">Click Here</a>
		</div>
	</div>
	<div class="imageBlurb cta">
		<img class="heading" alt="#" width="#" height="#" src="#" />
		<div class="scroller">
			<div>
				<h2>#</h2>
				<p>#</p>
			</div>
		</div>
		<div class="cta">
			<a class="ctaButton" href="#">Click Here</a>
		</div>
	</div>
</div>

IMAGE BLURB TWO

The heading image for the element below should be at least 600px wide and can be any height, but all heading images in the group must have same dimensions. For the mobile environment, all column layouts and expanded to full-width and stacked, regardless of column number.

Image Blurb Two - Two Columns

#

12 Month / 12,000 Mile Limited Vehicle Warranty

Dragee caramels pie. Muffin dessert sweet candy macaroon cheesecake tart. Dessert Dragee toffee topping candy brownie oat cake toffee. Topping sugar plum chocolate cake cheesecake macaroon tiramisu chocolate cake caramels. Chocolate bar oat.

#

Free Vehicle History Report with Every McGrath Certified Vehicle

Dragee caramels pie. Muffin dessert sweet candy macaroon cheesecake tart. Dessert Dragee toffee topping candy brownie oat cake toffee. Topping sugar plum chocolate cake cheesecake macaroon tiramisu chocolate cake caramels. Chocolate bar oat cake chocolate cake oat cake cheesecake muffin.

<div class="twoColumns">
	<div class="imageBlurb two">
		<img class="heading" alt="#" width="#" height="#" src="#" />
		<h2>#</h2>
		<div class="scroller">
			<div>
				<p>#</p>
			</div>
		</div>
	</div>
	<div class="imageBlurb two">
		<img class="heading" alt="#" width="#" height="#" src="#" />
		<h2>#</h2>
		<div class="scroller">
			<div>
				<p>#</p>
			</div>
		</div>
	</div>
</div>

Image Blurb Two - Two Columns w/Buttons

#

12 Month / 12,000 Mile Limited Vehicle Warranty

Dragee caramels pie. Muffin dessert sweet candy macaroon cheesecake tart. Dessert Dragee toffee topping candy brownie oat cake toffee. Topping sugar plum chocolate cake cheesecake macaroon tiramisu chocolate cake caramels. Chocolate bar oat.

Click Here
#

Free Vehicle History Report with Every McGrath Certified Vehicle

Dragee caramels pie. Muffin dessert sweet candy macaroon cheesecake tart. Dessert Dragee toffee topping candy brownie oat cake toffee. Topping sugar plum chocolate cake cheesecake macaroon tiramisu chocolate cake caramels. Chocolate bar oat cake chocolate cake oat cake cheesecake muffin.

Click Here 
<div class="twoColumns">
	<div class="imageBlurb two cta">
		<img class="heading" alt="#" width="#" height="#" src="#" />
		<h2>#</h2>
		<div class="scroller">
			<div>
				<p>#</p>
			</div>
		</div>
		<div class="cta">
			<a class="ctaButton" href="#">Click Here</a>
		</div>
	</div>
	<div class="imageBlurb two cta">
		<img class="heading" alt="#" width="#" height="#" src="#" />
		<h2>#</h2>
		<div class="scroller">
			<div>
				<p>#</p>
			</div>
		</div>
		<div class="cta">
			<a class="ctaButton" href="#">Click Here</a>
		</div>
	</div>
</div>