Web Style Guide
To encourage consistency and common standards across Xavier's web presence, we have made the following common styles available in the Master Style Sheet. Although not required, we strongly suggest employing these styles in your project. This style sheet is organic in manner and is subject to change when necessary.
Campusuite Users: Most of these styles are available through the Campusuite WYSIWYG editor; otherwise you can always add any of these styles through the code view.
The Master Style Sheet is also available at the following location: http://www.xavier.edu/styles/XU-Master-Style.css
Headline Styles
Heading 1 Consect etuer adipisci ngon.
Heading 2 Consect etuer adipisci ngon.
Heading 3 Consect etuer adipisci ngon.
Heading 4 Consect etuer adipisci ngon.
Heading 5 Consect etuer adipisci ngon.
Heading 6 Consect etuer adipisci ngon.
Heading 3 With class="heading_bottom_border"
Standard Web Typography
A normal paragraph of text, A normal paragraph of text, A normal paragraph of text, A normal paragraph of text, A normal paragraph of text, A normal paragraph of text, A normal paragraph of text, A normal paragraph of text, A normal paragraph of text,
A paragraph of text with class="highlight", A paragraph of text with class="highlight", A paragraph of text with class="highlight", A paragraph of text with class="highlight", A paragraph of text with class="highlight",
A paragraph of text with class="subdued", A paragraph of text with class="subdued", A paragraph of text with class="subdued", A paragraph of text with class="subdued", A paragraph of text with class="subdued",
A paragraph of text with class="error", A paragraph of text with class="error", A paragraph of text with class="error", A paragraph of text with class="error", A paragraph of text with class="error",
A paragraph of text with class="success", A paragraph of text with class="success", A paragraph of text with class="success", A paragraph of text with class="success", A paragraph of text with class="success",
A paragraph of text with class="caption", A paragraph of text with class="caption", A paragraph of text with class="caption", A paragraph of text with class="caption", A paragraph of text with class="caption",
A paragraph of text with the text with <small> tags, A paragraph of text with the text with <small> tags, A paragraph of text with the text with <small> tags, A paragraph of text with the text with <small> tags, A paragraph of text with the text with <small> tags,
A paragraph of text with the text with <strong> tags, A paragraph of text with the text with <strong> tags, A paragraph of text with the text with <strong> tags, A paragraph of text with the text with <strong> tags, A paragraph of text with the text with <strong> tags,
Classic Link Styles
Various Link Styles
For pdf with a class="pdf". Duis non nec tortor sapien. View PDF about: Link title goes here
For doc or txt with a class="doc". Duis non sapien. View Document about: Link title goes here
For excel file with a class="excel". Duis non sapien. View Document about: Link title goes here
Link with a class="morelink". Duis non nec tortor sapien. Read Moreabout: Link title goes here
For external link with a class="external". Duis non sapien. View Site about: Link title goes here
For popups link with a class="popup". Duis non sapien. More Info about: Link title goes here
For mailto link with a class="email". Duis non sapien. Contact Us
Various List Styles
- A list of links with .block class
- A list of links with .block class
- A list of links with .block class
A normal paragraph of text with a class="related" list, A normal paragraph of text with a class="related" list, A normal paragraph of text with a class="related" list, A normal paragraph of text with a class="related" list,
- An unordered list
- An unordered list
- An unordered list
- An ordered list
- An ordered list
- An ordered list
Blockquote Styles
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas metus nisi, sollicitudin ut, bibendum vitae, viverra ac, eros. Donec quis arcu. In sed nunc sit amet leo hendrerit semper. Quisque sem nulla, consequat in, malesuada in, consequat at, lacus. Phasellus tincidunt ligula in sapien. Aliquam viverra dui et lectus. Aliquam lectus. Suspendisse sed dolor sit amet libero tincidunt auctor. Praesent sed ipsum sed est dictum congue.
This is a block qoute. Maecenas metus nisi, sollicitudin ut, bibendum vitae, lacus. Phasellus tincidunt viverra ac, eros. Donec quis arcu. In sed nunc sit amet leo hendrerit semper. Quisque sem nulla, consequat in, malesuada in, consequat at, lacus. Phasellus tincidunt ligula in sapien. Aliquam viverra dui et lectus. Aliquam lectus. Suspendisse sed dolor sit amet libero tincidunt auctor. Praesent sed ipsum sed est dictum congue.
Maecenas metus nisi, sollicitudin ut, bibendum vitae, lacus. Phasellus tincidunt ligula in sapien. viverra ac, eros. Donec quis arcu. In sed nunc sit amet leo hendrerit semper. Quisque sem nulla, consequat in, malesuada in, consequat at, lacus. Phasellus tincidunt ligula in sapien. Aliquam viverra dui et lectus. Aliquam lectus. Suspendisse sed dolor sit amet libero tincidunt auctor. Praesent sed ipsum sed est dictum congue.
.quote Styles
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas metus nisi, sollicitudin ut, bibendum vitae, libero mi, mattis vitae, fringilla sed, dignissim vitae, mauris. Duis feugiat pede eget arcu. Morbi bibendum lobortis neque. Proin urna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum nibh felis, congue sed, blandit at, tincidunt sit amet, tortor. Vivamus pellentesque, felis at dapibus pulvinar, enim ipsum mattis justo, a consequat augue ac nisi. Vestibulum id nulla. Aliquam id.
This paragraph has the .quote class. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas metus nisi, malesuada in, consequat at, lacus. Phasellus tincidunt ligula in sapien. Aliquam viverra dui et lectus. Aliquam at dapibus pulvinar, enim ipsum mattis justo, a consequat nulla augue ac nisi. Vestibulum id nulla. Aliquam id lectus. Suspendisse sed dolor sit amet libero tincidunt auctor. Praesent sed ipsum sed est dictum congue.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas metus nisi, sollicitudin ut, bibendum vitae, viverra ac, eros. Donec quis arcu. In sed nunc sit amet leo hendrerit semper. Quisque sem nulla, consequat in, malesuada in, consequat at, lacus. Phasellus tincidunt ligula in sapien. Aliquam viverra dui et lectus. Aliquam libero mi, mattis vitae, fringilla sed, dignissim vitae, mauris. Duis feugiat pede eget arcu. Morbi bibendum lectus. Suspendisse sed dolor sit amet libero tincidunt auctor. Praesent sed ipsum sed est dictum congue.
This block qouote has the .quote class. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas metus nisi, viverra ac, eros. Donec quis arcu. In sed nunc sit amet leo hendrerit semper. Quisque sem nulla, consequat in, lectus. Suspendisse sed dolor sit amet libero tincidunt auctor. Praesent sed ipsum sed est dictum congue.
Useful Feature Styles
A h3 level heading inside a "featurebox" div
A normal paragraph of text within a div with a class="featurebox", A normal paragraph of text within a div with a class="featurebox", A normal paragraph of text within a div with a class="featurebox", A normal paragraph of text within a div with a class="featurebox", A normal paragraph of text within a div with a class="featurebox", A normal paragraph of text within a div with a class="featurebox" More about: A h3 level heading inside a featurebox div
15 July 2007 Headline and associate teaser
Lorem ipsum dolor sit amsum dolor sit amet, consectetet, consectetuer adipiscing elit. Donec pharetra. More about: Headline and associate teaser
29 July 2007 Second Headline and associate teaser
Lorem ipsum dolor sit amsum dolor sit amet, consectetet, consectetuer adipiscing elit. Donec pharetra. More about: Headline and associate teaser
29 July 2005 Headline and associate teaser and thumbnail
Lorem ipsum dolor sit amsum dolor sit amet, consectetet, consectetuer adipiscing elit. Lorem ipsum dolor sit amsum dolor sit amet, consectetet, consectetuer adipiscing elit. Lorem ipsum dolor sit amsum dolor sit amet, consectetet, consectetuer adipiscing elit. Donec pharetra. More about: Headline and associate teaser
29 July 2005 Headline and associate teaser and thumbnail
Lorem ipsum dolor sit amsum dolor sit amet, consectetet, consectetuer adipiscing elit. Lorem ipsum dolor sit amsum dolor sit amet, consectetet, consectetuer adipiscing elit. Lorem ipsum dolor sit amsum dolor sit amet, consectetet, consectetuer adipiscing elit. Donec pharetra. More about: Headline and associate teaser
Pagination
Suggested Table Styles
'table1' style
| Table Column 1 | Table Column 2 | Table Column 3 |
| Item 1 | Donec nec nisi | velit nunc |
| Item 2 | Donec nec nisi | id ipsum |
| Item 3 | Donec nec nisi | id ipsum |
| Item 4 | Donec nec nisi | velit nunc |
'table2' style
| Table Heading | ||
|---|---|---|
| Col 1 | Col 2 | Col 3 |
| Sub head 1 | 209385 | 45 |
| Sub head 2 | 4577 | 22 |
| Sub head 3 | 69765 | 75 |
'table2' & 'calendar' style
| October | ||||||
|---|---|---|---|---|---|---|
| S | M | T | W | T | F | S |
| 1 | 2 | 3 | 4 | 5 | 6 | 7 |
| 1 | 2 | 3 | 4 | 5 | 6 | 7 |
| 1 | 2 | 3 | 4 | 5 | 6 | 7 |
| 1 | 2 | 3 | 4 | 5 | 6 | 7 |
Footer Style