Styleguide

Typography #

Font Family

Aa

Fira Sans Condensed

h1	The Spectacle Before Us
h2	The Spectacle Before Us Was
h3	The Spectacle Before Us Was Indeed
h4	The Spectacle Before Us Was Indeed Sublime.
h5	The Spectacle Before Us Was Indeed Sublime.
h6	The Spectacle Before Us Was Indeed Sublime.

Links on a Dark Background

Consequat occaecat ullamco amet non eiusmod nostrud dolore irure incididunt est duis anim sunt officia. Fugiat velit proident aliquip nisi incididunt nostrud exercitation proident est nisi. Irure magna elit commodo anim ex veniam culpa eiusmod id nostrud sit cupidatat in veniam ad. Eiusmod consequat eu adipisicing minim anim aliquip cupidatat culpa excepteur quis. Occaecat sit eu exercitation irure Lorem incididunt nostrud.

Header and Subheader, Inline Links

The Spectacle Before Us Was

The Spectacle Before Us Was Indeed Sublime

Consequat occaecat ullamco amet non eiusmod nostrud dolore irure incididunt est duis anim sunt officia. Fugiat velit proident aliquip nisi incididunt nostrud exercitation proident est nisi. Irure magna elit commodo anim ex veniam culpa eiusmod id nostrud sit cupidatat in veniam ad. Eiusmod consequat eu adipisicing minim anim aliquip cupidatat culpa excepteur quis. Occaecat sit eu exercitation irure Lorem incididunt nostrud.

Breadcrumbs

Blockquotes #

Option 1

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

Quoted Source in Source Title

                
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-12">
          <blockquote class="quote-default">
            <p class="lead">
              Pellentesque habitant morbi tristique...
            </p>
            <footer class="blockquote-footer">
              Quoted Source in <cite title="Source Title">Source Title</cite>
            </footer>
          </blockquote>
        </div>
      </div>
    </div>

Option 2

Quoted Source - Source Title

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

                  
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-12">
        <blockquote class="quote-2">
          <h5><span class="font-weight-bold text-uppercase">Quoted Source </span> <cite title="Source Title"> - Source Title</cite></h5>
          <p class="lead">
            Pellentesque habitant morbi...
          </p>
        </blockquote>
      </div>
    </div>
  </div>

Option 3

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

Quoted Source in Source

                  
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-12">
        <blockquote class="quote-3">
          <p class="lead">
            Pellentesque habitant morbi...
          </p>
          <footer>
            Quoted Source in <cite title="Source Title">Source</cite>
          </footer>
        </blockquote>
      </div>
    </div>
  </div>

Using the `small` tag to display disclaimer text #

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

              
  <small>
    Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam...
  </small>

Callout Paragraphs #

Option 1

Default Callout Header

                  
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-12 callout-default-header"></div>
      <div class="col-md-12 callout-default py-4">
        <div class="container w-75 m-auto">
          <div class="row bg_white my-5 pb-4 justify-content-center">
            <div class="col-md-10 pt-5 ">
              <h3>Default Callout Header</h3>
              <hr class="green-border" />
              <p>
                Pellentesque habitant morbi...
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

Option 2

Callout Header Option 2

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.

                  
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-12 callout-2 justify-content-center">
        <h3>Callout Header Option 2</h3>
        <hr class="dotted-border" />
        <p>
          Pellentesque habitant morbi...
        </p>
      </div>
    </div>
  </div>

Option 3

Callout Option 3 With Featured Image

                  
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-9">
        <div class="card flex-md-row mb-4 h-md-250">
          <div class="card-body d-flex flex-column box-shadow align-items-start blue-border-left">
            <h3 class="mb-2">Callout Option 3 With Featured Image</h3>
            <p class="card-text mb-auto">
              Pellentesque habitant morbi...
            </p>
          </div>
          <img class="card-img-right flex-auto d-none d-md-block" data-src="imgs/Tuition-free.jpg" alt="Callout Option 3 Featured Image" src="/wp-content/uploads/2019/07/Tuition-free-1.jpg">
        </div>
      </div>
    </div>
  </div>

Lists #

Indented, Unstyled

Pellentesque
morbi tristique senectus et netus
Lorem
- Ipsum
- Dolor
- Sit amet
Pellentesque
morbi tristique senectus et netus

          
  <ul class="list-no-bullet-points">
    <li>Pellentesque</li>
    <li>morbi tristique senectus et netus</li>
    <li> Lorem
      <ul>
        <li>Ipsum</li>
        <li>Dolor</li>
        <li>Sit amet</li>
      </ul>
    </li>
    <li>Pellentesque</li>
    <li>morbi tristique senectus et netus</li>
  </ul>

Unstyled

