Tables

Using tables with five or more columns for mobile is not recommended, as they typically encounter issues and expand beyond the visible space. Either rethink your approach to the table layout or simplify the information. The columns of the table automaticlly adjust according to the space being occupied by the headings. If your heading has a lot of characters, the column will be wider than others (see below).

Custom Table (Three Column Examples)

Features	2014 Chevy Silverado 1500 Double Cab LTZ	2014 Toyota Tundra
Category1
Category2

<table class="custom" cellspacing="0"> <!-- cellspacing="0" must stay -->
    <tr>
        <th>#</th>
        <th>#</th>
        <th>#a</th>
    </tr>
    <tr>
        <td>Category1</td>
        <td><img src="https://pictures.dealer.com/m/mcgrathgroup/1267/ecba8218daf55f0acf2263f4c2ce6339x.jpg"></td>
        <td><img src="https://pictures.dealer.com/m/mcgrathgroup/1638/ad1ee22b82bdcb12a620bd1abf31e5ccx.jpg"></td>
    </tr>
    <tr>
        <td>Category2</td>
        <td><img src="https://pictures.dealer.com/m/mcgrathgroup/0238/0d7e53bfd40e07fe4ac218b84181441ex.jpg"></td>
        <td><img src="https://pictures.dealer.com/m/mcgrathgroup/0681/1b0aeeaefd10fcf659612f2c12b18089x.jpg"></td>
    </tr>
</table>

Heading 1	Heading 2	Heading 3
Category1
Category2

<table class="custom" cellspacing="0"> <!-- cellspacing="0" must stay -->
    <tr>
        <th>#</th>
        <th>#</th>
        <th>#</th>
    </tr>
    <tr>
        <td>Category1</td>
        <td><img src="https://pictures.dealer.com/m/mcgrathgroup/1267/ecba8218daf55f0acf2263f4c2ce6339x.jpg"></td>
        <td><img src="https://pictures.dealer.com/m/mcgrathgroup/1638/ad1ee22b82bdcb12a620bd1abf31e5ccx.jpg"></td>
    </tr>
    <tr>
        <td>Category2</td>
        <td><img src="https://pictures.dealer.com/m/mcgrathgroup/0238/0d7e53bfd40e07fe4ac218b84181441ex.jpg"></td>
        <td><img src="https://pictures.dealer.com/m/mcgrathgroup/0681/1b0aeeaefd10fcf659612f2c12b18089x.jpg"></td>
    </tr>
</table>

Custom Table (Four Column Example)

Features	2014 Chevy Silverado	2014 Toyota Tundra	2014 Nissan Titan
Category1
Category2
Category3
Category4
Category5

<table class="custom" cellspacing="0"> <!-- cellspacing="0" must stay -->
   <tr>
      <th>Features</th>
      <th>#</th>
      <th>#</th>
      <th>#</th>
   </tr>
   <tr>
      <td>Category1</td>
      <td><img src="https://pictures.dealer.com/m/mcgrathgroup/1267/ecba8218daf55f0acf2263f4c2ce6339x.jpg"></td>
      <td><img src="https://pictures.dealer.com/m/mcgrathgroup/1638/ad1ee22b82bdcb12a620bd1abf31e5ccx.jpg"></td>
      <td><img src="https://pictures.dealer.com/m/mcgrathgroup/0238/0d7e53bfd40e07fe4ac218b84181441ex.jpg"></td>
   </tr>
</table>

Custom Table (Five Column Example)

As previously stated, it is not recommended to build tables with 5 or more columns due to mobile width restrictions. It will work with some displays, but not all. Try reconfiguring your table in different ways or breaking up your data to achieve your desired result. Demonstrations below.

Instead of this...

Features	2014 Chevy Silverado	2014 Toyota Tundra	2014 Nissan Titan	2014 Ford F-150
Category1
Category2
Category3
Category4
Category5

<table class="custom" cellspacing="0"> <!-- cellspacing="0" is important, must stay -->
    <tr>
        <th>Features</th>
        <th>2014 Chevy Silverado</th>
        <th>2014 Toyota Tundra</th>
        <th>2014 Nissan Titan</th>
        <th>2014 Ford F-150</th>
    </tr>
    <tr>
        <td>Category1</td>
        <td><img src="https://pictures.dealer.com/m/mcgrathgroup/0681/1b0aeeaefd10fcf659612f2c12b18089x.jpg"></td>
        <td><img src="https://pictures.dealer.com/m/mcgrathgroup/0681/1b0aeeaefd10fcf659612f2c12b18089x.jpg"></td>
        <td><img src="https://pictures.dealer.com/m/mcgrathgroup/0238/0d7e53bfd40e07fe4ac218b84181441ex.jpg"></td>
        <td><img src="https://pictures.dealer.com/m/mcgrathgroup/0681/1b0aeeaefd10fcf659612f2c12b18089x.jpg"></td>
    </tr>
</table>

Try This!

Vehicle Model	Category 1	Category 2
2016 Chevy Silverado 1500
2016 Toyota Tundra
2016 Ford 1-150
2016 Nissan Titan
2016 GMC Sierra 1500

