CybersecurityStyle Examples
Heading Formats
This is a Heading 1
Four score and seven years ago our fathers brought forth on this continent, a new nation, conceived in Liberty, and dedicated to the proposition that all men are created equal.
This is a Heading 2
Four score and seven years ago our fathers brought forth on this continent, a new nation, conceived in Liberty, and dedicated to the proposition that all men are created equal.
This is a Heading 3
Four score and seven years ago our fathers brought forth on this continent, a new nation, conceived in Liberty, and dedicated to the proposition that all men are created equal.
This is a Heading 4
Four score and seven years ago our fathers brought forth on this continent, a new nation, conceived in Liberty, and dedicated to the proposition that all men are created equal.
This is a Heading 5
Four score and seven years ago our fathers brought forth on this continent, a new nation, conceived in Liberty, and dedicated to the proposition that all men are created equal.
This is a Heading 6
Four score and seven years ago our fathers brought forth on this continent, a new nation, conceived in Liberty, and dedicated to the proposition that all men are created equal.
Please note that the remaining examples on this page require you to manually edit the HTML markup on your pages. Depending on the page template you are using, you display the HTML view either by selecting the Text tab in the upper right corner of the editor or clicking the double-brackets (< >) icon in the editor’s toolbar.
Paragraph Formats
This is regular paragraph text. It’s the basic look for text in the body of your pages. In the page editor’s drop-down for text formatting, you would use the “paragraph” tag to achieve this basic format. Four score and seven years ago our fathers brought forth on this continent, a new nation, conceived in Liberty, and dedicated to the proposition that all men are created equal.
<p>This is regular paragraph text... </p>
This is small paragraph text. Adding the small1 class makes it a little smaller than regular paragraph text. Four score and seven years ago our fathers brought forth on this continent, a new nation, conceived in Liberty, and dedicated to the proposition that all men are created equal.
<p class="small1">This is small paragraph text... </p>
This is very small paragraph text. Adding the small2 class makes it much smaller than regular paragraph text. Four score and seven years ago our fathers brought forth on this continent, a new nation, conceived in Liberty, and dedicated to the proposition that all men are created equal.
<p class="small2">This is very small paragraph text... </p>
This is “big” paragraph text. It’s a standard HTML element you use inside of the p tag to make text larger, often as the first paragraph on a page or in a section. Four score and seven years ago our fathers brought forth on this continent, a new nation, conceived in Liberty, and dedicated to the proposition that all men are created equal.
<p><big>This is "big" paragraph text... </big></p>
This is quotation text. Four score and seven years ago our fathers brought forth on this continent, a new nation, conceived in Liberty, and dedicated to the proposition that all men are created equal.
<p class="quote">This is quotation text... </p>
This is note text. Four score and seven years ago our fathers brought forth on this continent, a new nation, conceived in Liberty, and dedicated to the proposition that all men are created equal.
<p class="note">This is note text... </p>
This is caution text. Four score and seven years ago our fathers brought forth on this continent, a new nation, conceived in Liberty, and dedicated to the proposition that all men are created equal.
<p class="caution">This is caution text... </p>
Custom Paragraph Spacing
You can adjust how much space gets added before and after paragraphs (heading or text) and divs using the margin-top- and margin-bottom- classes. This is more precise than simply adding blank paragraphs.
For example, extra spacing has been added above this paragraph by using the margin-top-32 class.
<p class="margin-top-32">For example, extra spacing has been added above this paragraph by using the <code>margin-top-32</code> class.</p>
Choose your desired spacing by adding a number to the end of the margin-top- or margin-bottom- root classes. Acceptable numbers are 0, 2, 4, 8, 12, 16, 20, 24, 28 and 32.
Shaded Boxes
It’s Easy
…to set up an isolated block of content in a shaded box like this. Use div tags to create a separate container and add the pg-box-shaded class.
Then pick from a variety of background color classes (see the full list in this help topic). For dark backgrounds, you can choose a lighter (reverse) font for better contrast (see the full list in this help topic).
<div class="pg-box-shaded bowman-field3" style="width: 50%;">... </div>
The Green Box Above
…has default margins to make it optimal for a sidebar. It also has a custom width added.
In this one, we removed the custom width and added the margin-left-0 and margin-right-0 classes so that it spans the full column.
<div class="pg-box-shaded margin-left-0 margin-right-0 regalia3">... </div>
Hyperlinks
General hyperlink formatting is discussed here.
When a link is set to open in a new browser window, you can add an icon beside it like this by using the newtab class.
<a class="newtab" href="http://www.google.com" target="_blank">like this</a>
The link-to-more classes enable you to emphasize a hyperlink, usually as a reference to more information or a continuation of content.
<p class="link-to-more right raised3"><a href="/news"><b><i>More </i></b>News Stories</a></p>
Notice how the above example includes a right class to set the link to flush right (there is also a left class).
Depending on how closely you want the link to follow its previous paragraph, you can choose from six raised classes (raised1 – raised6).
Buttons
To create the most basic button, add the pure-button class to any a element tag or button element tag:
<a class="pure-button" href="http://www.google.com" target="_blank">Go To Google</a>
From there, you can change the button to match any of the Clemson brand colors by adding one of the available button color classes. These classes use the same names as the background color classes, but with a pb- prefix.
For example, to change the color of a button to regalia, you would use the pb-regalia class.
<a class="pure-button pb-regalia" href="/">CCIT Home Page</a>
Three more classes are available to change the size of buttons: pb-large, pb-small1 and pb-small2.
These two examples use the pb-small1 and pb-small2 classes:
<p><a class="pure-button pb-orange pb-small1" href="/news">CCIT News</a></p><p> <a class="pure-button pb-bowman-field pb-small2" href="/popular-pages">CCIT Popular Pages</a></p>
Pop-Up Windows
You can create a link that opens a pop-up window either with standard HTML or a shortcode (a unique WordPress notation enclosed in brackets).
This example uses HTML by adding the popup class to an a element:
<a class="popup" href="/wp-content/uploads/2014/09/apple-touch-icon.png" data-height="300" data-width="300" data-scrollbars="0">Open Tiger Paw Pop-up</a>
This example uses a shortcode: Open Google in Pop-Up Window
[ popup url="http://www.google.com" height="300" width="1100" scrollbars="0"]Open Google in Pop-Up Window[/popup]
PDF Document Viewer
We use a WordPress plugin that turns any PDF document embedded via the Media Library into a link that launches in a viewer. Add the PDF into your page using the Add Media button to create the link:
<a href="/wp-content/uploads/2015/04/gettysburg-address.pdf">This is a PDF document.</a>
Tables
For the most basic table, begin by adding the pure-table class to your table element.
| Column Heading 1 | Column Heading 2 | Column Heading 3 |
|---|---|---|
| Cell text (or Row Heading) | Cell text | Cell text |
| Cell text (or Row Heading) | Cell text | Cell text |
| Cell text (or Row Heading) | Cell text | Cell text |
<table class="pure-table">... </table>
From there you can add three additional classes to further style your table.
| Column Heading 1 | Column Heading 2 | Column Heading 3 |
|---|---|---|
| Cell text (or Row Heading) | Cell text | Cell text |
| Cell text (or Row Heading) | Cell text | Cell text |
| Cell text (or Row Heading) | Cell text | Cell text |
<table class="pure-table pure-table-striped">... </table>
| Column Heading 1 | Column Heading 2 | Column Heading 3 |
|---|---|---|
| Cell text (or Row Heading) | Cell text | Cell text |
| Cell text (or Row Heading) | Cell text | Cell text |
| Cell text (or Row Heading) | Cell text | Cell text |
<table class="pure-table pure-table-bordered">... </table>
| Column Heading 1 | Column Heading 2 | Column Heading 3 |
|---|---|---|
| Cell text (or Row Heading) | Cell text | Cell text |
| Cell text (or Row Heading) | Cell text | Cell text |
| Cell text (or Row Heading) | Cell text | Cell text |
<table class="pure-table pure-table-horizontal">... </table>
For more details on tables, see this help topic.
Icons
Once you decide on an icon you want to use, all you need is its class name. All available icons and their class names are listed or linked to in this topic.
If the icon you wish to use is from the standard CU icon set or the CU extended icon set, add the class name to a span element:
<span class="icon-gift fontregalia"></span>
If the icon you wish to use is from the Font Awesome icon set, add the icon to an i element:
<i class="fas fa-camera-retro fontorange"></i>