This page is a living documentation page designed to list all components that are available as well as be used as a live reference to create themes and review colors. It is divided up into the following sections:

Style Guide
Font and color details for the active child theme, including ADA color combination contrast previews.
Full Width Components
Components that are designed to fill the entire window width. Often they are used as layout containers for other smaller components.
Inline Components
Components designed to be placed inside of a full-width container.
HTML Elements
Reference for plain HTML Elements and other related classes to be used with them.
Other
Additional links.

Style Guide

The current active theme is TUX WP AUM v1.0.2.

Font Styling

Below you will find font styling for various elements on the site. Resize the window to see mobile font specs.

Heading 1

Heading 2

Heading 3

Heading 4

Highlight

Body Large

Body Regular

Body Small

Color ADA Review

Below are the WCAG AA compliant color combinations for typography and background color. If you’d like to learn more vist:

https://webaim.org/articles/contrast/

Background Color: black

Hex Code: #000

Title

Highlight Text

Inline Hyperlink

Body: Lorem ipsum dolor sit amet, consectetur adipiscing 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.

Background Color: white

Hex Code: #fff

Title

Highlight Text

Inline Hyperlink

Background Color: orange-burnt

Hex Code: #d3461e

Title

Highlight Text

Inline Hyperlink

Background Color: blue-teal

Hex Code: #006680

Title

Highlight Text

Inline Hyperlink

Background Color: blue-grey

Hex Code: #003c4d

Title

Highlight Text

Inline Hyperlink

Background Color: grey-dark

Hex Code: #5b6770

Title

Highlight Text

Inline Hyperlink

Background Color: grey-light

Hex Code: #d0d3d4

Title

Highlight Text

Inline Hyperlink

Color Demo

Demo Content

These are some test components in one background.

Accordion 1

Curabitur blandit tempus porttitor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

Accordion 2 My Label

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nulla vitae elit libero, a pharetra augue.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Example Button

Etiam porta sem malesuada magna mollis euismod. Aenean lacinia bibendum nulla sed consectetur. Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur. Sed posuere consectetur est at lobortis.

Cras mattis consectetur purus sit amet fermentum. Curabitur blandit tempus porttitor.

Aenean eu leo quam. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

Vestibulum id ligula porta felis euismod semper. Maecenas sed diam eget risus varius blandit sit amet non magna.

Donec ullamcorper nulla non metus auctor fringilla. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

Donec id elit non mi porta gravida at eget metus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec ullamcorper nulla non metus auctor fringilla.

Aenean lacinia bibendum nulla sed consectetur. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod.

Example Form

Nullam id dolor id nibh ultricies vehicula ut id elit.

Full-Width Components

These components are designed to be used as top-level items in a page, spreading the full width of the screen. Most of them are containers that can have other components nested inside them.

For in-depth examples and details on properties, styling options and usage, the full component documentation on Confluence is linked below each example.

Subheading Heading Text

Aenean lacinia bibendum nulla sed consectetur.

First Column

Nullam quis risus eget urna mollis ornare vel eu leo. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Aenean lacinia bibendum nulla sed consectetur. Donec id elit non mi porta gravida at eget metus. Curabitur blandit tempus porttitor. Nulla vitae elit libero, a pharetra augue.

Sed posuere consectetur est at lobortis. Sed posuere consectetur est at lobortis. Maecenas faucibus mollis interdum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla.

First Column

Second Column

Heading Text

Curriculum Details

Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Etiam porta sem malesuada magna mollis euismod.

Set A

Credits

ABC 101 Course 1

Maecenas sed diam eget risus varius blandit sit amet non magna. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

ABC 102 Course 2

Nulla vitae elit libero, a pharetra augue. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

ABC 103 Course 3

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Etiam porta sem malesuada magna mollis euismod.

Set B

Credits

XYZ 201 Course 4

XYZ 202 Course 5

Nulla vitae elit libero, a pharetra augue. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

XYZ 203 Course 6

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Etiam porta sem malesuada magna mollis euismod.

Duration 24 months
Cost per credit $500
Credits 123

Program Benefits

List item 1
List item 2
List item 3

Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla.
– Consectetur Purus Cursus

Apply Now Get Started Read More

Tab 1
Tab 2
Tab 3

Tab 1 Heading

Etiam porta sem malesuada magna mollis euismod. Nulla vitae elit libero, a pharetra augue. Donec sed odio dui. Vestibulum id ligula porta felis euismod semper.

Tab 2 Heading

Etiam porta sem malesuada magna mollis euismod. Nulla vitae elit libero, a pharetra augue. Donec sed odio dui. Vestibulum id ligula porta felis euismod semper.

Tab 3 Heading

Etiam porta sem malesuada magna mollis euismod. Nulla vitae elit libero, a pharetra augue. Donec sed odio dui. Vestibulum id ligula porta felis euismod semper.