<table class="custom" cellspacing="0"> <!-- cellspacing="0" must stay -->
  <tr>
    <th>Vehicle Model</th>
    <th>Category 1</th>
    <th>Category 2</th>
  </tr>
  <tr>
    <td>2016 Chevy Silverado 1500</td>
    <td><img src="https://pictures.dealer.com/m/mcgrathgroup/1267/ecba8218daf55f0acf2263f4c2ce6339x.jpg"></td>
    <td><img src="https://pictures.dealer.com/m/mcgrathgroup/1638/ad1ee22b82bdcb12a620bd1abf31e5ccx.jpg"></td>
  </tr>
  <tr>
    <td>2016 Toyota Tundra</td>
    <td><img src="https://pictures.dealer.com/m/mcgrathgroup/0238/0d7e53bfd40e07fe4ac218b84181441ex.jpg"></td>
    <td><img src="https://pictures.dealer.com/m/mcgrathgroup/0681/1b0aeeaefd10fcf659612f2c12b18089x.jpg"></td>
  </tr>
  <tr>
    <td>2016 Ford 1-150</td>
    <td><img src="https://pictures.dealer.com/m/mcgrathgroup/0238/0d7e53bfd40e07fe4ac218b84181441ex.jpg"></td>
    <td><img src="https://pictures.dealer.com/m/mcgrathgroup/0681/1b0aeeaefd10fcf659612f2c12b18089x.jpg"></td>
  </tr>
  <tr>
    <td>2016 Nissan Titan</td>
    <td><img src="https://pictures.dealer.com/m/mcgrathgroup/0238/0d7e53bfd40e07fe4ac218b84181441ex.jpg"></td>
    <td><img src="https://pictures.dealer.com/m/mcgrathgroup/0681/1b0aeeaefd10fcf659612f2c12b18089x.jpg"></td>
  </tr>
  <tr>
    <td>2016 GMC Sierra 1500</td>
    <td><img src="https://pictures.dealer.com/m/mcgrathgroup/0238/0d7e53bfd40e07fe4ac218b84181441ex.jpg"></td>
    <td><img src="https://pictures.dealer.com/m/mcgrathgroup/0681/1b0aeeaefd10fcf659612f2c12b18089x.jpg"></td>
  </tr>
</table>

Custom Vehicle Comparison Table

*Tip Use "comparison" class only when comparing only two vehicles in the table.

2014 Chevy Silverado	vs	2014 Toyota Tundra
6.2-liter V8	Engine	5.7-liter V8
420 @ 5,600 RPM	Horsepower	381 @ 5,600 RPM
460 @ 4,100 RPM	Torque	401 @ 3,600 RPM
15 MPG	Fuel Economy (City)	13 MPG
21 MPG	Fuel Economy (Hwy)	17 MPG
2,007 lbs.	Payload	1,415 lbs.
60mo/ 100,000mi	Power Train Warranty	60mo/ 60,000mi
60mo/ 100,000mi	Roadside Assistance	24mo/ 25,000mi

<table class="custom comparison" cellspacing="0"> <!-- cellspacing="0" must stay -->
    <tr>
        <th>2014 Chevy Silverado</th>
        <th>vs</th>
        <th>2014 Toyota Tundra</th>
    </tr>
    <tr>
        <td>6.2-liter V8</td>
        <td>Engine</td>
        <td>5.7-liter V8</td>
    </tr>
    <tr>
        <td>420 @ 5,600 RPM</td>
        <td>Horsepower</td>
        <td>381 @ 5,600 RPM</td>
    </tr>
    <tr>
        <td>460 @ 4,100 RPM</td>
        <td>Torque</td>
        lt;td>401 @ 3,600 RPM</td>
    </tr>
    <tr>
        <td>15 MPG</td>
        <td>Fuel Economy (City)</td>
        <td>13 MPG</td>
    </tr>
    <tr>
        <td>21 MPG</td>
        <td>Fuel Economy (Hwy)</td>
        <td>17 MPG</td>
    </tr>
    <tr>
        <td>2,007 lbs.</td>
        <td>Payload</td>
        <td>1,415 lbs.</td>
    </tr>
    <tr>
        <td>60mo/ 100,000mi</td>
        <td>Power Train Warranty</td>
        <td>60mo/ 60,000mi</td>
    </tr>
    <tr>
        <td>60mo/ 100,000mi</td>
        <td>Roadside Assistance</td>
        <td>24mo/ 25,000mi</td>
    </tr>
</table>

Featured Vehicle Options Icon Row

This tool is used to highlight particular features available for the vehicle the page pertains to. For icons to insert into this tool, scroll below this section. If you would like an icon and don't see it here, hit me up and we'll add it! Or feel free to make your own. Recommended dimensions for your image are 300px x 300px. There are four available styles to the row. The minimum options to be featured are three, maximum is six. Take note of the corresponding classes for each configuration.

Featured Options Block - Default Style

Standard 2.5L 4-Cylinder Engine

Available 2.5L 4-Cylinder Engine

Standard 2.5L 4-Cylinder Engine

<div class="featuredOptions threeFeatures group">
	<div>
		<i class="ddc-icon ddc-icon-airbags"></i>
		<span>Standard</span>
		<span>2.5L 4-Cylinder Engine</span>
	</div>
	<div>
		<i class="ddc-icon ddc-icon-battery"></i>
		<span>Available</span>
		<span>2.5L 4-Cylinder Engine</span>
	</div>
	<div>
		<i class="ddc-icon ddc-icon-air-conditioning"></i>
		<span>Standard</span>
		<span>2.5L 4-Cylinder Engine</span>
	</div>
