Styleguide

This styleguide defines styling for base html elemenst and reusable components.


Headings

Heading font sizes will be defined throught utility classes or class names in design components. This is so heading tags can be chosen and modified for SEO purposes without impacting design.

h1. Heading

h2. Heading

h3. Heading

h4. Heading

h5. Heading
h6. Heading

    <h1>h1. Heading</h1>
    <h2>h2. Heading</h2>
    <h3>h3. Heading</h3>
    <h4>h4. Heading</h4>
    <h5>h5. Heading</h5>
    <h6>h6. Heading</h6>
  

Headings - Rich Text Editor

Apply heading font sizes for sections managed through a wysiwyg editor. Apply the 'rte' (rich text editor) class to regions that will redner this markup. For an easier client editing experience, we do not want to introduce the need of modifier classes.

h1. Heading

h2. Heading

h3. Heading

h4. Heading

h5. Heading
h6. Heading

    <div class="rte">
      <h1>h1. Heading</h1>
      <h2>h2. Heading</h2>
      <h3>h3. Heading</h3>
      <h4>h4. Heading</h4>
      <h5>h5. Heading</h5>
      <h6>h6. Heading</h6>
    </div>
  

Headings - Utility Classes

Option to use utility classes to apply heading styles that don't align with the sematic heading level.

h1. Heading

h2. Heading

h3. Heading

h4. Heading

h5. Heading

h6. Heading


    <div>
      <h1 class="h1">h1. Heading</h1>
      <h1 class="h2">h2. Heading</h1>
      <h1 class="h3">h3. Heading</h1>
      <h1 class="h4">h4. Heading</h1>
      <h1 class="h5">h5. Heading</h1>
      <h1 class="h6">h6. Heading</h1>
    </div>
  

Paragraph

Lorem ipsum dolor sit amet, test link adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.

Lorem ipsum dolor sit amet, emphasis consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.


    <p>Lorem ipsum dolor sit amet, <a href="#" title="test link">test link</a> adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.</p>

    <p>Lorem ipsum dolor sit amet, <em>emphasis</em> consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.</p>
  

Paragraph - Rich Text Editor

Lorem ipsum dolor sit amet, test link adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.

Lorem ipsum dolor sit amet, emphasis consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.


    <div class="rte">
      <p>Lorem ipsum dolor sit amet, <a href="#" title="test link">test link</a> adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.</p>

      <p>Lorem ipsum dolor sit amet, <em>emphasis</em> consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.</p>
    </div>
  

Paragraph - Utility Classes

Lorem ipsum dolor sit amet, emphasis consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.

    <div class="p">Lorem ipsum dolor sit amet, <em>emphasis</em> consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.</div>
  

Buttons


    <a href="#" class="button">Button Default</a>
    <a href="#" class="button button--wide">Button Wide</a>
    <a href="#" class="button button--slim">Button Slim</a>

    <a href="#" class="button button--small">Button Small</a>
    <a href="#" class="button button--large">Button Large</a>

    <a href="#" class="button button--secondary">Button Secondary</a>
    <a href="#" class="button button--secondary button--small">Button Secondary + Button Small</a>
  

List Types

Definition List

Definition List Title
This is a definition list division.
Definition List Title
This is a definition list division.


Ordered List

  1. List Item 1
  2. List Item 2
  3. List Item 3


Unordered List

  • List Item 1
  • List Item 2
  • List Item 3


    // Definition List
    <dl class="list--definition">
      <dt>Definition List Title</dt>
      <dd>This is a definition list division.</dd>
      <dt>Definition List Title</dt>
      <dd>This is a definition list division.</dd>
    </dl>

    // Ordered List
    <ol class="list--number">
      <li>List Item 1</li>
      <li>List Item 2</li>
      <li>List Item 3</li>
    </ol>

    // Unordered List
    <ul class="list--bullet">
      <li>List Item 1</li>
      <li>List Item 2</li>
      <li>List Item 3</li>
    </ul>

  

Table

Order ID Billing Date Total Details
1232434 September 23rd 2018 $29.99 View Details
1232434 September 23rd 2018 $29.99 View Details

    <table>
      <thead>
        <tr>
          <th>Order ID</th>
          <th>Billing Date</th>
          <th>Total</th>
          <th>Details</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1232434</td>
          <td>September 23rd 2018</td>
          <td>$29.99</td>
          <td><a href="#">View Details</a></td>
        </tr>
        <tr>
          <td>1232434</td>
          <td>September 23rd 2018</td>
          <td>$29.99</td>
          <td><a href="#">View Details</a></td>
        </tr>
      </tbody>
    </table>
  

