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>

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 available sizing and color classes. This example uses xxlarge.

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

Strike Through Heading

*Tip This style has been removed from mobile and is replaced by the shadow heading. All strike through headings used on desktop will translate to shadow headings by default.

<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

Auto BatteryPNG Icon Heading

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

PNG Icon Heading - large

Smart PhonePNG Icon Heading

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

PNG Icon Heading - xlarge

Gas PumpPNG Icon Heading

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

PNG Icon Heading - xxlarge

Car WheelPNG 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 with 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.

- Becky Bowers | Cedar Rapids, IA

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

Blockquote 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

"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 fourStars"></div>
	</div>
</div>

Review Block 1 - Light

"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 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>
Five Stars
<div class="rating"></div>
Four Stars
<div class="rating fourStars"></div>
Three Stars
<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! Pat McGrat 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

"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" 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>