</div>

Featured Options Block - Blue Style

Standard 2.5L 4-Cylinder Engine

Available 2.5L 4-Cylinder Engine

Standard 2.5L 4-Cylinder Engine

<div class="featuredOptions blue threeFeatures group">
	<div>
		<i class="ddc-icon ddc-icon-airbags"></i>
		<span>Standard</span>
		<span>2.5L 4-Cylinder Engine</span>
	</div>
	<div>
		<i class="ddc-icon ddc-icon-battery"></i>
		<span>Available</span>
		<span>2.5L 4-Cylinder Engine</span>
	</div>
	<div>
		<i class="ddc-icon ddc-icon-air-conditioning"></i>
		<span>Standard</span>
		<span>2.5L 4-Cylinder Engine</span>
	</div>
</div>

Featured Options Block - Blue Style

Standard 2.5L 4-Cylinder Engine

Available 2.5L 4-Cylinder Engine

Standard 2.5L 4-Cylinder Engine

<div class="featuredOptions blueIcons threeFeatures group">
	<div>
		<i class="ddc-icon ddc-icon-airbags"></i>
		<span>Standard</span>
		<span>2.5L 4-Cylinder Engine</span>
	</div>
	<div>
		<i class="ddc-icon ddc-icon-battery"></i>
		<span>Available</span>
		<span>2.5L 4-Cylinder Engine</span>
	</div>
	<div>
		<i class="ddc-icon ddc-icon-air-conditioning"></i>
		<span>Standard</span>
		<span>2.5L 4-Cylinder Engine</span>
	</div>
</div>

Featured Options Block - Transparent Style

Standard 2.5L 4-Cylinder Engine

Available 2.5L 4-Cylinder Engine

Standard 2.5L 4-Cylinder Engine

<div class="featuredOptions transparent threeFeatures group">
	<div>
		<i class="ddc-icon ddc-icon-airbags"></i>
		<span>Standard</span>
		<span>2.5L 4-Cylinder Engine</span>
	</div>
	<div>
		<i class="ddc-icon ddc-icon-battery"></i>
		<span>Available</span>
		<span>2.5L 4-Cylinder Engine</span>
	</div>
	<div>
		<i class="ddc-icon ddc-icon-air-conditioning"></i>
		<span>Standard</span>
		<span>2.5L 4-Cylinder Engine</span>
	</div>
</div>

DDC Icon Version - 3 Features

Standard 2.5L 4-Cylinder Engine

Available 2.5L 4-Cylinder Engine

Standard 2.5L 4-Cylinder Engine

<div class="featuredOptions threeFeatures group">
	<div>
		<i class="ddc-icon ddc-icon-airbags"></i>
		<span>Standard</span>
		<span>2.5L 4-Cylinder Engine</span>
	</div>
	<div>
		<i class="ddc-icon ddc-icon-battery"></i>
		<span>Available</span>
		<span>2.5L 4-Cylinder Engine</span>
	</div>
	<div>
		<i class="ddc-icon ddc-icon-air-conditioning"></i>
		<span>Standard</span>
		<span>2.5L 4-Cylinder Engine</span>
	</div>
</div>

Image Version - 3 Features

Standard 1.6L 4-Cylinder Engine

Standard Steering Wheel Audio Controls

Standard Wireless Phone Connectivity

<div class="featuredOptions threeFeatures group">
	<div>
		<div>
			<img alt="Engine" width="300" height="300" src="https://pictures.dealer.com/m/mcgrathgroup/0789/0a0eada73295715a19a1da8e5757dd7ax.jpg">
		</div>
		<span>Standard</span>
		<span>1.6L 4-Cylinder Engine</span>
	</div>
	<div>
		<div>
			<img alt="Steering Wheel" width="300" height="300" src="https://pictures.dealer.com/m/mcgrathgroup/0039/e7c9b3368fc0fbf480845404025c9c70x.jpg">
		</div>
		<span>Standard</span>
		<span>Steering Wheel Audio Controls</span>
	</div>
	<div>
		<div>
			<img alt="Wireless" width="300" height="300" src="https://pictures.dealer.com/m/mcgrathgroup/0055/9485ceb195b01a9abc0aed8151e54cf0x.jpg">
		</div>
		<span>Standard</span>
		<span>Wireless Phone Connectivity</span>
	</div>
</div>

DDC Icon Version - 4 Features

Available 2.5L 4-Cylinder Engine

Standard 2.5L 4-Cylinder Engine

Available 2.5L 4-Cylinder Engine

Standard 2.5L 4-Cylinder Engine

<div class="featuredOptions fourFeatures group">
	<div>
		<i class="ddc-icon ddc-icon-battery"></i>
		<span>Available</span>
		<span>2.5L 4-Cylinder Engine</span>
	</div>
	<div>
		<i class="ddc-icon ddc-icon-airbags"></i>
		<span>Standard</span>
		<span>2.5L 4-Cylinder Engine</span>
	</div>
	<div>
		<i class="ddc-icon ddc-icon-battery"></i>
		<span>Available</span>
		<span>2.5L 4-Cylinder Engine</span>
	</div>
	<div>
		<i class="ddc-icon ddc-icon-air-conditioning"></i>
		<span>Standard</span>
		<span>2.5L 4-Cylinder Engine</span>
	</div>
