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

TYPOGRAPHY

Paragraph Text Sizing

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

<p></p>

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

<p class="small"></p>

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

<p class="large"></p>

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

<p class="xlarge"></p>

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

<p class="xxlarge"></p>

Padded Paragraph

In instances where you have a single paragraph, frequently opening a page, it's a good idea to create some added separation from the surrounded elements and give a brief excerpt a little more legibility. In such cases, try the class of padded to automatically add some left & right padding!

<p class="xlarge padded">###</p>

Text Styling

The following classes can be applied to just about any element with text, spans, paragraphs, headings, lists and more. They can also be combined to create the style you're looking for!

Underline Text

<span class="underline"></span>

Uppercase Text

<span class="allCaps"></span>

Bold Text 1

<strong></strong>

Bold Text 2

<span class="bold"></span>

Red Text

<span class="red"></span>

Blue Text

<span class="blue"></span>

PAGE HEADINGS

Remember that heading tags are more than a means of styling text. You should think of the content of your page as being organized by an outline. Typical pages should have no more than two H1 headings depending on the site's heading strategy. DDC pages have one H1 tag which is already inserted (the user chosen page title), so one should not be included in your layout. Sub-topics or categories of you page should descend accordingly with H2, H3 and H4 tags. Example: Page H1: Chevy Impala - Page H2: Interior Features - H3: Infotainment Systems

H2 Heading Sizing

This is a Default H2 Heading

This is a large H2 Heading

<h2 class="large">This is a large H2 Heading</h2>

This is a Default H2 Heading

This is a xlarge H2 Heading

<h2 class="xlarge">This is a xlarge H2 Heading</h2>

This is a Default H2 Heading

This is a xxlarge H2 Heading

<h2 class="xxlarge">This is a xxlarge H2 Heading</h2>

H3/H4 Heading Sizing

*Tip The following sizes apply to H3 & H4 heading tags.

This is a Default H3 Heading

This is a large H3 Heading

<h3 class="large">This is a large H3 Heading</h3>

This is a Default H3 Heading

This is a xlarge H3 Heading

<h3 class="xlarge">This is a xlarge H3 Heading</h3>

This is a Default H3 Heading

This is a xxlarge H3 Heading

<h3 class="xxlarge">This is a xxlarge H3 Heading</h3>

Blue Heading

<h2 class="blue">Blue Heading</h2>

Red Heading

<h2 class="red">Red Heading</h2>

Dark Heading

<h2 class="dark">Dark Heading</h2>

Stripe Heading

*Tip The stripe heading works within a container of any width. You can also apply sizing, alignment and color classes to customize the look of your heading. Demonstrations below.

<h2 class="stripeHeading">Stripe Heading</h2>

Stripe Heading Centered

<h2 class="stripeHeading alignCenter">Stripe Heading</h2>

Stripe Heading xlarge

<h2 class="stripeHeading xlarge">Stripe Heading</h2>

Stripe Heading Centered xxlarge

<h2 class="stripeHeading alignCenter xxlarge">Stripe Heading</h2>

Stripe Heading White

<h2 class="stripeHeading white">Stripe Heading White</h2>

Stripe Heading White Centered xxlarge

<h2 class="stripeHeading white alignCenter xxlarge">Stripe Heading White Centered xxlarge</h2>

*Tip The following heading styles are intended to be used for specific themes or off-brand topics. Examples of its use would include Ram Country, truck bedliner/accessory pages, etc.

Stripe Heading Dark Texture

<h2 class="stripeHeading darkTexture">Stripe Heading Dark Texture</h2>

Stripe Heading Dark Texture Red Border

<h2 class="stripeHeading darkTexture redBorder">Stripe Heading Dark Texture Red Border</h2>

Stripe Heading Dark Texture Green Border

<h2 class="stripeHeading darkTexture greenBorder">Stripe Heading Dark Texture Green Border</h2>

Stripe Heading xxlarge Dark Texture Red Border

<h2 class="stripeHeading darkTexture xxlarge alignCenter redBorder">Stripe Heading Dark Texture Red Border</h2>

Shadow Heading

