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 Gray

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="https://pictures.dealer.com/m/mcgrathgroup/1286/140c30e8b0afa9fde5ab1fc403296ba8x.jpg" />
</a>

Gray Button Example

# 
<a class="ctaButton gray" title="#" href="#">
	<img alt="#" width="600" height="105" src="https://pictures.dealer.com/m/mcgrathgroup/1286/140c30e8b0afa9fde5ab1fc403296ba8x.jpg" />
</a>

CTA Button Rows

When displayed in the mobile environment, the CTA Button Rows and Button Columns automatically adjust to display as a column of buttons instead of aligning horizontally. The class defining number of buttons displayed is not necessary but leaving it from the desktop version does no harm.

Shaded Box CTA Button Rows Without Text

Shaded Box CTA Button Row - 1 Button

Click Here 
<div class="shadedBox ctaRow group">
	<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 group">
	<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 group">
	<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 "Guaranteed Credit Approval" is too long a phrase to be contained in one line of text and breaks uniformity. This isn't hurting anything, but is an undesirable result. I would recommend making your message more conside where necessary. "Guaranteed Credit Approval" works fine on the desktop version, but maybe use "Credit Approval" for mobile!

Shop Our Inventory Guaranteed Credit Approval Value Your Trade Need Help? Contact Us 
<div class="shadedBox ctaRow fourButtons group">
	<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, but most of the time the defaul green is best. Simply add the red, blue or gray class to your shadedBox container div.

Shop Our Inventory Credit Approval Value Your Trade Need Help? Contact Us 
<div class="shadedBox ctaRow fourButtons red group">
	<a class="ctaButton" title="#" href="#">Shop Our Inventory</a>
	<a class="ctaButton" title="#" href="#">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 Blue Buttons

Shop Our Inventory Credit Approval Value Your Trade Need Help? Contact Us 
<div class="shadedBox ctaRow fourButtons blue group">
	<a class="ctaButton" title="#" href="#">Shop Our Inventory</a>
	<a class="ctaButton" title="#" href="#">Credit Approval</a>
	<a class="ctaButton" title="#" href="#">Value Your 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. Including the shaded box is generally preferred, but use your best judgment according to the layout of your page!

Schedule Service Service Specials Ask a Tech Meet Our Team 
<div class="ctaRow fourButtons blue group">
	<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

As stated above, any CTA Button Columns carry the same style rules as the ctaRows with the same customization options.

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>

By simply adding the class of ctaRow to a shadedBox div, certain rules are applied to your buttons to automatically align them in a pleasing manner. In the desktop environment, the buttons align horizontally, but on mobile, they are stacked. Typically these boxes would be used to emphasize a specific call to action or message that is no more than a few sentences.

Shaded Box CTA Button Rows with Text

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 group">
	<p>Apple pie wafer jelly-o cookie cheesecake cookie apple pie wafer jelly-o cookie tart candy canes. Wafer danish liquorice cookie sweet sweet.</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 group">
	<h2 class="alignCenter">Test Heading</h2>
	<p>Apple pie wafer jelly-o cookie cheesecake cookie apple pie wafer jelly-o cookie tart candy canes. Wafer danish liquorice cookie sweet sweet.</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 group">
	<h2 class="alignCenter">Test Heading</h2>
	<p>Apple pie wafer jelly-o cookie cheesecake cookie apple pie wafer jelly-o cookie tart candy canes. Wafer danish liquorice cookie sweet sweet.</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 group">
	<h2 class="alignCenter">Test Heading</h2>
	<p>Apple pie wafer jelly-o cookie cheesecake cookie apple pie wafer jelly-o cookie tart candy canes. Wafer danish liquorice cookie sweet sweet.</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

As with other column based features, when translated to the mobile environment, the columns are expanded to full width. However, if you feel you aren't harming the user experience, you can override this by using the twoColumnsMobile class (as demonstrated below ) but you are limited to two columns only.

3 Button Heading Icon Example

#
Call to Action
#
Call to Action
#
Call to Action 
<div class="threeColumns cta group">
   <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 with Image Example

#
Call to Action
#
Call to Action
#
Call to Action
#
Call to Action 
<div class="fourColumns cta group">
   <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>

Two Column 4 Button with Image Example

As described above, here is an example of how you can insert two columns of buttons by using the twoColumnsMobile class. You are limited to two columns only.

#
Call to Action
#
Call to Action
#
Call to Action
#
Call to Action 
<div class="twoColumnsMobile cta group">
   <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, each containing different arrangement of links. You aren't restricted to the link examples 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 group">
	<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 group">
	<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 group">
	<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 group">
	<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 group">
    <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="https://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 group">
	<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 group">
	<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 group">
	<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 group">
	<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>