Pellentesque
morbi tristique senectus et netus
Lorem
- Ipsum
- Dolor
- Sit amet
Pellentesque
morbi tristique senectus et netus

              
  <ul class="list-unstyled">
    <li>Pellentesque</li>
    <li>morbi tristique senectus et netus</li>
    <li> Lorem
      <ul>
        <li>Ipsum</li>
        <li>Dolor</li>
        <li>Sit amet</li>
      </ul>
    </li>
    <li>Pellentesque</li>
    <li>morbi tristique senectus et netus</li>
  </ul>

Square Styled

Pellentesque
morbi tristique senectus et netus
Lorem
- Ipsum
- Dolor
- Sit amet
Pellentesque
morbi tristique senectus et netus

              
  <ul class="list-square">
  <li>Pellentesque</li>
  <li>morbi tristique senectus et netus</li>
  <li> Lorem
    <ul>
      <li>Ipsum</li>
      <li>Dolor</li>
      <li>Sit amet</li>
    </ul> </li>
    <li>Pellentesque</li>
    <li>morbi tristique senectus et netus</li>
  </ul>

Triangle Styled

Pellentesque
morbi tristique senectus et netus
Lorem
- Ipsum
- Dolor
- Sit amet
Pellentesque
morbi tristique senectus et netus

              
  <ul class="list-triangle">
    <li>Pellentesque</li>
    <li>morbi tristique senectus et netus</li>
    <li>
      Lorem
        <ul>
          <li>Ipsum</li>
          <li>Dolor</li>
          <li>Sit amet</li>
        </ul>
    </li>
    <li>Pellentesque</li>
    <li>morbi tristique senectus et netus</li>
  </ul>

Standard Ordered List

Pellentesque
morbi tristique senectus et netus
Lorem
1. Ipsum
2. Dolor
3. Sit amet
Pellentesque
morbi tristique senectus et netus

              
  <ol>
    <li>Pellentesque</li>
    <li>morbi tristique senectus et netus</li>
    <li>
      Lorem
      <ol class="lower-alpha">
        <li>Ipsum</li>
        <li>Dolor</li>
        <li>Sit amet</li>
      </ol>
    </li>
    <li>Pellentesque</li>
    <li>morbi tristique senectus et netus</li>
  </ol>

Slider Images #

This element can be placed on any page using the shortcode generated by RoyalSlider, which can be accessed under RoyalSliders from the Wordpress Dashboard. It can be customized with new slides and images by navigating to the Wordpress Dashboard and selecting RoyalSlider > Edit Sliders. The HTML blocks below illustrate how these and other slider elements can be customized by selecting the "edit slide" option on each slide and then selecting the "HTML content" tab. For more information, please see the Documentation Page. The layouts include HTML blocks with the class names `.left-cta, .bottom-cta,` and `.floating-cta` respectively. Their corresponding HTML snippets can be found below, and are arranged by order of appearance in the slider element.

[RoyalSlider Error] Incorrect RoyalSlider ID or problem with query.

Left CTA HTML Structure

              
  <div class="rsContent left-cta">
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-4">
          <h3 class="display-4 white font-weight-light">Leaving the Lights On For Our Students</h3>
          <hr class="border-white" />
          <p class="lead white"> More night classes are being added for 2019! </p>
          <a href="#" class="btn btn-light rounded-0 my-3 px-3" aria-label="#">Learn More</a>
        </div>
      </div>
    </div>
  </div>

Left CTA Customizable CSS: Customize these values by placing the following code in the Page Options section on the page where the slider is being used. From there, customize the `background-color,` `box-shadow,` and `hover` values.

              
<style>
  .left-cta .container-fluid .row [class^="col-"] {
    background-color: rgba(0, 85, 166, 0.66);
  }
  .left-cta .btn-light {
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, .175) !important;
  }
  .left-cta .btn-light:hover {
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, .0) !important;
  }
</style>

Bottom CTA HTML Structure

              
  <div class="rsContent bottom-cta">
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-9 m-auto text-right">
          <h3 class="display-4 white">Online Learning</h3>
          <p class="lead white"> Because we know there's a lot of life to live </p>
          <a href="#" class="btn btn-info rounded-0 my-3 px-3" aria-label="#">Enroll Today!</a>
        </div>
      </div>
    </div>
  </div>

Bottom CTA Customizable CSS: Customize these values by placing the following code in the Page Options section on the page where the slider is being used. From there, customize the `background-color,` and `border` values.

              
<style>
  .bottom-cta {
    border-bottom: 11px solid rgb(0, 163, 97);
  }
  .bottom-cta .container-fluid {
    background-color: rgba(0, 85, 166, 0.66);
  }
</style>

Floating CTA HTML Structure

              
  <div class="rsContent floating-cta">
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-6">
          <h3 class="display-4 font-weight-bold white">APPLY FOR JOBS AND INTERNSHIPS</h3>
          <hr class="border-white" />
          <p class="lead white"> Visit the Career Services page for opportunities! </p>
        </div>
      </div>
    </div>
  </div>