*Tip This heading is compatible with all sizing and styling classes. This example uses xxlarge.

<h2 class="shadowHeading xxlarge">Shadow Heading</h2>

Strike Through Heading

*Tip This heading only works for full-width headings and you should NOT use this heading for text spanning two lines. Sizing and alignment classes are not applicable.

<h2 class="strikeThrough"><span>Strike Through Heading</span></h2>

Icon Headings - Numbered

Numbered Icon Heading - Default

19Numbered Icon Heading

<h2 class="stripeHeading icon"><span>19</span>#</h2>

Numbered Icon Heading - Large

19Numbered Icon Heading

<h2 class="stripeHeading icon large"><span>19</span>#</h2>

Numbered Icon Heading - xlarge

19Numbered Icon Heading

<h2 class="stripeHeading icon xlarge"><span>19</span>#</h2>

Numbered Icon Heading - xxlarge

19Numbered Icon Heading

<h2 class="stripeHeading icon xxlarge"><span>19</span>#</h2>

Icon Headings - DDC Icon

DDC Icon Heading - Default

DDC Icon Heading

<h2 class="stripeHeading icon"><span><i class="ddc-icon ddc-icon-trade"></i></span>#</h2>

DDC Icon Heading - large

DDC Icon Heading

<h2 class="stripeHeading icon large"><span><i class="ddc-icon ddc-icon-tool-wrench-screwdriver"></i></span>DDC Icon Heading</h2>

DDC Icon Heading - xlarge

DDC Icon Heading

<h2 class="stripeHeading icon xlarge"><span><i class="ddc-icon ddc-icon-star-empty"></i></span>#</h2>

DDC Icon Heading - xxlarge

DDC Icon Heading

<h2 class="stripeHeading icon xxlarge"><span><i class="ddc-icon ddc-icon-specs-gear1"></i></span>#</h2>

Icon Headings - PNG Icon

PNG Icon Heading - Default

PNG Icon Heading

<h2 class="stripeHeading icon"><span class="image"><img alt="#" width="#" height="#" src="#" /></span>#</h2>

PNG Icon Heading - large

PNG Icon Heading

<h2 class="stripeHeading icon large"><span class="image"><img alt="#" width="#" height="#" src="#" /></span>#</h2>

PNG Icon Heading - xlarge

PNG Icon Heading

<h2 class="stripeHeading icon xlarge"><span class="image"><img alt="#" width="#" height="#" src="#" /></span>#</h2>

PNG Icon Heading - xxlarge

PNG Icon Heading

<h2 class="stripeHeading icon xxlarge"><span class="image"><img alt="#" width="#" height="#" src="#" /></span>#</h2>

LISTS

List Unstyled

List Item Number One
List Item Number Two
List Item Number Three
List Item Number Four

<ul>
	<li>List Item Number One</li>
	<li>List Item Number Two</li>
	<li>List Item Number Three</li>
	<li>List Item Number Four</li>
</ul>

List large

List Item Number One
List Item Number Two
List Item Number Three
List Item Number Four

<ul class="large">
	<li>List Item Number One</li>
	<li>List Item Number Two</li>
	<li>List Item Number Three</li>
	<li>List Item Number Four</li>
</ul>

List xlarge

List Item Number One
List Item Number Two
List Item Number Three
List Item Number Four

<ul class="xlarge">
	<li>List Item Number One</li>
	<li>List Item Number Two</li>
	<li>List Item Number Three</li>
	<li>List Item Number Four</li>
</ul>

List xxlarge

List Item Number One
List Item Number Two
List Item Number Three
List Item Number Four

<ul class="xxlarge">
	<li>List Item Number One</li>
	<li>List Item Number Two</li>
	<li>List Item Number Three</li>
	<li>List Item Number Four</li>
</ul>

checkList

List Item Number One
List Item Number Two
List Item Number Three
List Item Number Four

<ul class="checklist">
	<li>List Item Number One</li>
	<li>List Item Number Two</li>
	<li>List Item Number Three</li>
	<li>List Item Number Four</li>
</ul>

checkList large

