Share to Facebook Share to Twitter Share to Twitter More...

Style Guide

This style guide is for pages using this article format (example) or those that use this format without the right column (example).

Color Palette

Heading 1

Paragraph: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi et est non diam malesuada porttitor. Nam pulvinar libero vel dui ultricies faucibus. Fusce pharetra feugiat congue. Praesent ullamcorper ante eros, ac semper sapien. Phasellus ornare quam nec ligula cursus pulvinar. Sed ut sapien ligula. Fusce ut ligula ut metus malesuada consectetur sit amet eu risus. Link example

Heading 2

This is a list with the "list-blue-purple bullet" class:
<ul class="list-blue-purple-bullet">

  • Sed sit amet purus magna, non convallis elit.
  • Praesent volutpat nunc vitae leo pretium faucibus.
  • Nullam sit amet mi nec erat fringilla adipiscing at ut nibh.
  • Praesent pretium convallis dui nec ultrices. Curabitur leo

Heading 3

Another Paragraph: Maecenas blandit, erat ut lobortis ornare, augue nunc dignissim nisi, ac sagittis lacus sem nec nunc. Quisque tempor congue lectus, a feugiat enim lacinia nec. Phasellus porttitor dictum metus, non vestibulum ante bibendum ut. Sed malesuada turpis lacus, et eleifend urna. Praesent adipiscing risus ac est porta vulputate. Sed vel lacus id sapien auctor mollis a id mi. Integer aliquet sapien sed mauris interdum vitae semper leo aliquam. In hac habitasse platea dictumst. Nullam convallis porta sollicitudin. Sed molestie laoreet arcu viverra gravida. In hac habitasse platea dictumst. Aliquam porta, velit vitae fermentum euismod, velit dui vestibulum massa, nec faucibus eros ipsum eget sem. Proin sit amet neque purus, ut convallis urna.

Table Options:
<table class="light-purple-table">

The light purple table has the light blue background color as the default. To get the light purple and white colors two classes must be applied. For odd rows: <tr class="odd"> and for even rows: <tr class="even"> to get the white color.

Course Semester Credits
One One One
Two Two Two
Three Three Three
Four Four Four
Five Five Five

Table Option 2:
<table class="social-media-main-table">

No additional styles/classes are required to get this format. Apply the single class and it will appear this way.

 

butterfly.

Container around photo and caption is <div class="photo">. A paragraph tag used after the photo will have this orange background with white text and can be used as a photo caption area.

Photo should be 280px wide.
Can be taller or shorter as needed. REMEMBER to add alternate text to your images for screen readers (or if the image does not show up it tells people what it was supposed to be).