Style guide

This is a level 2 header

This is an intro paragraph. This paragraph should be fairly short, and it should be used to create interest in the copy below

Placeholder image — This is a right floated image with a caption.

Here you have your normal copy paragraphs. This is an example of a link 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. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 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 cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

This is a level 3 header

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.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aliquam tincidunt mauris eu risus.
Vestibulum auctor dapibus neque.
Vestibulum auctor dapibus neque. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam tincidunt mauris eu risus.

Color palette

Core colors

Teal blue
#11769a

Light teal blue
#439ab9

VCU Gold
#ffba00

Background colors

Pale blue
#f1f6f8

Branding blue
#006589

Body outline
2px
#9ac8d8

Accent colors and icon background gradients

Green
#428646

Branding blue
#61ab67

Dark blue
#395bae

Blue
#5385c7

Purple
#645caf

Red
#c74a4a

Light red
#d96d6c

Orange
#c04a01

Light orange
#d68f66

Typography

VCU Autism Center for Excellence logo:

VCU Autism Center for Excellence

Google Web font (https://www.google.com/fonts)
CSS: font-family: 'Roboto Condensed', Tahoma, Arial, sans-serif;
font-weight: 400;

Body typography

Open Sans

Google Web font (https://www.google.com/fonts)
CSS: font-family: 'Open Sans', Tahoma, Arial, sans-serif;
font-weight: 300; | font-weight: 400; | font-weight: 600;

Light — font-weight: 300; There was a ship that sailed all on the lowland sea And the name of the ship was the Golden Vanity And we feared she would be taken by the Spanish enemy As she sailed upon the lowland, lowland, lowland Sailed upon the lowland sea.

Regular — font-weight: 400; Then up spoke our cabinboy and boldly out spoke he And he said to our captain “What will you give to me If I swim along the side of the Spanish enemy And I sink her in the lowland sea?”

Bold — font-weight: 600; Then the boy he made him ready and overboard sprang he And he swam to the side of the Spanish enemy With his brace and auger in her side he bored holes three And sank he her in the lowland sea.

Page Title <h1>

Level 2 header <h2>

Level 3 header <h3>

Level 4 header <h4>

Level 5 header <h5>

Level 6 header <h6>

Lists

Enhancing the knowledge of paraprofessionals related to the characteristics and learning needs of students with autism spectrum disorder
Building skills related to implementing teacher directed instruction and behavioral support strategies
Assisting local educational agencies in providing teachers and administrators with guidance on the supervisory relationship with paraprofessionals

Blockquotes

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

Breadcrumbs

Use breadcrumbs directly below the Page Title <h1> to help website users understand where they are as they navigate around.

Layout

Two column layout

<div class="row">
  <div class="columns six">
     [Content here}
  </div>

  <div class="columns six">
     [Content here}
  </div>
</div>

Header three

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Three column layout

<div class="row">
  <div class="columns four">
     [Content here}
  </div>

  <div class="columns four">
     [Content here}
  </div>

  <div class="columns four">
     [Content here}
  </div>
</div>

Header three

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Four column layout

<div class="row">
  <div class="columns three">
     [Content here}
  </div>

  <div class="columns three">
     [Content here}
  </div>

  <div class="columns three">
     [Content here}
  </div>

  <div class="columns three">
     [Content here}
  </div>
</div>

Header three

Aliquam tincidunt mauris eu risus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Header three

Newspaper columns (two)

*Note: This layout allows you to have fluid content that is disolayed in two columns. This layout will display as a single column in legacy browsers.

<div class="two-column">
[Content here}
</div>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.

Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl. Suspendisse mauris. Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula. Integer adipiscing risus a sem. Nullam quis massa sit amet nibh viverra malesuada. Nunc sem lacus, accumsan quis, faucibus non, congue vel, arcu. Ut scelerisque hendrerit tellus. Integer sagittis. Vivamus a mauris eget arcu gravida tristique. Nunc iaculis mi in ante. Vivamus imperdiet nibh feugiat est.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 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 cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Form elements

Tables

Tables should be used sparingly in responsive websites, and they should be used for tabular data only. Here are three possibilities for tables in a responsive website:

A standard table that is not treated differently for responsiveness

<table>
  <thead>
    <tr>
      <th>[Content here}</th>
      <th>[Content here}</th>
      <th>[Content here}</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>[Content here}</td>
      <td>[Content here}</td>
      <td>[Content here}</td>
    </tr>
  </tbody>
</table>

Event	Date/time	Location
Lorem ipsum dolor sit amet, consectetur adipiscing elit	July 5, 2015 2 p.m.	University Student Commons, Virginia Rooms
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris	July 10, 2015 5 p.m.	University Student Commons, Virginia Rooms
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua	July 12, 2015 2 p.m.	University Student Commons, Virginia Rooms

A responsive table that has a class of "stacked-table". This table’s cells will stack vertically at 767px wide.

<table class="stacked-table">
  <thead>
    <tr>
      <th>[Content here}</th>
      <th>[Content here}</th>
      <th>[Content here}</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>[Content here}</td>
      <td>[Content here}</td>
      <td>[Content here}</td>
    </tr>
  </tbody>
</table>

Event	Date/time	Location
Lorem ipsum dolor sit amet, consectetur adipiscing elit	July 5, 2015 2 p.m.	University Student Commons, Virginia Rooms
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris	July 10, 2015 5 p.m.	University Student Commons, Virginia Rooms
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua	July 12, 2015 2 p.m.	University Student Commons, Virginia Rooms

A responsive table that has a class of "responsive". This table will create two horizontally scollable areas at 767px wide.

<table class="responsive">
  <thead>
    <tr>
      <th>[Content here}</th>
      <th>[Content here}</th>
      <th>[Content here}</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>[Content here}</td>
      <td>[Content here}</td>
      <td>[Content here}</td>
    </tr>
  </tbody>
</table>

Event	Date/time	Location
Lorem ipsum dolor sit amet, consectetur adipiscing elit	July 5, 2015 2 p.m.	University Student Commons, Virginia Rooms
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris	July 10, 2015 5 p.m.	University Student Commons, Virginia Rooms
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua	July 12, 2015 2 p.m.	University Student Commons, Virginia Rooms

Buttons

Core buttons

Blue, class="blue"

Blue

Gold, class="gold"

Gold

White, class="white"

White

Variant buttons

Green, class="green"

Green

Teal blue, class="teal"

Teal

Dark blue, class="dkblue"

Dark blue

Purple, class="purple"

Purple

Red, class="red"

Red

Orange, class="orange"

Orange

Button sizes

Mini Small Default Large X large

Call out boxes

Icon box

<aside class="iconbox [color]">
  [img]
  <p>[Content]</p>
  <a href="#" class="button">[Button text]</a>
</aside>

Quick links

<aside class="quicklinks [color]">
  <h3>[Header]</h3>
  <p><a href="#">[Content]</a></p>
  <p><a href="#">[Content]</a></p>
</aside>