Style Guide

<h1>H1 Style Heading</h1>

<h2>H2 Style Heading</h2>

      <p class="intro">This is an example of intro style text. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim exerci tation ullamcorper.</p>

      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit.</p>

      <h3>H3 Style Heading</h3>

      <div style="width: 310px" class="wp-caption alignright"><a href="http://via.placeholder.com/150"><img aria-describedby="caption-attachment-86" loading="lazy" class="wp-image-86 size-medium" src="http://via.placeholder.com/150" alt="Shutterstock 626410364" width="300" height="193" srcset="http://gc3.staging2.juiceboxint.com/app/uploads/2021/07/shutterstock_626410364-300x193.jpg 300w, http://gc3.staging2.juiceboxint.com/app/uploads/2021/07/shutterstock_626410364-1024x659.jpg 1024w, http://gc3.staging2.juiceboxint.com/app/uploads/2021/07/shutterstock_626410364-768x494.jpg 768w, http://gc3.staging2.juiceboxint.com/app/uploads/2021/07/shutterstock_626410364-1536x989.jpg 1536w, http://gc3.staging2.juiceboxint.com/app/uploads/2021/07/shutterstock_626410364-2048x1318.jpg 2048w" sizes="(max-width: 300px) 100vw, 300px"></a>

      <p id="caption-attachment-86" class="wp-caption-text">Construction workers look at plans on a table.</p></div>

      <p>Lorem ipsum dolor euismod <a href="#">this is a text link</a> tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit.

      <br>

      Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit.</p>

      <hr>

      <h4>H4 Style Heading</h4>

      <p>Lorem ipsum dolor sit amet, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit.</p>

      <blockquote>

        <p>This is an example of a block quote or callout text box. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy tincidunt dolore. </p>

      </blockquote>

      <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit.</p>

      <h5>H5 Style Heading</h5>

      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit.</p>

      <p class="blockquote">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit.</p>

      <p class="callout">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit.</p>

      <h6>H6 Style Heading</h6>

      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

      <p class="small-text">This is an example of small paragraph text. Quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit.</p>

      <hr>

      <h6>Bullet Lists</h6>

      <ul>

        <li><p>Bullet example item</p></li>

        <li><a href="#">Linked bullet example item</a></li>

        <li><p>Bullet example item</p></li>

      </ul>

      <h6>Numbered Lists</h6>

      <ol>

        <li><p>Numbered example item</p></li>

        <li><a href="#">Linked Numbered example item</a></li>

        <li><p>Numbered example item</p></li>

      </ol>

      <h6>Buttons &amp; Callout Links</h6>

      <p>

        <a class="btn" href="#">Button style</a>

      </p>

      <p>

        <a class="btn" href="#">Button style</a>

      </p>

      <p>

        <a class="t-link-callout" href="#">Callout Link</a>

      </p>

      <p>

        <a class="t-link-callout" href="#">Callout Link</a>

      </p>

      <hr>

      <h6>Table Example</h6>

      <table>

<thead>

<tr>

<th>Header Cell</th>

<th>Header Cell</th>

<th>Header Cell</th>

<th>Header Cell</th>

</tr>

</thead>

        <tbody>

          <tr>

            <td>Cell Text</td>

            <td>Cell Text</td>

            <td>Cell Text</td>

            <td>Cell Text</td>

          </tr>

          <tr>

            <td>Cell Text</td>

            <td>Cell Text</td>

            <td>Cell Text</td>

            <td>Cell Text</td>

          </tr>

          <tr>

            <td>Cell Text</td>

            <td>Cell Text</td>

            <td>Cell Text</td>

            <td>Cell Text</td>

          </tr>

          <tr>

            <td>Cell Text</td>

            <td>Cell Text</td>

            <td>Cell Text</td>

            <td>Cell Text</td>

          </tr>

        </tbody>

      </table>