Healthcare
Business
Science and Technology
Social Work
Graphic Design
Maritime Law

Here is the healthcare content

Here is the business content

Here is the science and technology content

Here is the social work content

Here is the graphic design content

Here is the maritime law content

Regular Components

These components are designed to be placed within some type of full-width container components, such as a One Column or Two Column.

As with full-width components, for in-depth examples and details on properties, styling options and usage, the full component documentation on Confluence is linked below each example.

Accordion 1 Title Text

Inner heading

Nullam id dolor id nibh ultricies vehicula ut id elit.

Ligula
Ridiculus
Commodo

Accordion 2 Title Text

Inner heading

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Sed posuere consectetur est at lobortis. Nullam quis risus eget urna mollis ornare vel eu leo. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum.

Sed posuere consectetur est at lobortis. Nullam id dolor id nibh ultricies vehicula ut id elit. Nulla vitae elit libero, a pharetra augue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna.

Accordion 3 Title Text Label Text

Inner heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta sem malesuada magna mollis euismod. Vestibulum id ligula porta felis euismod semper. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id elit non mi porta gravida at eget metus. Donec id elit non mi porta gravida at eget metus. Donec id elit non mi porta gravida at eget metus.

Button

Content Card Heading

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Etiam porta sem malesuada magna mollis euismod.

Content Card Heading

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Etiam porta sem malesuada magna mollis euismod.

Content Card Heading

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Etiam porta sem malesuada magna mollis euismod.

Content Card Heading

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Etiam porta sem malesuada magna mollis euismod.

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Maecenas faucibus mollis interdum. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Etiam porta sem malesuada magna mollis euismod.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna.

Benefit	Online	On Campus
Venenatis Tristique Ornare Fringilla
Malesuada Tellus Commodo
Fusce Ligula Sit Cras Consectetur
Tellus Justo Mollis

Fact Label Text Value Text

Fact Label Text 123 suffix text

Fact Label Text 456

Fact Label Text $9,999 per year

Fact Label Text 1:2

Category 1

Tag A

Category 2

Tag A

Category 3

Tag B

Category 2

Tag B

Category 3

Tag B

Category 1

Tag C

Select a Program to Compare

Expenses

Program Required Credits

Transfer Credits (max )

No transfer credits accepted for this program

Tuition

Books

Other

Financial Aid

Federal Aid

Scholarships

Personal Gifts

Please select a program to begin.

Total Credits
Tuition
Books
Other
Total Cost
Federal Aid
Scholarships
Personal Gifts
Total Assistance
Grand Total

Request Information

Heading Text

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Select Control

Text Input

Ultricies Magna Sem

Nulla vitae elit libero, a pharetra augue. Curabitur blandit tempus porttitor. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Donec id elit non mi porta gravida at eget metus.

Small Circle

Medium Circle

Large Circle

Extra Large Circle

Small Outline Circle

Medium Outline Circle

Large Outline Circle

Extra Large Outline Circle

Etiam Sem Inceptos Malesuada

5 Min Read Business, Healthcare

Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nulla vitae elit libero, a pharetra augue. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

Example Heading

20 results

Search Google

Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

100% Online

2 Year Duration

36 Credits

Request Information

Gain the knowledge and skills you need to maximize your accountancy potential with an MBA specializing in Accounting from our university.

Vestibulum id ligula porta felis euismod semper.
Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis.
Donec id elit non mi porta gravida at eget metus.

Ligula Inceptos - Level 1 A
1. Commodo Purus - Level 2 A
2. Risus Ullamcorper - Level 2 B
Magna Mattis - Level 1 B
Tortor Fringilla - Level 1 C
Pellentesque Vehicula - Level 1 D

HTML Elements

TUX also styles standard HTML elements as well as some additional classes. Relevant Confluence documentation is linked below each example.

Heading

Highlight

Paragraph

Link

Code

<h1>Heading</h1>
<h2>Heading</h2>
<h3>Heading</h3>
<h4>Heading</h4>
<p class="highlight">Highlight</p>
<p>Paragraph</p>
<hr>
<a href="#" target="_blank">Links</a>

Ordered List
Ordered List
Ordered List

Unordered List
Unordered List
Unordered List

Featured List
Featured List
Featured List

Detailed List
Detailed List
Detailed List

Code

<ol>
	<li>Ordered Lists</li>
	<li>Ordered Lists</li>
	<li>Ordered Lists</li>
</ol>

<ul>
	<li>Unordered Lists</li>
	<li>Unordered Lists</li>
	<li>Unordered Lists</li>
</ul>

<ul class="tux-c-featured-list">
	<li>Featured List</li>
	<li>Featured List</li>
	<li>Featured List</li>
</ul>

Header 1	Header 2	Header 3
Cursus	Etiam porta	Cursus Malesuada
Cursus	Etiam porta	Cursus Malesuada

Code

