GCR Style Guide

Article Component Rich Text Guide


Full Container Width Image:
<div class='article__image--fullwidth'>
  <img src='...'/>
</div>

Add Responsive Video:
<div class='fv__videoWrapper'>
  ...youtube iframe embed code...
</div>
Body copy:
<p>...content...</p>

Lorem ipsum dolor sit amet. consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cilium dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

Left aligned image:
<div class='article__image--left'>
  <img src='...'/>
</div>

Our technicians will then interpret the assessment data to make safety-focused preventive service recommendations. These recommendations help to avoid downtime due to unexpected and costly repairs, while also improving fuel efficiency and your bottom line. I should say this again; our technicians will then interpret the assessment data to make safety-focused preventive service recommendations. These recommendations help to avoid downtime due to unexpected and costly repairs, while also improving fuel efficiency and your bottom line. Lorem ipsum dolor sit amet. consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aqua.

Normal Link
<a href='...'>Link Text</a>

Talk to your local GCR Representative to learn more.

H4 Title
<h4> ...content... </h4>

H4 Title Example

Lorem ipsum dolor sit amet. consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cilium dolore eu fugiat nulla pariatur.

Right aligned image:
<div class='article__image--right'>
  <img src='...'/>
</div>

Our technicians will then interpret the assessment data to make safety-focused preventive service recommendations. These recommendations help to avoid downtime due to unexpected and costly repairs, while also improving fuel efficiency and your bottom line. I should say this again; our technicians will then interpret the assessment data to make safety-focused preventive service recommendations. These recommendations help to avoid downtime due to unexpected and costly repairs, while also improving fuel efficiency and your bottom line. Lorem ipsum dolor sit amet. consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aqua.

External Link
<a href='...' class='article__externalLink' >Link Text</a>

Talk to your local GCR Representative to learn more.

Full Width Blockquote
<blockquote> ...content... </blockquote>
"Our technicians will then interpret the assessment data to make safety-focused preventive service recommendations."
Blockquote Right
<div class='article__blockquote--right'> ...content... </div>
"Lorem ipsum dolor sit amet, consectetur adipisicing elit."
Blockquote Left
<div class='article__blockquote--left'> ...content... </div>
"Lorem ipsum dolor sit amet, consectetur adipisicing elit."
Button
<a href='...' class='article__button' >Link Text</a>
BUTTON COPY
Bulleted List
<ul>
  <li>...list item text...</li>
  <li>...list item text...</li>
  <li>...list item text...</li>
</ul>
  • Lorem ipsum dolor sit amet.
  • Consectetur adipisicing elit.
  • Lorem ipsum dolor sit amet.
Numbered List
<ol>
  <li>...list item text...</li>
  <li>...list item text...</li>
  <li>...list item text...</li>
</ol>
  1. Lorem ipsum dolor sit amet.
  2. Consectetur adipisicing elit.
  3. Lorem ipsum dolor sit amet.