*Tip Before inserting code into the DDC page editor, you must compress it. You can do that by using this tool

BUTTONS & LINKS

Button Text Sizing

Adjusting the text size of buttons is also possible by adding the small, large, xlarge, or xxlarge classes. Use wisely! It's best to stick with the default sizing in most situations.

CTA Button - default

Button Green 
<a class="ctaButton" title="#" href="#">Button Green</a>

CTA Button - small

Button Green 
<a class="ctaButton small" title="#" href="#">Button Green</a>

CTA Button - large

Button Green 
<a class="ctaButton large" title="#" href="#">Button Green</a>

CTA Button - xlarge

Button Green 
<a class="ctaButton xlarge" title="#" href="#">Button Green</a>

CTA Button - xxlarge

Button Green 
<a class="ctaButton xxlarge" title="#" href="#">Button Green</a>
 

Button Color

CTA Button Green - Default

Button Green 
<a class="ctaButton" title="#" href="#">Button Green</a>

CTA Button Red

Button Red 
<a class="ctaButton red" title="#" href="#">Button Red</a>

CTA Button Blue

Button Blue 
<a class="ctaButton blue" title="#" href="#">Button Blue</a>

CTA Button

Button Gray 
<a class="ctaButton gray" title="#" href="#">Button Gray</a>

Misc Button Styles

CTA Button Checkmark Icon

Button 
<a class="ctaButton checkmark" title="#" href="#">Button</a>

CTA Button Mobile Icon

Button 
<a class="ctaButton text" title="#" href="#">Button</a>

CTA Button Phone Icon

Button 
<a class="ctaButton phone" title="#" href="#">Button</a>

Button Containing Image

Creating your graphic at least 600 pixels wide ensures a crisp image on mobile displays. Make sure your graphic is a transparent png. Any button color class is applicable, and be sure to use descriptive title and alt text. Example image below:

#

Blue Button Example

# 
<a class="ctaButton blue" title="#" href="#">
	<img alt="#" width="600" height="105" src="#" />
</a>

Gray Button Example

# 
<a class="ctaButton gray" title="#" href="#"><img alt="#" width="600" height="105" src="#" /></a>

CTA Button Rows

