Components

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 - "Times New Roman" - 24px

Font Weight: 700 | Letter-Spacing: normal | Line-Height: NaNpx

Heading 2 - "Times New Roman" - 24px

Font Weight: 700 | Letter-Spacing: normal | Line-Height: NaNpx

Heading 3 - "Times New Roman" - 24px

Font Weight: 700 | Letter-Spacing: normal | Line-Height: NaNpx

Heading 4 - "Times New Roman" - 24px

Font Weight: 700 | Letter-Spacing: normal | Line-Height: NaNpx

Highlight - "Times New Roman" - 24px

Font Weight: 700 | Letter-Spacing: normal | Line-Height: NaNpx

Body Large - "Times New Roman" - 16px

Font Weight: 400 | Letter-Spacing: normal | Line-Height: NaNpx

Body Regular - "Times New Roman" - 16px

Font Weight: 400 | Letter-Spacing: normal | Line-Height: NaNpx

Body Small - "Times New Roman" - 16px

Font Weight: 400 | Letter-Spacing: normal | Line-Height: NaNpx

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

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: orange-burnt

Hex Code: #d3461e

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: blue-teal

Hex Code: #006680

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: blue-grey

Hex Code: #003c4d

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: grey-dark

Hex Code: #5b6770

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: grey-light

Hex Code: #d0d3d4

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.

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.

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

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.

Second Column

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.

Heading Text

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.

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

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.

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 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.

Here is the healthcare 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.

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 Value Text

Fact Label Text Value Text

Fact Label Text Value Text

Fact Label Text Value Text

Fact Label Text Value Text

Fact Label Text Value Text

Fact Label Text Value Text

Fact Label Text Value Text

Fact Label Text Value Text

Fact Label Text Value Text

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

You may compare up to 3 Programs at once.

Select a Program to Compare

Program*

*Required Field

Program Cost

0

Your Estimated Tuition Cost

0

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

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.

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.

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

Heading

Heading

Heading

Highlight

Paragraph

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>