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

Tables

You can insert custom tables into a div of any width depending on a number of conditions. 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). However, be careful when using tables with five or more columns. They typically encounter issues when displayed on mobile devices..

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>Features</th>
		<th>2014 Chevy Silverado 1500 Double Cab LTZ</th>
		<th>2014 Toyota Tundra</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>Heading 1</th>
        <th>Heading 2</th>
        <th>Heading 3</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>2014 Chevy Silverado</th>
      <th>2014 Toyota Tundra</th>
      <th>2014 Nissan Titan</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)

It is not recommended to build tables with 5 or more columns due to mobile width restrictions. Some conditions will result in the table breaking due to width constraints of the page. Try configuring 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">
	<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">
	<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">
	<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">
	<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">
	<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">
	<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">
	<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">
	<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">
	<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">
	<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">
	<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">
	<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

Need a simple way to present some important vehicle specs? Use the tool below and fill in the values! Make sure you keep the span classes and remember this tool works in three different configurations. It can be three columns wide, four columns wide, or stacked within a single column of a three or two-thirds column layout. Check out the examples below.

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>

Four 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

1.5L Turbo Engine 31MPG
Highway

<div class="specs fourColumns">
	<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>
	<p>
		<span class="item">1.5L Turbo Engine</span>
		<span class="value">31</span><span class="unit">MPG<br>Highway</span>
	</p>
</div>

Stacked Column Featured Specs Example

Remember, this is only to be used within a single column of your three or two-thirds column layout divs!

Stacked Featured Specs / Three Column Example

Sugar plum jelly-o cotton candy jelly candy carrot cake. I love pie danish gingerbread I love bonbon apple pie. Cake jelly cookie chupa chups brownie gummies. Jujubes chocolate chocolate bar chocolate bar lollipop pastry. Sugar plum jelly-o cotton candy jelly candy carrot cake.

Sweet roll macaroon I love I love. Dessert sesame snaps candy canes cake. I love brownie macaroon wafer I love tootsie roll powder jujubes chocolate cake. Sugar plum cotton candy fruitcake toffee ice cream pastry oat cake gummi bears cheesecake. Lemon drops liquorice soufflé cake fruitcake croissant pudding. I love sesame snaps I love.

1.6 Turbo-Diesel Engine 40MPG
Highway

1.5L Turbo Engine 31MPG
Highway

2.0L Turbo Engine 3,500LBS
Towing
Capacity

Stacked Featured Specs / Two-Thirds Column Example

Chupa chups soufflé marshmallow icing marzipan pastry pastry liquorice gummi bears. I love I love brownie. Tootsie roll chocolate tiramisu I love. I love pie danish gingerbread I love bonbon apple pie. Cake jelly cookie chupa chups brownie gummies. Jujubes chocolate chocolate bar chocolate bar lollipop pastry. Sugar plum jelly-o cotton candy jelly candy carrot cake. I love pie danish gingerbread I love bonbon apple pie. Cake jelly cookie chupa chups brownie gummies. Jujubes chocolate chocolate bar chocolate bar lollipop pastry. Sugar plum jelly-o cotton candy jelly candy carrot cake.

1.6 Turbo-Diesel Engine 40MPG
Highway

1.5L Turbo Engine 31MPG
Highway

2.0L Turbo Engine 3,500LBS
Towing
Capacity

<div class="specs stacked">
	<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>

Color Swapper

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/mo

Shop Now

'15 Make Model

Trim Level

Drive it now!

$299 Down
$299/MONTH

Shop Now

'15 Make Model

Trim Level

$1,000 Bonus Cash

0% APR
72 MO

Shop Now

'15 Make Model

Trim Level

Save up to

$8,000 OFF MSRP

Shop Now

'15 Make Model

Trim Level

As Low As

$199/mo

Shop Now

'15 Make Model

Trim Level

$1000 Bonus Cash

0% APR
60 MO

Shop Now

'15 Make Model

Trim Level

General Motors

EMPLOYEE PRICING FOR THE PUBLIC

Shop Now

'15 Make Model

Trim Level

0% APR / 66 MO

No Payments for 90 Days!

Shop Now

<div class="promoBoxSection">
	<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!">Shop 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 href="#" title="Click here for a closer look at this vehicle!">See More</a>
		<a class="ctaButton red" href="#" title="Click here for a closer look at this vehicle!">Shop 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!">Shop 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!">Shop 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!">Shop 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!">Shop 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!">Shop 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!">Shop 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

Shop Now

'15 Make Model

Trim Level

Drive it now!

$299 Down
$299/MONTH

Shop Now

'15 Make Model

Trim Level

$1,000 Bonus Cash

0% APR
72 MO

Shop Now

'15 Make Model

Trim Level

Save up to

$8,000 OFF MSRP

Shop Now

<div class="promoBoxSection 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!">Shop 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!">Shop 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!">Shop 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!">Shop Now</a>
	</div>
</div>

Used Car Promo Box Section w/ Header

USED CARS

New Inventory Daily!

As Low As

$99/mo

Shop Now

USED TRUCKS

New Inventory Daily!

As Low As

$189/mo

Shop Now

USED VANS

New Inventory Daily!

As Low As

$99/mo

Shop Now

USED SUVs

New Inventory Daily!

As Low As

$189/mo

Shop Now

<div class="promoBoxSection promoHeader" 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>