</div>

Image Version - 4 Features

Standard 46 HWY 51 City

Standard 1.6L 4-Cylinder Engine

Standard Steering Wheel Audio Controls

Standard Wireless Phone Connectivity

<div class="featuredOptions fourFeatures group">
	<div>
		<div>
			<img alt="Miles Per Gallon" width="300" height="300" src="https://pictures.dealer.com/m/mcgrathgroup/0901/5957135d016e6452c8e816dd44513acex.jpg">
		</div>
		<span>Standard</span>
		<span>46 HWY<br> 51 City</span>
	</div>
	<div>
		<div>
			<img alt="Engine" width="300" height="300" src="https://pictures.dealer.com/m/mcgrathgroup/0789/0a0eada73295715a19a1da8e5757dd7ax.jpg">
		</div>
		<span>Standard</span>
		<span>1.6L 4-Cylinder Engine</span>
	</div>
	<div>
		<div>
			<img alt="Steering Wheel" width="300" height="300" src="https://pictures.dealer.com/m/mcgrathgroup/0039/e7c9b3368fc0fbf480845404025c9c70x.jpg">
		</div>
		<span>Standard</span>
		<span>Steering Wheel Audio Controls</span>
	</div>
	<div>
		<div>
			<img alt="Wireless" width="300" height="300" src="https://pictures.dealer.com/m/mcgrathgroup/0055/9485ceb195b01a9abc0aed8151e54cf0x.jpg">
		</div>
		<span>Standard</span>
		<span>Wireless Phone Connectivity</span>
	</div>
</div>

DDC Icon Version - 5 Features

Available 2.5L 4-Cylinder Engine

Standard 2.5L 4-Cylinder Engine

Available 2.5L 4-Cylinder Engine

Standard 2.5L 4-Cylinder Engine

Available 2.5L 4-Cylinder Engine

<div class="featuredOptions fiveFeatures group">
	<div>
		<i class="ddc-icon ddc-icon-battery"></i>
		<span>Available</span>
		<span>2.5L 4-Cylinder Engine</span>
	</div>
	<div>
		<i class="ddc-icon ddc-icon-airbags"></i>
		<span>Standard</span>
		<span>2.5L 4-Cylinder Engine</span>
	</div>
	<div>
		<i class="ddc-icon ddc-icon-battery"></i>
		<span>Available</span>
		<span>2.5L 4-Cylinder Engine</span>
	</div>
	<div>
		<i class="ddc-icon ddc-icon-air-conditioning"></i>
		<span>Standard</span>
		<span>2.5L 4-Cylinder Engine</span>
	</div>
	<div>
		<i class="ddc-icon ddc-icon-battery"></i>
		<span>Available</span>
		<span>2.5L 4-Cylinder Engine</span>
	</div>
</div>

Image Version - 5 Features

Standard 1.6L 4-Cylinder Engine

Standard Steering Wheel Audio Controls

Standard Wireless Phone Connectivity

Standard 1.6L 4-Cylinder Engine

Standard Steering Wheel Audio Controls

<div class="featuredOptions fiveFeatures group">
	<div>
		<div>
			<img alt="Engine" width="300" height="300" src="https://pictures.dealer.com/m/mcgrathgroup/0789/0a0eada73295715a19a1da8e5757dd7ax.jpg">
		</div>
		<span>Standard</span>
		<span>1.6L 4-Cylinder Engine</span>
	</div>
	<div>
		<div>
			<img alt="Steering Wheel" width="300" height="300" src="https://pictures.dealer.com/m/mcgrathgroup/0039/e7c9b3368fc0fbf480845404025c9c70x.jpg">
		</div>
		<span>Standard</span>
		<span>Steering Wheel Audio Controls</span>
	</div>
	<div>
		<div>
			<img alt="Wireless" width="300" height="300" src="https://pictures.dealer.com/m/mcgrathgroup/0055/9485ceb195b01a9abc0aed8151e54cf0x.jpg">
		</div>
		<span>Standard</span>
		<span>Wireless Phone Connectivity</span>
	</div>
	<div>
		<div>
			<img alt="Engine" width="300" height="300" src="https://pictures.dealer.com/m/mcgrathgroup/0789/0a0eada73295715a19a1da8e5757dd7ax.jpg">
		</div>
		<span>Standard</span>
		<span>1.6L 4-Cylinder Engine</span>
	</div>
	<div>
		<div>
			<img alt="Steering Wheel" width="300" height="300" src="https://pictures.dealer.com/m/mcgrathgroup/0039/e7c9b3368fc0fbf480845404025c9c70x.jpg">
		</div>
		<span>Standard</span>
		<span>Steering Wheel Audio Controls</span>
	</div>
</div>

DDC Icon Version - 6 Features

Available 2.5L 4-Cylinder Engine

Standard 2.5L 4-Cylinder Engine

Available 2.5L 4-Cylinder Engine

Standard 2.5L 4-Cylinder Engine

Available 2.5L 4-Cylinder Engine

