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 class="no-border">Default Callout Header</h3>
              <hr class="yellow-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 class="no-border">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 mb-4 box-shadow callout-3">
      <!-- left side text -->
      <div class="col-md-8 p-0 d-flex flex-wrap align-items-center">
        <div class="p-3">
          <h3 class="mb-3">Callout Option 3 With Featured Image</h3>
          <p>
            Pellentesque habitant morbi tristique...
          </p>
        </div>
      </div>
      <!-- right side image -->
        <div class="col-md-4 p-0 d-none d-md-block callout-3-image"></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.

Apply for Financial Aid

Verify completion of the correct FAFSA.
Use 2021 Tax Return for Summer Semester. Use 2022 Tax Return for Fall Semester.

STC Federal School Code: 030665

The STC Foundation is Currently Accepting Scholarship Applications

Summer semester applications are due Thursday, April 25.
Fall semester applications are due Thursday, July 25.

For More Information, call (912) 538-3147

TEAS Testing

Ap 22 - Swainsboro, 9AM
Ap 23 - Vidalia, 9AM
Ap 24 - Vidalia, 1PM
Ap 29 - Swainsboro, 1PM
Ap 30 - Vidalia, 1PM

Schedule Now

Commercial Truck Driving_male holding radio behind steering wheel

Accepting MVRs for Summer Semester – Commercial Truck Driving

Registration for Summer begins accepting MVRs on April 22.
MVR reports must be dated no earlier than April 22.

Call (912) 538-3138 for More Information

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">Lorem ipsum dolor sit amet</h3>
        <hr class="border-white" />
        <p class="lead white">
          Eum ea cibo quaerendum, accusata dissentiet ad vis, ex eos diam dicta honestatis.
        </p>
        <a href="#" class="btn btn-secondary-yellow rounded-0 my-3 px-3" aria-label="#">
          Learn More
        </a>
      </div>
    </div>
  </div>
</div>

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 no-border">Lorem ipsum dolor sit amet</h3>
        <p class="lead white">
          Ad sit illud euripidis suscipiantur. No diam adhuc duo, an sea meis augue persequeris.
        </p>
        <a href="#" class="btn btn-info rounded-0 my-3 px-3" aria-label="#">
          Enroll Today!
        </a>
      </div>
    </div>
  </div>
</div>

Floating CTA HTML Structure

              
<div class="rsContent secondary-floating-cta">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-6">
        <h3 class="display-4 font-weight-bold white">LOREM IPSUM DOLOR</h3>
        <p class="lead white">
          Consulatu contentiones mea ex, deseruisse honestatis temporibus eum ex.
        </p>
      </div>
    </div>
  </div>
</div>

Testimonial Section Slider

This slider utilizes the existing Floating CTA styles found in the Homepage Slider, but the centered CTA has a slightly different structure.

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

Center-aligned CTA HTML Structure

            
<div class="rsContent floating-cta-center bg_lightyellow">
  <div class="container-fluid">
    <div class="row justify-content-center align-items-center">
      <div class="col-md-6 box-shadow">
        <h4 class="display-4 curlyquote white no-border">
          Southeastern taught me the skills I need to have a rewarding and successful career.
        </h4>
      </div>
    </div>
  </div>
</div>

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