<table>
	<thead>
		<tr>
			<th>Header 1</th>
			<th>Header 2</th>
			<th>Header 3</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Cursus</td>
			<td>Etiam porta</td>
			<td>Cursus Malesuada</td>
		</tr>
		<tr>
			<td>Cursus</td>
			<td>Etiam porta</td>
			<td>Cursus Malesuada</td>
		</tr>
	</tbody>
</table>

Heading 1

Heading 2

Heading 3

Heading 4

H6 heading with underline classname

Code

<h2 class="h1">Heading 1</h2>
<h2 class="h2">Heading 2</h2>
<h2 class="h3">Heading 3</h2>
<h2 class="h4">Heading 4</h2>
<h6 class="u-heading-underline">Heading 4</h6>

Large - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae justo vitae lectus tempus ullamcorper vel sit amet ante.

Normal - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris lectus tempus ullamcorper vel sit amet ante.

Small - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae justo vitae lectus tempus ullamcorper vel sit amet ante.

Highlight Text

Code

<p class="largeCopy">Large - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae justo vitae lectus tempus ullamcorper vel sit amet ante.</p>
<p>Normal - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae justo vitae lectus tempus ullamcorper vel sit amet ante.</p>
<p class="smallCopy">Small - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae justo vitae lectus tempus ullamcorper vel sit amet ante.</p>
<p class="highlight">Highlight Text</p>

200 Egestas Tristique Quam Consectetur Inceptos

300 Egestas Tristique Quam Consectetur Inceptos

400 Egestas Tristique Quam Consectetur Inceptos

500 Egestas Tristique Quam Consectetur Inceptos

600 Egestas Tristique Quam Consectetur Inceptos

700 Egestas Tristique Quam Consectetur Inceptos

800 Egestas Tristique Quam Consectetur Inceptos

Code

<h2 class="u-f200">200 Egestas Tristique Quam Consectetur Inceptos</h2>
<h2 class="u-f300">300 Egestas Tristique Quam Consectetur Inceptos</h2>
<h2 class="u-f400">400 Egestas Tristique Quam Consectetur Inceptos</h2>
<h2 class="u-f500">500 Egestas Tristique Quam Consectetur Inceptos</h2>
<h2 class="u-f600">600 Egestas Tristique Quam Consectetur Inceptos</h2>
<h2 class="u-f700">700 Egestas Tristique Quam Consectetur Inceptos</h2>
<h2 class="u-f800">800 Egestas Tristique Quam Consectetur Inceptos</h2>

This has a margin bottom of 0px

This has a margin bottom of 16px

This has a margin bottom of 24px

This has a margin bottom of 36px

This has a margin bottom of 48px

This has a margin bottom of 60px

This has a margin bottom of 100px

This has a margin bottom of auto

This has a vertical margin of 16px

This has a horizontal margin of 16px

Code

<p class="u-mb0">This has a margin bottom of 0px</p> 
<p class="u-mb16">This has a margin bottom of 16px</p> 
<p class="u-mb24">This has a margin bottom of 24px</p> 
<p class="u-mb36">This has a margin bottom of 36px</p> 
<p class="u-mb48">This has a margin bottom of 48px</p> 
<p class="u-mb60">This has a margin bottom of 60px</p> 
<p class="u-mb100">This has a margin bottom of 100px</p> 
<p class="u-mba">This has a margin bottom of auto</p>
<p class="u-my16">This has a vertical margin of 16px</p>
<p class="u-mx16">This has a horizontal margin of 16px</p>

Style Guide

Font Styling

Heading 1

Heading 2

Heading 3

Heading 4

Highlight

Color ADA Review

Background Color: black

Hex Code: #000

Title

Background Color: white

Hex Code: #fff

Title

Background Color: orange-burnt

Hex Code: #d3461e

Title

Background Color: blue-teal

Hex Code: #006680

Title

Background Color: blue-grey

Hex Code: #003c4d

Title

Background Color: grey-dark

Hex Code: #5b6770

Title

Background Color: grey-light

Hex Code: #d0d3d4

Title

Demo Content

Ornare Dapibus Parturient

Adipiscing Amet

Fusce Fermentum Tristique

Example Form

Full-Width Components

Subheading Heading Text

First Column

First Column

Second Column

Heading Text

Curriculum Details

Set A

Set B

Program Benefits

Tab 1 Heading

Tab 2 Heading

Tab 3 Heading

Regular Components

Inner heading

Inner heading

Inner heading

Inner Heading

Vehicula

Consectetur

Vulputate

Sem Magna

Ligula

Ligula

Filter Items

Filter Items

Elit Ornare

Malesuada Vehicula

Mattis Lorem

Ridiculus Inceptos

Expenses

Financial Aid

Heading Text

Ultricies Magna Sem

Etiam Sem Inceptos Malesuada

Example Heading

Card 1

Card 2

Card 3

Card 4

Card 5

Card 1

Card 2

Card 3

Card 4

Card 5