<div class="featuredOptions sixFeatures group">
	<div>
		<i class="ddc-icon ddc-icon-battery"></i>
		<span>Available</span>
		<span>2.5L 4-Cylinder Engine</span>
	</div>
	<div>
		<i class="ddc-icon ddc-icon-airbags"></i>
		<span>Standard</span>
		<span>2.5L 4-Cylinder Engine</span>
	</div>
	<div>
		<i class="ddc-icon ddc-icon-battery"></i>
		<span>Available</span>
		<span>2.5L 4-Cylinder Engine</span>
	</div>
	<div>
		<i class="ddc-icon ddc-icon-air-conditioning"></i>
		<span>Standard</span>
		<span>2.5L 4-Cylinder Engine</span>
	</div>
	<div>
		<i class="ddc-icon ddc-icon-battery"></i>
		<span>Available</span>
		<span>2.5L 4-Cylinder Engine</span>
	</div>
	<div>
		<i class="ddc-icon ddc-icon-battery"></i>
		<span>Available</span>
		<span>2.5L 4-Cylinder Engine</span>
	</div>
</div>

Image Version - 6 Features

Standard 1.6L 4-Cylinder Engine

Standard Steering Wheel Audio Controls

Standard Wireless Phone Connectivity

Standard 1.6L 4-Cylinder Engine

Standard Steering Wheel Audio Controls

<div class="featuredOptions sixFeatures group">
	<div>
		<div>
			<img alt="Engine" width="300" height="300" src="https://pictures.dealer.com/m/mcgrathgroup/0789/0a0eada73295715a19a1da8e5757dd7ax.jpg">
		</div>
		<span>Standard</span>
		<span>1.6L 4-Cylinder Engine</span>
	</div>
	<div>
		<div>
			<img alt="Steering Wheel" width="300" height="300" src="https://pictures.dealer.com/m/mcgrathgroup/0039/e7c9b3368fc0fbf480845404025c9c70x.jpg">
		</div>
		<span>Standard</span>
		<span>Steering Wheel Audio Controls</span>
	</div>
	<div>
		<div>
			<img alt="Wireless" width="300" height="300" src="https://pictures.dealer.com/m/mcgrathgroup/0055/9485ceb195b01a9abc0aed8151e54cf0x.jpg">
		</div>
		<span>Standard</span>
		<span>Wireless Phone Connectivity</span>
	</div>
	<div>
		<div>
			<img alt="Engine" width="300" height="300" src="https://pictures.dealer.com/m/mcgrathgroup/0789/0a0eada73295715a19a1da8e5757dd7ax.jpg">
		</div>
		<span>Standard</span>
		<span>1.6L 4-Cylinder Engine</span>
	</div>
	<div>
		<div>
			<img alt="Steering Wheel" width="300" height="300" src="https://pictures.dealer.com/m/mcgrathgroup/0039/e7c9b3368fc0fbf480845404025c9c70x.jpg">
		</div>
		<span>Standard</span>
		<span>Steering Wheel Audio Controls</span>
	</div>
	<div>
		<div>
			<img alt="Steering Wheel" width="300" height="300" src=""https://pictures.dealer.com/m/mcgrathgroup/0039/e7c9b3368fc0fbf480845404025c9c70x.jpg"">
		</div>
		<span>Standard</span>
		<span>Steering Wheel Audio Controls</span>
	</div>
</div>

Featured Vehicle Options Focus Boxes

Focus Boxes - Default

32MPG HWY

The Trax is equipped with a standard 1.4L turbocharged ECOTEC engine, offering an estimated 33 MPG highway. Or if you choose available all-wheel-drive, you'll have the help of extra traction in challenging conditions.

400Horsepower

24,000MPG HWY

<div class="focusBox">
	<div>
		<div>
			<p><span>32</span>MPG HWY<p>
		</div>
		<div>
			<p> </p>
		</div>
	</div>
	<div>
		<div>
			<p><span>400</span>Horsepower</p>
		</div>
		<div>
			<p> </p>
		</div>
	</div>
	<div>
		<div>
			<p><span>24,000</span>MPG HWY</p>
		</div>
		<div>
			<p> </p>
		</div>
	</div>
</div>

Focus Boxes - Blue

32MPG HWY

400Horsepower

24,000MPG HWY

<div class="focusBox blue">
	<div>
		<div>
			<p><span>32</span>MPG HWY<p>
		</div>
		<div>
			<p> </p>
		</div>
	</div>
	<div>
		<div>
			<p><span>400</span>Horsepower</p>
		</div>
		<div>
			<p> </p>
		</div>
	</div>
	<div>
		<div>
			<p><span>24,000</span>MPG HWY</p>
		</div>
		<div>
			<p> </p>
		</div>
	</div>
</div>

Featured Vehicle Specs Text Rows

In the mobile environment, all configurations of this tool are converted to a stacked layout as demonstrated below. Make sure you keep the span classes!

Three Column Featured Specs Example

1.6 Turbo-Diesel Engine 40MPG
Highway

1.5L Turbo Engine 31MPG
Highway

2.0L Turbo Engine 3,500LBS
Towing
Capacity