Data Table List

  • Order ID
    Billing Date
    Total
    Details
  • 235345334
    September 23rd 2018
    $29.99
  • 235345334
    September 23rd 2018
    $29.99

    <ul class="data-table">
      <li class="data-table__header">
        <div>Order ID</div>
        <div>Billing Date</div>
        <div>Total</div>
        <div>Details</div>
      </li>
      <li>
        <div data-th="Order ID">235345334</div>
        <div data-th="Billing Date">September 23rd 2018</div>
        <div data-th="Total">$29.99</div>
        <div data-th="Details"><a href="#">View Details</a></div>
      </li>
      <li>
        <div data-th="Order ID">235345334</div>
        <div data-th="Billing Date">September 23rd 2018</div>
        <div data-th="Total">$29.99</div>
        <div data-th="Details"><a href="#">View Details</a></div>
      </li>
    </ul>
  

Text Fields


    <form>
      <div>
        <input type="text" id="text_field" placeholder="Text field with placeholder text...">
      </div>

      <div class="form-item" data-form-item="">
        <input type="text" id="text_field_2">
        <label for="text_field_2">Text Field</label>
      </div>

      <div class="form-item" data-form-item="">
        <input type="text" id="text_field_3" value="Value Here">
        <label for="text_field_3">Text Field with Value</label>
      </div>

      <div class="form-item" data-form-item="">
        <textarea id="text_area" rows="6"></textarea>
        <label for="text_area">Text Area</label>
      </div>

      <div class="form-item" data-form-item="">
        <input type="password" name="password">
        <label for="password">Password</label>
      </div>
    </form>
  

Select Lists


    <form>
      <div class="form-item">
        <label for="select_element">Select Element</label>
        <select name="select_element">
          <option value="1">Option 1</option>
          <option value="2">Option 2</option>
          <option value="3">Option 3</option>
        </select>
      </div>
    </form>
  

Radios


    <form>
      <div class="form-item">
        <label for="radio_buttons">Radio Buttons</label>
        <input type="radio" class="radio" name="radio_button" value="radio_1" id="radio_1"><label for="radio_1">Radio 1</label>
        <input type="radio" class="radio" name="radio_button" value="radio_2" id="radio_2"><label for="radio_2">Radio 2</label>
        <input type="radio" class="radio" name="radio_button" value="radio_3" id="radio_3"><label for="radio_3">Radio 3</label>
      </div>
    </form>
  

Checkboxes


    <form>
      <div class="form-item">
        <label for="checkboxes">Checkboxes</label>
        <input type="checkbox" class="checkbox" name="checkboxes" value="check_1" id="check_1"><label for="check_1">Checkbox 1</label>
        <input type="checkbox" class="checkbox" name="checkboxes" value="check_2" id="check_2"><label for="check_2">Checkbox 2</label>
        <input type="checkbox" class="checkbox" name="checkboxes" value="check_3" id="check_3"><label for="check_3">Checkbox 3</label>
      </div>
    </form>
  

Accordion


    <ul class="accordion" data-accordion="">
      <li class="accordion__tab">
        <button aria-expanded="false" class="accordion__heading" type="button" data-accordion-button="">Features</button>
        <div aria-hidden="true" class="accordion__content" data-accordion-content="">
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui.</p>
        </div>
      </li>
      <li class="accordion__tab">
        <button aria-expanded="false" class="accordion__heading" type="button" data-accordion-button="">Uses</button>
        <div aria-hidden="true" class="accordion__content" data-accordion-content="">
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui.</p>
        </div>
      </li>
    </ul>
  

Modal


    <button class="button" type="button" data-modal-target="#modal-request-quote">Open Modal</button>
  

Hero

Hero Image

Massa quis luctus fermeo

Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam


    <section class="hero">
      <picture class="hero__image"><source type="image/avif" srcset="/styleguide/18jBmSxCcQ-2880.avif 2880w"><source type="image/webp" srcset="/styleguide/18jBmSxCcQ-2880.webp 2880w"><img src="/styleguide/18jBmSxCcQ-2880.jpeg" alt="Hero Image" width="2880" height="1360"></picture>
      <div class="hero__content">
        <div class="container">
          <h1 class="hero__heading">Massa quis luctus fermeo</h1>
          <p class="hero__text">Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam</p>
          <button class="button" type="button" data-modal-target="#modal-request-quote">Request a Quote</button>
        </div>
      </div>
    </section>