MyHCDE

HCDE Web Style Guide

General Styles

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Normal body copy

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

Two Columns

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

Make a paragraph stand out with the "lead" class

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

Marked text

You can use the mark tag to highlight text.

Blockquote options

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Horizontal Description

Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
Felis euismod semper eget lacinia
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Unordered Lists

  • Lorem ipsum dolor sit amet
  • How does a list item look when it wraps? Consectetur adipiscing elit Consectetur adipiscing elit Integer molestie lorem at massa Facilisis in pretium nisl aliquet Nulla volutpat aliquam velit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • How does a list item look when it wraps? Consectetur adipiscing elit Consectetur adipiscing elit Integer molestie lorem at massa Facilisis in pretium nisl aliquet Nulla volutpat aliquam velit Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

Striped Table

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Basic Form

Buttons







Icons for document links

It's nice to have the icon so the user knows what they are getting when they click

This is a pdf link using class="pdflink" on <a> tag

This is a word link using class="doclink" on <a> tag

This is a powerpoint link using class="doclink" on <a> tag

Tables

Table no styling
- top row <th>
Col 1 Col 2 Col 3 Col 4
Row 2 lorem ipsum dolor lorem ipsum dolor lorem ipsum dolor
Row 3 lorem ipsum dolor lorem ipsum dolor lorem ipsum dolor
Row 4 lorem ipsum dolor lorem ipsum dolor lorem ipsum dolor
Table class="basic" - top row <th>
Col 1 Col 2 Col 3 Col 4
Row 2 lorem ipsum dolor lorem ipsum dolor lorem ipsum dolor
Row 3 lorem ipsum dolor lorem ipsum dolor lorem ipsum dolor
Row 4 lorem ipsum dolor lorem ipsum dolor lorem ipsum dolor

There are a number of classes associated with the faculty directory table, that were divised by CoE to be used with specific data. The biggest difference to the basic table is that it is wider, and has tighter spacing, class= "fac_table1" also has border on bottom of row. You must put a class the header <tr> to get the purple and bold, and a class on any <th> where you want the white font.

Table class="fac_table1"
Col 1 Col 2- fac table header Col 3 Col 4
Row 2 lorem ipsum dolor lorem ipsum dolor lorem ipsum dolor
Row 3 lorem ipsum dolor lorem ipsum dolor lorem ipsum dolor
Row 4 lorem ipsum dolor lorem ipsum dolor lorem ipsum dolor
Table class="fac_table2"
Col 1 Col 2- fac table header Col 3 Col 4
Row 2 lorem ipsum dolor lorem ipsum dolor lorem ipsum dolor
Row 3 lorem ipsum dolor lorem ipsum dolor lorem ipsum dolor
Row 4 lorem ipsum dolor lorem ipsum dolor lorem ipsum dolor