Floating CTA Customizable CSS: Customize these values by placing the following code in the Page Options section on the page where the slider is being used. From there, customize the `background-color,` `outline and outline-offset,` and `border` values.

              
<style>
  .floating-cta {
    border-bottom: 11px solid rgb(254, 198, 34);
  }
  .floating-cta .container-fluid .row [class^="col-"] {
    background-color: rgba(0, 163, 97, 0.66);
    outline: 1px solid rgb(0, 163, 97);
    outline-offset: 14px;
  }
</style>

Header Images #

Jumbotron

Jumbotron Option One with Text and Gradient Background

This is a simple jumbotron-style hero unit for calling extra attention to featured content or information.

It uses utility classes for typography and spacing to organize content out within the larger container.

        
<div class="container-fluid">
  <div class="row">
    <div class="col-12 p-0">
    <div class="jumbotron rounded-0 p-0 img-jumbotron">
      <div class="jumbotron-overlay p-5">
        <div class="row ml-0 ml-md-4">
          <div class="col-xs-12 col-md-8 col-lg-5 col-xl-7">
            <h2>Jumbotron Option One with Text and Gradient Background</h2>
            <p class="lead">
            This is a simple jumbotron-style hero unit for calling extra attention to featured content or information.
            </p>
            <hr class="my-4">
            <p>
            It uses utility classes for typography and spacing to organize content out within the larger container.
            </p>
          </div>
        </div>
      </div>
    </div>
    </div>
  </div>
</div>

Add the following to the Custom Styles/Scripts section of the page's back end where this element is placed and place the path to your image between the quotation marks in `url("")` (be sure to include the `< style> < /style>` tags).

          
<style>
.img-jumbotron {
background-image: url("/wp-content/uploads/2019/05/GradCap-1024x685.jpg");
}
</style>

Hero Image

          
<div class="container-fluid">
  <div class="row">
    <div class="col-12 p-0">
      <div class="jumbotron rounded-0 hero-img"></div>
    </div>
  </div>
</div>

Add the following to the Custom Styles/Scripts section of the page's back end where this element is placed and place the path to your image between the quotation marks in `url("")`. Be sure to include the relative path, not the absolute path, i.e. /wp-content/uploads/img.jpg instead of /wp-content/uploads/img.jpg

            
  <style>
    .hero-img {
      background-image: url("");
    }
  </style>

Captions and Images #

Left-aligned caption

placeholder image for caption snippet — A left-aligned caption.

            
  <figure class="figure">
    <img src="/wp-content/uploads/2019/05/Construction-1024x681.jpg" class="figure-img img-fluid align-self-center" alt="placeholder image for caption snippet" />
    <figcaption class="figure-caption">
      A left-aligned caption.
    </figcaption>
  </figure>

Right-aligned caption

            
  <figure class="figure">
    <img src="/wp-content/uploads/2019/05/Construction-1024x681.jpg" class="figure-img img-fluid align-self-center" alt="placeholder image for caption snippet" />
    <figcaption class="figure-caption text-right">
      A right-aligned caption.
    </figcaption>
  </figure>

Center-aligned caption

            
  <figure class="figure">
    <img src="/wp-content/uploads/2019/05/Construction-1024x681.jpg" class="figure-img img-fluid align-self-center" alt="placeholder image for caption snippet" />
    <figcaption class="figure-caption text-center">
      A center-aligned caption.
    </figcaption>
  </figure>

Border Radius #

Round Image

          
  <img src="/wp-content/uploads/2019/07/round.png" class="rounded-circle" alt="circular Bootstrap utility" />

Square Image

          
  <img src="/wp-content/uploads/2019/07/square.png" class="rounded-0" alt="square Bootstrap utility" />

Accordions #

Note on using ids: Each separate id needs to be unique to its respective instance on the page. For example, if one accordion or tab group is of id "audrey01" no other ids in the code can be named the same, though numbers may be appended on subsequent ids (i.e. "audrey02").

For example, say you want two Header Only Accordions on your page. Copy the below snippet and add it to your backend, replacing the following names in the second snippet with unique names:

"accordion", #accordion
"collapseOne", #collapseOne
"headingOne"
"collapseTwo", #collapseTwo
"headingTwo"
"collapseThree", #collapseThree
"headingThree"

It's important to switch out all instances to avoid conflicts and unpredictable behavior in your accordion element. For more information on id naming conventions, see this article.

It's also important to note that when pasting code snippets that contain HTML comments into the text tab on a WYSIWYG editor, the comments will be rendered between opening and closing "p" tags automatically placed by WordPress. To fix this, simply delete the comments and resave your page.

code pasted with comments — Code pasted with comments