<div class="specs threeColumns">
   <p>
      <span class="item">1.6 Turbo-Diesel Engine</span>
      <span class="value">40</span><span class="unit">MPG<br>Highway</span>
   </p>
   <p>
      <span class="item">1.5L Turbo Engine</span>
      <span class="value">31</span><span class="unit">MPG<br>Highway</span>
   </p>
   <p>
      <span class="item">2.0L Turbo Engine</span>
      <span class="value">3,500</span><span class="unit">LBS<br>Towing<br>Capacity</span>
   </p>
</div>

Paint Color Toggle

Snow White Pearl

Silky Silver

Metal Stream

Crimson Red

Deep Cerulean

Rich Espresso

Aurora Black Pearl

<div class="radio-toggle-block">
  <div id="toggle-container">
    <div id="option-01">
      <img alt="#" src="https://pictures.dealer.com/m/mcgrathgroup/0136/fd0fdee0daf32c8c9cf19bff15bc469ex.jpg" width="940" height="400">
      <p class="paint-color">Paint Color Name</p>
    </div>
    <div id="option-02">
      <img alt="#" src="https://pictures.dealer.com/m/mcgrathgroup/1576/b9d3ab6ef31ec103a78c91c88e7cb24ex.jpg" width="940" height="400">
      <p class="paint-color">Paint Color Name</p>
    </div>
    <div id="option-03">
      <img alt="#" src="https://pictures.dealer.com/m/mcgrathgroup/1025/d59be4a537b86534b60121a26e63b31bx.jpg" width="940" height="400">
      <p class="paint-color">Paint Color Name</p>
    </div>
    <div id="option-04">
      <img alt="#" src="https://pictures.dealer.com/m/mcgrathgroup/1169/f5e17befeb7f026b9a444bdae71b1316x.jpg" width="940" height="400">
      <p class="paint-color">Paint Color Name</p>
    </div>
    <div id="option-05">
      <img alt="#" src="https://pictures.dealer.com/m/mcgrathgroup/1020/6ebc544c42cb46c9709ccd62e846d8d1x.jpg" width="940" height="400">
      <p class="paint-color">Paint Color Name</p>
    </div>
    <div id="option-06">
      <img alt="#" src="https://pictures.dealer.com/m/mcgrathgroup/0279/57b4840eed848bf77ecd2eccc3844e0dx.jpg" width="940" height="400">
      <p class="paint-color">Paint Color Name</p>
    </div>
    <div id="option-07">
      <img alt="#" src="https://pictures.dealer.com/m/mcgrathgroup/1338/57b3410e5f19979eba6299fb14d5cd94x.jpg" width="940" height="400">
      <p class="paint-color">Paint Color Name</p>
    </div>
  </div>

  <div class="shadedBox toggle-switch">
    <div class="alignCenter">
      <input id="btn option-01" class="customInput" name="colors" onclick="hideByGroupId('toggle-container'); unhideById('option-01')" checked="" type="radio">
      <label class="colorSelectBtn" title="#" style="background-color: #ffffff;" for="btn option-01"></label>
      <input id="btn option-02" class="customInput" name="colors" onclick="hideByGroupId('toggle-container'); unhideById('option-02')" type="radio">
      <label class="colorSelectBtn" title="#" style="background-color: #dddddd;" for="btn option-02"></label>
      <input id="btn option-03" class="customInput" name="colors" onclick="hideByGroupId('toggle-container'); unhideById('option-03')" type="radio">
      <label class="colorSelectBtn" title="#" style="background-color: #6b7576;" for="btn option-03"></label>
      <input id="btn option-04" class="customInput" name="colors" onclick="hideByGroupId('toggle-container'); unhideById('option-04')" type="radio">
      <label class="colorSelectBtn" title="#" style="background-color: #943434;" for="btn option-04"></label>
      <input id="btn option-05" class="customInput" name="colors" onclick="hideByGroupId('toggle-container'); unhideById('option-05')" type="radio">
      <label class="colorSelectBtn" title="#" style="background-color: #265568;" for="btn option-05"></label>
      <input id="btn option-06" class="customInput" name="colors" onclick="hideByGroupId('toggle-container'); unhideById('option-06')" type="radio">
      <label class="colorSelectBtn" title="#" style="background-color: #53453b;" for="btn option-06"></label>
      <input id="btn option-07" class="customInput" name="colors" onclick="hideByGroupId('toggle-container'); unhideById('option-07')" type="radio">
      <label class="colorSelectBtn" title="#" style="background-color: #292929;" for="btn option-07"></label>
    </div>
  </div>
</div>

Promo Box Sections

Car Promo Box Section w/o Header

Referring to the code for the example below, remember to revise each section grayed out with applicable data. Remember to insert offer disclaimers in the title tag of the fifth <p> tag found within each vehicle offer, and also be sure to link the first button appropriately, either to that model's inventory or a specific vehicle that qualifies for the offer.

'15 Make Model

Trim Level

Starting At

$219 A MONTH

Claim Now

'15 Make Model

Trim Level

Drive it now!

$299 Down
$299 A MONTH

Claim Now

'15 Make Model

Trim Level

$1,000 Bonus Cash

0% APR
72 MO

Claim Now

'15 Make Model

Trim Level

Save up to

$8,000 OFF MSRP

Claim Now

'15 Make Model

Trim Level

As Low As

$199 A MONTH