List Item Number One
List Item Number Two
List Item Number Three
List Item Number Four

<ul class="checklist large">
	<li>List Item Number One</li>
	<li>List Item Number Two</li>
	<li>List Item Number Three</li>
	<li>List Item Number Four</li>
</ul>

checkList xlarge

List Item Number One
List Item Number Two
List Item Number Three
List Item Number Four

<ul class="checklist xlarge">
	<li>List Item Number One</li>
	<li>List Item Number Two</li>
	<li>List Item Number Three</li>
	<li>List Item Number Four</li>
</ul>

checkList xxlarge

List Item Number One
List Item Number Two
List Item Number Three
List Item Number Four

<ul class="checklist xxlarge">
	<li>List Item Number One</li>
	<li>List Item Number Two</li>
	<li>List Item Number Three</li>
	<li>List Item Number Four</li>
</ul>

checkList2

List Item Number One
List Item Number Two
List Item Number Three
List Item Number Four
List Item Number Five

<ul class="checklist2">
	<li>List Item Number One</li>
	<li>List Item Number Two</li>
	<li>List Item Number Three</li>
	<li>List Item Number Four</li>
	<li>List Item Number Five</li>
</ul>

checklist 2 large

List Item Number One
List Item Number Two
List Item Number Three
List Item Number Four
List Item Number Five

<ul class="checklist2 large">
	<li>List Item Number One</li>
	<li>List Item Number Two</li>
	<li>List Item Number Three</li>
	<li>List Item Number Four</li>
	<li>List Item Number Five</li>
</ul>

Blockquotes

Blockquote 1 with Citation

This is blockquote 1. Wafer danish liquorice cookie sweet sweet. Croissant sugar plum chocolate cake. Halvah chocolate cake cake bear claw gingerbread. Chocolate bar topping chocolate cake chocolate croissant. Topping toffee cookie. Apple pie wafer jelly-o cookie cheesecake cookie apple pie tart candy canes. Halvah bear claw candy canes. Wafer danish liquorice cookie sweet sweet. Croissant sugar plum chocolate cake. Halvah chocolate cake cake bear claw gingerbread. Chocolate bar topping chocolate cake chocolate croissant. Topping toffee cookie. Apple pie wafer jelly-o cookie cheesecake cookie apple pie tart candy canes. Halvah bear claw candy canes.
- Becky Bowers | Cedar Rapids, IA

<blockquote>
	<p></p>
	<p class="citation"></p>
</blockquote>

Blockquote 1 without Citation

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

<blockquote>
	<p></p>
</blockquote>

Blockquote 2

This is blockquote 2. Wafer danish liquorice cookie sweet sweet. Croissant sugar plum chocolate cake. Halvah chocolate cake cake bear claw gingerbread. Chocolate bar topping chocolate cake chocolate croissant. Topping toffee cookie. Apple pie wafer jelly-o cookie cheesecake cookie apple pie tart candy canes. Halvah bear claw candy canes.
- Becky Bowers | Cedar Rapids, IA

<blockquote class="two">
	<p></p>
	<p class="citation"></p>
</blockquote>

Blockquote 2 without Citation

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

<blockquote class="two">
	<p></p>
</blockquote>

Page Disclaimer

DISCLAIMER: This is a p with class of disclaimer. Wafer danish liquorice cookie sweet sweet. Croissant sugar plum chocolate cake. Halvah chocolate cake cake bear claw gingerbread. Chocolate bar topping chocolate cake chocolate croissant. Topping toffee cookie. Apple pie wafer jelly-o cookie cheesecake cookie apple pie tart candy canes. Halvah bear claw candy canes.

<p class="disclaimer"><span>DISCLAIMER:</span> </p>

Review Quotes

Review Block 1 - Five Stars

Review Block 1 adjusts accordingly to fit the quote. To customize the photo icon & star rating, simply apply the necessary classes to the corresponding div containers. By default, the male01 icon will be displayed, as well as a five star rating. By adding the class of fourStars or fiveStars to the rating div, you have the ability to change the star rating.