A quick and easy way to insert a row of CTA buttons is by combining the classes shadedBox or whiteBox and ctaRow on a div containing one to four buttons. Just add one more class to define the number of buttons you wish to display (unless you're only displaying one), and you're good-to-go! The examples below demonstrate shadedBox, but whiteBox can also be used.

Shaded Box CTA Button Rows Without Text

Shaded Box CTA Button Row - 1 Button

Click Here 
<div class="shadedBox ctaRow">
	<a class="ctaButton" title="#" href="#">Click Here</a>
</div>

Shaded Box CTA Button Row - 2 Buttons

Click Here Click Here 
<div class="shadedBox ctaRow twoButtons">
	<a class="ctaButton" title="#" href="#">Click Here</a>
	<a class="ctaButton" title="#" href="#">Click Here</a>
</div>

Shaded Box CTA Button Row - 3 Buttons

Click Here Click Here Click Here 
<div class="shadedBox ctaRow threeButtons">
	<a class="ctaButton" title="#" href="#">Click Here</a>
	<a class="ctaButton" title="#" href="#">Click Here</a>
	<a class="ctaButton" title="#" href="#">Click Here</a>
</div>

Shaded Box CTA Button Row - 4 Buttons

Notice that because "Value Your Trade" isn't long enough to break to the next line, a <br> tag needs to be inserted in the example below to a create line break and uniformity across the buttons.

Shop Our Inventory Guaranteed Credit Approval Value Your Trade Need Help? Contact Us 
<div class="shadedBox ctaRow fourButtons">
	<a class="ctaButton" title="#" href="#">Shop Our Inventory</a>
	<a class="ctaButton" title="#" href="#">Guaranteed Credit Approval</a>
	<a class="ctaButton" title="#" href="#">Value Your Trade</a>
	<a class="ctaButton" title="#" href="#">Need Help? Contact Us</a>
</div>

Shaded Box CTA Button Row - 4 Red Buttons

Sometimes it makes sense to change the color of your buttons to apply to the auto manufacturer you're highlighting. Red for Kia, blue for Chevy, or just to mix things up!

Shop Our Inventory Guaranteed Credit Approval Value Your
Trade Need Help? Contact Us 
<div class="shadedBox ctaRow fourButtons red">
	<a class="ctaButton" title="#" href="#">Shop Our Inventory</a>
	<a class="ctaButton" title="#" href="#">Guaranteed Credit Approval</a>
	<a class="ctaButton" title="#" href="#">Value Your<br>Trade</a>
	<a class="ctaButton" title="#" href="#">Need Help? Contact Us</a>
</div>

Shaded Box CTA Button Row - 4 Blue Buttons

Shop Our Inventory Guaranteed Credit Approval Value Your
Trade Need Help? Contact Us 
<div class="shadedBox ctaRow fourButtons blue">
	<a class="ctaButton" title="#" href="#">Shop Our Inventory</a>
	<a class="ctaButton" title="#" href="#">Guaranteed Credit Approval</a>
	<a class="ctaButton" title="#" href="#">Value Your<br>Trade</a>
	<a class="ctaButton" title="#" href="#">Need Help? Contact Us</a>
</div>

No Background CTA Button Row - 4 Blue Buttons

Sometimes it makes sense to include a button row without the containing shaded box. With is preferred, but use your best judgment!

Schedule Service Service Specials Ask a Tech Meet Our Team 
<div class="ctaRow fourButtons">
	<a class="ctaButton" title="#" href="#">Schedule Service</a>
	<a class="ctaButton" title="#" href="#">Service Specials</a>
	<a class="ctaButton" title="#" href="#">Ask a Tech</a>
	<a class="ctaButton" title="#" href="#">Meet Our Team</a>
</div>

Shaded Box CTA Button Columns for Sidebars

If you need to create a button menu for a sidebar column, simply add the class of ctaColumn to a shadedBox div. This option only works with shaded boxes.

Click Here Click Here Click Here 
<div class="shadedBox ctaColumn">
	<a class="ctaButton" href="#">Click Here</a>
	<a class="ctaButton" href="#">Click Here</a>
	<a class="ctaButton" href="#">Click Here</a>
</div>
Click Here Click Here Click Here 
<div class="shadedBox ctaColumn red">
	<a class="ctaButton" href="#">Click Here</a>
	<a class="ctaButton" href="#">Click Here</a>
	<a class="ctaButton" href="#">Click Here</a>
</div>
Click Here Click Here Click Here 
<div class="shadedBox ctaColumn blue">
	<a class="ctaButton" href="#">Click Here</a>
	<a class="ctaButton" href="#">Click Here</a>
	<a class="ctaButton" href="#">Click Here</a>
</div>
Click Here Click Here Click Here 
<div class="shadedBox ctaColumn gray">
	<a class="ctaButton" href="#">Click Here</a>
	<a class="ctaButton" href="#">Click Here</a>
	<a class="ctaButton" href="#">Click Here</a>
</div>

Shaded Box CTA Button Rows with Text

By simply adding the class of ctaRow to a shadedBox or whiteBox div, certain rules are applied to your buttons to automatically align them in a pleasing manner. Typically these boxes would be used to emphasize a specific call to action or message that is no more than a few sentences. Again, specify how many buttons you wish to display with the proper classes applied, as demonstrated below. Text size can also be adjusted.

Single Button Example

Test Heading

Apple pie wafer jelly-o cookie cheesecake cookie apple pie wafer jelly-o cookie tart candy canes. Wafer danish liquorice cookie sweet sweet.

Click Here 
<div class="shadedBox ctaRow">
	<p>#</p>
	<a class="ctaButton" title="#" href="#">Click Here</a>
</div>

Shaded Box CTA Link Row Callout w/ Two Buttons

Test Heading

Apple pie wafer jelly-o cookie cheesecake cookie apple pie wafer jelly-o cookie tart candy canes. Wafer danish liquorice cookie sweet sweet.

Click Here Click Here 
<div class="shadedBox ctaRow twoButtons">
	<h2 class="alignCenter">Test Heading</h2>
	<p>#</p>
	<a class="ctaButton" title="#" href="#">Click Here</a>
	<a class="ctaButton" title="#" href="#">Click Here</a>
</div>

Shaded Box CTA Link Row Callout w/ Three Buttons

Test Heading

Apple pie wafer jelly-o cookie cheesecake cookie apple pie wafer jelly-o cookie tart candy canes. Wafer danish liquorice cookie sweet sweet.

Click Here Click Here Click Here 
<div class="shadedBox ctaRow threeButtons">
	<h2 class="alignCenter">Test Heading</h2>
	<p>#</p>
	<a class="ctaButton" title="#" href="#">Click Here</a>
	<a class="ctaButton" title="#" href="#">Click Here</a>
	<a class="ctaButton" title="#" href="#">Click Here</a>
</div>

Shaded Box CTA Link Row Callout w/ Four Buttons

Test Heading

Apple pie wafer jelly-o cookie cheesecake cookie apple pie wafer jelly-o cookie tart candy canes. Wafer danish liquorice cookie sweet sweet.

Click Here Click Here Click Here Click Here 
<div class="shadedBox ctaRow fourButtons">
	<h2 class="alignCenter">Test Heading</h2>
	<p>#</p>
	<a class="ctaButton" title="#" href="#">Click Here</a>
	<a class="ctaButton" title="#" href="#">Click Here</a>
	<a class="ctaButton" title="#" href="#">Click Here</a>
	<a class="ctaButton" title="#" href="#">Click Here</a>
</div>

Column Based CTA Image Button Rows

Another way to insert a row of Call-to-Action buttons is to use the CTA Button Rows with heading icons from the Feature Icons Menu, or make your own! This feature works with three and four column layouts.

Click button to download 280x280 icon psd template file.

3 Button Heading Icon Example

#
Call to Action
#
Call to Action
#
Call to Action 
<div class="threeColumns cta">
	<div>
		<div>
			<img alt="#" src="https://pictures.dealer.com/m/mcgrathgroup/1424/7d106e795a2f2d23bb718ab3b78ee908x.jpg" >
		</div>
		<a class="ctaButton" title="#" href="#">Call to Action</a>

	</div>
	<div>
		<div>
			<img alt="#" src="https://pictures.dealer.com/m/mcgrathgroup/0824/e574776794e5f4c3e17fa620f4f1e5f4x.jpg" >
		</div>
		<a class="ctaButton" title="#" href="#">Call to Action</a>

	</div>
	<div>
		<div>
		<img alt="#" src="https://pictures.dealer.com/m/mcgrathgroup/0436/630dc87c99c48aa368cda8b0bc70d15cx.jpg" >
		</div>
		<a class="ctaButton" title="#" href="#">Call to Action</a>
	</div>
</div>

4 Button Heading Image Example

#
Call to Action
#
Call to Action
#
Call to Action
#
Call to Action 
<div class="fourColumns cta">
	<div>
		<div>
			<img alt="#" src="https://pictures.dealer.com/m/mcgrathgroup/0824/e574776794e5f4c3e17fa620f4f1e5f4x.jpg" >
		</div>
		<a class="ctaButton blue" title="#" href="#">Call to Action</a>
	</div>
	<div>
		<div>
			<img alt="#" src="https://pictures.dealer.com/m/mcgrathgroup/0824/e574776794e5f4c3e17fa620f4f1e5f4x.jpg" >
		</div>
		<a class="ctaButton blue" title="#" href="#">Call to Action</a>
	</div>
	<div>
		<div>
			<img alt="#" src="https://pictures.dealer.com/m/mcgrathgroup/0436/630dc87c99c48aa368cda8b0bc70d15cx.jpg" >
		</div>
		<a class="ctaButton blue" title="#" href="#">Call to Action</a>
	</div>
	<div>
		<div>
			<img alt="#" src="https://pictures.dealer.com/m/mcgrathgroup/0436/630dc87c99c48aa368cda8b0bc70d15cx.jpg" >
		</div>
		<a class="ctaButton blue" title="#" href="#">Call to Action</a>
	</div>
</div>

Block Menus

Below are some block menus that are a fun way to provide user useful links while breaking up your content. You can configure the number of buttons in a row by using the classes threeColumns, fourColumns, fiveColumns and sixColumns. Class of twoColumn is not supported. Below are blockMenus containing different arrangement of links. You aren't restricted to the link examples or icon choices demonstrated below. Need a new icon for a link you'd like to feature in this menu? Holler and I'll make it for you!

Colored Block Menus

Colored Block Menu - Three Columns

About McGrath Auto McGrath Auto History McGrath Auto Staff 
<div class="blockMenu threeColumns">
	<a href="#" title="Learn More about McGrath Auto!"><img alt="About McGrath Auto" src="https://pictures.dealer.com/m/mcgrathgroup/1093/a02430628fa539d91227dadffe683be4x.jpg" width="280" height="280"></a>
	<a href="#" title="Learn About the History of the McGrath Family of Dealerships!"><img alt="McGrath Auto History" src="https://pictures.dealer.com/m/mcgrathgroup/0035/3858b3a303e6f8530deb25ccd609a6efx.jpg" width="280" height="280"></a>
	<a href="#" title="Get to Know Our Team!"><img alt="McGrath Auto Staff" src="https://pictures.dealer.com/m/mcgrathgroup/0158/11368c20976e9e95b3255449e546584fx.jpg" width="280" height="280"></a>
</div>

Colored Block Menu - Four Columns

About McGrath Auto McGrath Auto History McGrath Auto Staff McGrath on Social Media 
<div class="blockMenu fourColumns">
	<a href="#" title="Learn More about McGrath Auto!"><img alt="About McGrath Auto" src="https://pictures.dealer.com/m/mcgrathgroup/1093/a02430628fa539d91227dadffe683be4x.jpg" width="280" height="280"></a>
	<a href="#" title="Learn About the History of the McGrath Family of Dealerships!"><img alt="McGrath Auto History" src="https://pictures.dealer.com/m/mcgrathgroup/0035/3858b3a303e6f8530deb25ccd609a6efx.jpg" width="280" height="280"></a>
	<a href="#" title="Get to Know Our Team!"><img alt="McGrath Auto Staff" src="https://pictures.dealer.com/m/mcgrathgroup/0158/11368c20976e9e95b3255449e546584fx.jpg" width="280" height="280"></a>
	<a href="#" title="Join Us on Social Media!"><img alt="McGrath on Social Media" src="https://pictures.dealer.com/m/mcgrathgroup/1332/905a7fab47dc077f73b4549d5fabbaa1x.jpg" width="280" height="280"></a>
</div>

Colored Block Menu - Five Columns

About McGrath Auto McGrath Auto History McGrath Auto Staff Dealership Tour Cedar Rapids Jobs 
<div class="blockMenu fiveColumns">
	<a href="#" title="Learn More about McGrath Auto!"><img alt="About McGrath Auto" src="https://pictures.dealer.com/m/mcgrathgroup/1093/a02430628fa539d91227dadffe683be4x.jpg" width="280" height="280"></a>
	<a href="#" title="Learn About the History of the McGrath Family of Dealerships!"><img alt="McGrath Auto History" src="https://pictures.dealer.com/m/mcgrathgroup/0035/3858b3a303e6f8530deb25ccd609a6efx.jpg" width="280" height="280"></a>
	<a href="#" title="Get to Know Our Team!"><img alt="McGrath Auto Staff" src="https://pictures.dealer.com/m/mcgrathgroup/0158/11368c20976e9e95b3255449e546584fx.jpg" width="280" height="280"></a>
	<a href="#" title="Tour Our Dealership Before You Visit!"><img alt="Dealership Tour" src="https://pictures.dealer.com/m/mcgrathgroup/0574/a1e374fe8e4158cc0a9f15fe46c30f63x.jpg" width="280" height="280"></a>
	<a href="#" title="Start Your New Career with McGrath!"><img alt="Cedar Rapids Jobs" src="https://pictures.dealer.com/m/mcgrathgroup/0490/fd0df1869da94c7c8bb4cca33757a2c5x.jpg" width="280" height="280"></a>
</div>

Colored Block Menu - Six Columns

About McGrath Auto McGrath Auto History McGrath on Social Media Dealership Tour Cedar Rapids Jobs McGrath Auto Staff 
<div class="blockMenu sixColumns">
	<a href="#" title="Learn More about McGrath Auto!"><img alt="About McGrath Auto" src="https://pictures.dealer.com/m/mcgrathgroup/1093/a02430628fa539d91227dadffe683be4x.jpg" width="280" height="280"></a>
	<a href="#" title="Learn About the History of the McGrath Family of Dealerships!"><img alt="McGrath Auto History" src="https://pictures.dealer.com/m/mcgrathgroup/0035/3858b3a303e6f8530deb25ccd609a6efx.jpg" width="280" height="280"></a>
	<a href="#" title="Join Us on Social Media!"><img alt="McGrath on Social Media" src="https://pictures.dealer.com/m/mcgrathgroup/1332/905a7fab47dc077f73b4549d5fabbaa1x.jpg" width="280" height="280"></a>
	<a href="#" title="Tour Our Dealership Before You Visit!"><img alt="Dealership Tour" src="https://pictures.dealer.com/m/mcgrathgroup/0574/a1e374fe8e4158cc0a9f15fe46c30f63x.jpg" width="280" height="280"></a>
	<a href="#" title="Start Your New Career with McGrath!"><img alt="Cedar Rapids Jobs" src="https://pictures.dealer.com/m/mcgrathgroup/0490/fd0df1869da94c7c8bb4cca33757a2c5x.jpg" width="280" height="280"></a>
	<a href="#" title="Get to Know Our Team!"><img alt="McGrath Auto Staff" src="https://pictures.dealer.com/m/mcgrathgroup/0158/11368c20976e9e95b3255449e546584fx.jpg" width="280" height="280"></a>   
</div>

MFD Home Block Menu

*Tip This is the menu featured on most dealer home pages.

New Vehicle Inventory Used Vehicle Inventory Service Department Vehicle Internet Specials Auto Loan and Financing Value Your Trade Parts Department McGrath Videos McGrath Credit McGrath Collision Center 
<div class="blockMenu home">
	<a href="https://www.mcgrathauto.com/new-inventory/index.htm" title="Shop Our Inventory of New Vehicles!">
		<img alt="New Vehicle Inventory" src="https://pictures.dealer.com/m/mcgrathgroup/0032/28042c7958859eb3dd9fc7ae16eacdb2x.jpg" width="600" height="280" />
	</a>
	<a href="https://www.mcgrathauto.com/used-inventory/index.htm" title="Shop Our Inventory of Pre-Owned Vehicles!">
		<img alt="Used Vehicle Inventory" src="htt://pictures.dealer.com/m/mcgrathgroup/1166/682277796e5f76bfd4f9571140bee6e2x.jpg" width="600" height="280" />
	</a>
	<a href="https://www.mcgrathauto.com/service/portal.htm" title="Schedule Your Next Service Appointment!">
		<img alt="Service Department" src="https://pictures.dealer.com/m/mcgrathgroup/0894/f9283b5ccd821a0a8051532bccb3ecc0x.jpg" width="280" height="280" />
	</a>
	<a href="https://www.mcgrathauto.com/featured-vehicles/index.htm" title="View Our Online Vehicle Specials!">
		<img alt="Vehicle Internet Specials" src="https://pictures.dealer.com/m/mcgrathgroup/0020/d31b7afbc057171620f7e276b2d7bcb8x.jpg" width="280" height="280" />
	</a>
	<a href="https://www.mcgrathauto.com/financing/get-pre-approved.htm" title="Get Pre-Approved for Your Auto Loan Now!">
		<img alt="Auto Loan and Financing" src="https://pictures.dealer.com/m/mcgrathgroup/1303/d547f38e2b5bae51c5c5b87063280276x.jpg" width="280" height="280" />
	</a>
	<a href="https://www.mcgrathauto.com/kelley-blue-book.htm" title="Get the Value For Your Trade-in Vehicle!">
		<img alt="Value Your Trade" src="https://pictures.dealer.com/m/mcgrathgroup/0139/d333b21ac37f1b665518c883b5c457bex.jpg" width="280" height="280" />
	</a>
	<a href="https://www.mcgrathauto.com/parts/index.htm" title="Shop for Vehicle Parts & Accessories!">
		<img alt="Parts Department" src="https://pictures.dealer.com/m/mcgrathgroup/0272/a580679b632f3e46f13550fb9a783da1x.jpg" width="280" height="280" />
	</a>
	<a href="https://www.mcgrathauto.com/video.htm" title="View our YouTube Videos!">
		<img alt="McGrath Videos" src="https://pictures.dealer.com/m/mcgrathgroup/0360/42dd13c905a92cb44b96b60445a74ca5x.jpg" width="280" height="280" />
	</a>
	<a href="https://www.mcgrathauto.com/financing/index.htm" title="Bad Credit? No Credit? No Problem!">
		<img alt="McGrath Credit" src="https://pictures.dealer.com/m/mcgrathgroup/0917/0f23ee3984df05e2a6f02cd9f1fb443ax.jpg" width="280" height="280" />
	</a>
	<a href="http://www.mcgrathcollision.com" title="Recent Fender Bender? We Can Help!">
		<img alt="McGrath Collision Center" src="https://pictures.dealer.com/m/mcgrathgroup/0162/633f7e6305a6d27be0c1510c76ec0cd6x.jpg" width="280" height="280" />
	</a>
</div>

Social Media Block Menu

To use implement a brand specific color scheme to the block menu for social media links, simply add the corresponding class to each link! All available examples are found in the demonstration below. Be sure to insert links specific to the pertaining store if applicable. You can find these links here. Make sure all TITLE & ALT tags are applicable as well.

McGrath Auto on Google+ McGrath Auto on YouTube McGrath Auto on Pinterest McGrath Auto on LinkedIn McGrath Auto on Instagram McGrath Auto on Yelp McGrath Auto on DealerRater 
<div class="blockMenu sixColumns">
	<a target="_blank" class="facebook" href="#" title="Join Us on Facebook"><img alt="McGrath Auto on Facebook" src="https://pictures.dealer.com/m/mcgrathgroup/0417/434e7fc093b836fd4be21ac0f235c49cx.jpg" width="300" height="300"></a>
	<a target="_blank" class="google" href="#" title="Join Us on Google Plus!"><img alt="McGrath Auto on Google+" src="https://pictures.dealer.com/m/mcgrathgroup/1646/9227a9f228b98de7991a663569ed673cx.jpg" width="300" height="300"></a>
	<a target="_blank" class="twitter" href="https://twitter.com/McGrathAuto" title="Join Us on Twitter"><img alt="McGrath Auto on Twitter" src="https://pictures.dealer.com/m/mcgrathgroup/0303/11985f17a109bccd113104c415119ec8x.jpg" width="300" height="300"></a>
	<a target="_blank" class="youtube" href="https://www.youtube.com/user/mcgrathauto" title="Join Us on YouTube"><img alt="McGrath Auto on YouTube" src="https://pictures.dealer.com/m/mcgrathgroup/1708/604da7ae80de20531bf8c0f0125f903cx.jpg" width="300" height="300"></a>
	<a target="_blank" class="pinterest" class="" href="https://www.pinterest.com/mcgrathauto/" title="Join Us on Pinterest"><img alt="McGrath Auto on Pinterest" src="https://pictures.dealer.com/m/mcgrathgroup/0447/8dbedda15dd0daabb2991250dc02b599x.jpg" width="300" height="300"></a>
	<a target="_blank" class="linkedin" href="https://www.linkedin.com/company/mcgrath-auto" title="Join Us on LinkedIn"><img alt="McGrath Auto on LinkedIn" src="https://pictures.dealer.com/m/mcgrathgroup/0087/f75d413dae43b2b066f9f65f6bb49e29x.jpg" width="300" height="300"></a>
	<a target="_blank" class="instagram" href="https://www.instagram.com/mcgrathauto/" title="Join Us on Instagram"><img alt="McGrath Auto on Instagram" src="https://pictures.dealer.com/m/mcgrathgroup/1092/471374fc36d93d78c28577697395336dx.jpg" width="300" height="300"></a>
	<a target="_blank" class="yelp" href="#" title="Join Us on Yelp"><img alt="McGrath Auto on Yelp" src="https://pictures.dealer.com/m/mcgrathgroup/0416/5c7bf294143c3743bb91f197efef7c79x.jpg" width="300" height="300"></a>
	<a target="_blank" class="dealerrater" href="#" title="Join Us on Yelp"><img alt="McGrath Auto on DealerRater" src="https://pictures.dealer.com/m/mcgrathgroup/0744/c89a634ec2debb0c52a4dfba76518bbfx.jpg" width="300" height="300"></a>
</div>

Block Menu White

Cedar Rapids Chevrolet Cedar Rapids Dodge Cedar Rapids GMC Cedar Rapids Kia 
<div class="blockMenu fourColumns white">
	<a href="#"><img alt="#" title="#" width="#" height="#" src="#"></a>
	<a href="#"><img alt="#" title="#" width="#" height="#" src="#"></a>
	<a href="#"><img alt="#" title="#" width="#" height="#" src="#"></a>
	<a href="#"><img alt="#" title="#" width="#" height="#" src="#"></a>
</div>

Block Menu Blue

About McGrath Auto McGrath Auto History McGrath Auto Staff McGrath on Social Media 
<div class="blockMenu fourColumns blue">
	<a href="#"><img alt="#" title="#" width="#" height="#" src="#"></a>
	<a href="#"><img alt="#" title="#" width="#" height="#" src="#"></a>
	<a href="#"><img alt="#" title="#" width="#" height="#" src="#"></a>
	<a href="#"><img alt="#" title="#" width="#" height="#" src="#"></a>
</div>

Block Menu Gray

Block Menu Gray - Four Columns

If you need to separate menu links by physical location, or wish to simply add some notation, you can do this with the gray menu. Just add the class of notation to your anchor tag and add your notation within a span tag, after your image.

Buick Service Center Cadillac Service Center Chevrolet Service Center Chrysler Service Center Dodge Service Center FIAT Service Center Ford Service Center GMC Service Center Hyundai Service Center Dubuque Dubuque, IA 
<div class="blockMenu gray fourColumns">
	<a title="Title Goes Here" href="#">
		<img alt="#" title="#" width="#" height="#" src="#">
	</a>
	<a title="Title Goes Here" href="#">
		<img alt="#" title="#" width="#" height="#" src="#">
	</a>
	<a title="Title Goes Here" href="#">
		<img alt="#" title="#" width="#" height="#" src="#">
	</a>
	<a title="Title Goes Here" href="#">
		<img alt="#" title="#" width="#" height="#" src="#">
	</a>
	<a title="Title Goes Here" href="#">
		<img alt="#" title="#" width="#" height="#" src="#">
	</a>
	<a title="Title Goes Here" href="#">
		<img alt="#" title="#" width="#" height="#" src="#">
	</a>
	<a title="Title Goes Here" href="#">
		<img alt="#" title="#" width="#" height="#" src="#">
	</a>
	<a title="Title Goes Here" href="#">
		<img alt="#" title="#" width="#" height="#" src="#">
	</a>
	<a title="Title Goes Here" href="#">
		<img alt="#" title="#" width="#" height="#" src="#">
	</a>
	<a class="notation" title="Title Goes Here!" href="#">
		<img alt="#" title="#" width="#" height="#" src="#">
		<span>Dubuque, IA</span>
	</a>
</div>

Block Menu Gray - Five Columns

Buick Service Center Cadillac Service Center Chevrolet Service Center Chrysler Service Center Dodge Service Center FIAT Service Center Ford Service Center GMC Service Center Hyundai Service Center Dubuque Dubuque, IA 
<div class="blockMenu gray">
	<a title="Title Goes Here" href="#">
		<img alt="#" title="#" width="#" height="#" src="#">
	</a>
	<a title="Title Goes Here" href="#">
		<img alt="#" title="#" width="#" height="#" src="#">
	</a>
	<a title="Title Goes Here" href="#">
		<img alt="#" title="#" width="#" height="#" src="#">
	</a>
	<a title="Title Goes Here" href="#">
		<img alt="#" title="#" width="#" height="#" src="#">
	</a>
	<a title="Title Goes Here" href="#">
		<img alt="#" title="#" width="#" height="#" src="#">
	</a>
	<a title="Title Goes Here" href="#">
		<img alt="#" title="#" width="#" height="#" src="#">
	</a>
	<a title="Title Goes Here" href="#">
		<img alt="#" title="#" width="#" height="#" src="#">
	</a>
	<a title="Title Goes Here" href="#">
		<img alt="#" title="#" width="#" height="#" src="#">
	</a>
	<a title="Title Goes Here" href="#">
		<img alt="#" title="#" width="#" height="#" src="#">
	</a>
	<a class="notation" title="Title Goes Here!" href="#">
		<img alt="#" title="#" width="#" height="#" src="#">
		<span>Dubuque, IA</span>
	</a>
</div>