Claim Now

'15 Make Model

Trim Level

$1000 Bonus Cash

0% APR
60 MO

Claim Now

'15 Make Model

Trim Level

General Motors

EMPLOYEE PRICING FOR THE PUBLIC

Claim Now

'15 Make Model

Trim Level

0% APR / 66 MO

No Payments for 90 Days!

Claim Now

<div class="promoBoxSection group">
    <div class="vehiclePromoBox">
        <p>'15 Make Model</p>
        <p>Trim Level</p>
        <img alt="#" src="#" />
        <p>Starting At</p>
        <p class="xxlarge">$219/mo</p>
        <p title="*">*</p>
        <a class="ctaButton red" href="#" title="Click here for a closer look at this vehicle!">Claim Now</a>
    </div>
    <div class="vehiclePromoBox">
        <p>'15 Make Model</p>
        <p>Trim Level</p>
        <img alt="#" src="#" />
        <p>Drive it now!</p>
        <p class="large">$299 Down<br />$299/MONTH</p>
        <p title="*">*</p>
        <a class="ctaButton red" href="#" title="Click here for a closer look at this vehicle!">Claim Now</a>
    </div>
    <div class="vehiclePromoBox">
        <p>'15 Make Model</p>
        <p>Trim Level</p>
        <img alt="#" src="#" />
        <p>$1,000 Bonus Cash</p>
        <p class="xlarge">0% APR<br />72 MO</p>
        <p title="*">*</p>
        <a class="ctaButton red" href="#" title="Click here for a closer look at this vehicle!">Claim Now</a>
    </div>
    <div class="vehiclePromoBox">
        <p>'15 Make Model</p>
        <p>Trim Level</p>
        <img alt="#" src="#" />
        <p>Save up to</p>
        <p class="xlarge">$8,000 OFF MSRP</p>
        <p title="*">*</p>
        <a class="ctaButton red" href="#" title="Click here for a closer look at this vehicle!">Claim Now</a>
    </div>
    <div class="vehiclePromoBox">
        <p>'15 Make Model</p>
        <p>Trim Level</p>
        <img alt="#" src="#" />
        <p>As Low As</p>
        <p class="xxlarge">$199/mo</p>
        <p title="*">*</p>
        <a class="ctaButton red" href="#" title="Click here for a closer look at this vehicle!">Claim Now</a>
    </div>
    <div class="vehiclePromoBox">
        <p>'15 Make Model</p>
        <p>Trim Level</p>
        <img alt="#" src="#" />
        <p>$1000 Bonus Cash</p>
        <p class="xlarge">0% APR<br />60 MO</p>
        <p title="*">*</p>
        <a class="ctaButton red" href="#" title="Click here for a closer look at this vehicle!">Claim Now</a>
    </div>
    <div class="vehiclePromoBox">
        <p>'15 Make Model</p>
        <p>Trim Level</p>
        <img alt="#" src="#" />
        <p>General Motors</p>
        <p>EMPLOYEE PRICING FOR THE PUBLIC</p>
        <p title="*">*</p>
        <a class="ctaButton red" href="#" title="Click here for a closer look at this vehicle!">Claim Now</a>
    </div>
    <div class="vehiclePromoBox">
        <p>'15 Make Model</p>
        <p>Trim Level</p>
        <img alt="#" src="#" />
        <p>0% APR / 66 MO</p>
        <p class="large">No Payments for 90 Days!</p>
        <p title="*">*</p>
        <a class="ctaButton red" href="#" title="Click here for a closer look at this vehicle!">Claim Now</a>
    </div>
</div>

New Car Promo Box Section w/ promo Header

Remember! When including header images, you must add the class promoHeader to the main container, as demonstrated below.

'15 Make Model

Trim Level

Starting At

$219/mo

Claim Now

'15 Make Model

Trim Level

Drive it now!

$299 Down
$299/MONTH

Claim Now

'15 Make Model

Trim Level

$1,000 Bonus Cash

0% APR
72 MO

Claim Now

'15 Make Model

Trim Level

Save up to

$8,000 OFF MSRP

Claim Now

<div class="promoBoxSection group promoHeader">
    <img width="960" height="180" src="#" />
    <div class="vehiclePromoBox">
        <p>'15 Make Model</p>
        <p>Trim Level</p>
        <img alt="#" src="#" />
        <p>Starting At</p>
        <p class="xxlarge">$219/mo</p>
        <p title="*">*</p>
        <a class="ctaButton red" href="#" title="Click here for a closer look at this vehicle!">Claim Now</a>
    </div>
    <div class="vehiclePromoBox">
        <p>'15 Make Model</p>
        <p>Trim Level</p>
        <img alt="#" src="#" />
        <p>Drive it now!</p>
        <p class="large">$299 Down<br />$299/MONTH</p>
        <p title="*">*</p>
        <a class="ctaButton red" href="#" title="Click here for a closer look at this vehicle!">Claim Now</a>
    </div>
    <div class="vehiclePromoBox">
        <p>'15 Make Model</p>
        <p>Trim Level</p>
        <img alt="#" src="#" />
        <p>$1,000 Bonus Cash</p>
        <p class="xlarge">0% APR<br />72 MO</p>
        <p title="*">*</p>
        <a class="ctaButton red" href="#" title="Click here for a closer look at this vehicle!">Claim Now</a>
    </div>
    <div class="vehiclePromoBox">
        <p>'15 Make Model</p>
        <p>Trim Level</p>
        <img alt="#" src="#" />
        <p>Save up to</p>
        <p class="xlarge">$8,000 OFF MSRP</p>
        <p title="*">*</p>
        <a class="ctaButton red" href="#" title="Click here for a closer look at this vehicle!">Claim Now</a>
    </div>