"Drove a hundred miles to buy my 2015 Wrangler Rubicon from Kirk Boyd at Pat McGrath Dodge/Jeep. Unlike so many of my car buying experiences, Kirk helped me quickly and fairly resulting in a very enjoyable purchase. I love my new Jeep and look forward to working with the folks at Pat McGrath again in the future. They're a class act and make you feel like they appreciate your business."

Brad Mackey

Cedar Rapids, IA

<div class="reviewBlock">
	<div class="review">
		<p> </p>
	</div>
	<div class="reviewer">
		<div class="icon male01"></div>
		<div class="reviewer1">
			<p class="name"> </p>
			<p class="location"> </p>
		</div>
		<div class="rating"></div>
	</div>
</div>

Review Block 1 - Four Stars

Brad Mackey

Cedar Rapids, IA

<div class="reviewBlock">
	<div class="review">
		<p> </p>
	</div>
	<div class="reviewer">
		<div class="icon male01"></div>
		<div class="reviewer1">
			<p class="name"> </p>
			<p class="location"> </p>
		</div>
		<div class="rating fourStars"></div>
	</div>
</div>

Review Block 1 - Light

Brad Mackey

Cedar Rapids, IA

<div class="reviewBlock light">
	<div class="review">
		<p> </p>
	</div>
	<div class="reviewer">
		<div class="icon male01"></div>
		<div class="reviewer1">
			<p class="name"> </p>
			<p class="location"> </p>
		</div>
		<div class="rating"></div>
	</div>
</div>

Review Block Customization

<div class="icon male01"></div>

<div class="icon male02"></div>

<div class="icon male03"></div>

<div class="icon male04"></div>

<div class="icon male05"></div>

<div class="icon male05"></div>

<div class="icon female01"></div>

<div class="icon female02"></div>

<div class="icon female03"></div>

<div class="icon female04"></div>

<div class="rating"></div>

<div class="rating fourStars"></div>

<div class="rating threeStars"></div>

Review Block 1 - Custom Photo Icon

Does the review you're quoting feature a photo of the user? Why not include it?! Inserting your own photo icon into Review Block 1 is easy! Simply add the following tag to the div with the class of icon: style="background-image: url('#');" and replace the hashtag with your image source. All icon images should have the following dimensions: 200px x 200px.

"What a car buying experience! Great selection, competitive pricing, and plenty of cheeky shenanigans to make my visit enjoyable! McGrath Chevyland doesn't play games. Coffee is pretty legit as well. My only complaint is the lack of fresh donuts, but I say that about most local establishments."

Brad Mackey

Cedar Rapids, IA

<div class="reviewBlock">
	<div class="review">
		<p> </p>
	</div>
	<div class="reviewer">
		<div class="icon" style="background-image: url('#');"></div>
		<div class="reviewer1">
			<p class="name"> </p>
			<p class="location"> </p>
	</div>
	<div class="rating"></div>
	</div>
</div>

Review Block 2

Review Block 2 also supports custom photo icon or the icon classes above. For a custom image, all you have to do is insert the image source inline, as demonstrated below.

Ethan Domke

Paulson Electric

"Tyler and the whole McGrath team really understand the automotive needs of our business and provide excellent customer service and high quality products. They're responsive and really do the extra mile to make vehicle purchases efficient and enjoyable. We appreciate our relationship with McGrath and will continue to purchase vehicles from the dealership."

<div class="reviewBlockTwo">
	<div class="reviewer">
		<div class="icon male01"></div>
		<div class="reviewerTitle">
		 <p class="name"> </p>
		 <p class="subHeading"> </p>
		</div>
	</div>
	<p class="review"> </p>
</div>

Review Block 2 - Custom Photo Icon

Ethan Domke

Paulson Electric

<div class="reviewBlockTwo">
	<div class="reviewer">
		<div class="icon" style="background-image: url('https://pictures.dealer.com/m/mcgrathgroup/0816/b899f76e64aec7b39523937072a194c1x.jpg');"></div>
		<div class="reviewerTitle">
			<p class="name"> </p>
			<p class="subHeading"> </p>
		</div>
	</div>
	<p class="review"> </p>
</div>