</div>

Used Car Promo Box Section w/ Header

USED CARS

New Inventory Daily!

As Low As

$99/mo

USED TRUCKS

New Inventory Daily!

As Low As

$189/mo

USED VANS

New Inventory Daily!

As Low As

$99/mo

USED SUVs

New Inventory Daily!

As Low As

$189/mo

<div class="promoBoxSection promoHeader group" style="margin-bottom: 20px;">
	<img width="960" height="162" alt="Used Car Sale Cedar Rapids" src="https://pictures.dealer.com/m/mcgrathgroup/0130/3cfd2f1d31142b1fd652e624fe3a06e9x.jpg" />
	<div class="vehiclePromoBox">
		<p>USED CARS</p>
		<p>New Inventory Daily!</p>
		<img alt="Used Cars for sale in Cedar Rapids" src="https://pictures.dealer.com/m/mcgrathgroup/0235/167f042999ee5af9689579fe2735b894x.jpg" />
		<p>As Low As</p>
		<p class="xxlarge">$99/mo</p>
		<p title="*With approved credit. See dealer for details. Vehicle photos for demonstration purposes only.">*</p>
		<a class="ctaButton red" href="https://www.mcgrathauto.com/used-inventory/index.htm?search=&bodyStyle=Sedan&bodyStyle=Convertible&bodyStyle=Coupe&bodyStyle=Hatchback" title="See More to Shop Our Used Car Selection!">Shop Now</a>
	</div>
	<div class="vehiclePromoBox">
		<p>USED TRUCKS</p>
		<p>New Inventory Daily!</p>
		<img alt="Used Trucks for sale in Cedar Rapids" src="https://pictures.dealer.com/m/mcgrathgroup/1451/a837b41257f6165e77fe519e89c20a26x.jpg" />
		<p>As Low As</p>
		<p class="xxlarge">$189/mo</p>
		<p title="*With approved credit. See dealer for details. Vehicle photos for demonstration purposes only.">*</p>
		<a class="ctaButton red" href="https://www.mcgrathauto.com/used-inventory/index.htm?search=&bodyStyle=Truck&bodyStyle=Truck+Crew+Cab&bodyStyle=Truck+Double+Cab&bodyStyle=Truck+Extended+Cab&bodyStyle=Truck+King+Cab&bodyStyle=Truck+Quad+Cab&bodyStyle=Truck+Regular+Cab&bodyStyle=Truck+Standard+Cab&bodyStyle=Truck+Super+Cab&bodyStyle=Truck+SuperCrew+Cab" title="See More to Shop Our Used Truck Selection!">Shop Now</a>
	</div>
	<div class="vehiclePromoBox">
		<p>USED VANS</p>
		<p>New Inventory Daily!</p>
		<img alt="Used Vans for sale in Cedar Rapids" src="https://pictures.dealer.com/m/mcgrathgroup/0779/d21dbf89d9e84f5fbcb68283b0128a0cx.jpg" />
		<p>As Low As</p>
		<p class="xxlarge">$99/mo</p>
		<p title="*With approved credit. See dealer for details. Vehicle photos for demonstration purposes only.">*</p>
		<a class="ctaButton red" href="https://www.mcgrathauto.com/used-inventory/index.htm?search=&bodyStyle=Van&bodyStyle=Van+Extended+Passenger+Van&bodyStyle=Van+LWB+Passenger+Van" title="See More to Shop Our Used Van Selection!">Shop Now</a>
	</div>
	<div class="vehiclePromoBox">
		<p>USED SUVs</p>
		<p>New Inventory Daily!</p>
		<img alt="Used SUVs for sale in Cedar Rapids" src="https://pictures.dealer.com/m/mcgrathgroup/0462/30f8ab7359334483d77c44cf8307837ax.jpg" />
		<p>As Low As</p>
		<p class="xxlarge">$189/mo</p>
		<p title="*With approved credit. See dealer for details. Vehicle photos for demonstration purposes only.">*</p>
		<a class="ctaButton red" href="https://www.mcgrathauto.com/used-inventory/index.htm?search=&bodyStyle=SUV" title="See More to Shop Our Used SUV Selection!">Shop Now</a>
	</div>
</div>

Contact Number Boxes

Contact Number Footer - Phone

<div class="contactBox twoColumns">
	<div>
		<img alt="#" width="#" height="#" src="#">
	</div>
	<div class="alignCenter">
		<span class="heading">Contact Us</span>
		<span class="phone">#</span>
	</div>
</div>

Contact Number Footer - Text

Text Us (319) 383-7863

<div class="contactBox twoColumns">
	<div>
		<img alt="#" width="#" height="#" src="#">
	</div>
	<div class="alignCenter">
		<span class="heading">Text Us</span>
		<span class="text">#</span>
	</div>
</div>