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 CHILD REF v2.1.0.

Update all content previews:

Heading 1

Example Text

size: 700
font-family: mont
font-weight: 500

Swap Content Preview

Heading 2

Example Text

size: 600
font-family: mont
font-weight: 500

Swap Content Preview

Heading 3

Example Text

size: 500
font-family: mont
font-weight: 500

Swap Content Preview

Heading 4

Example Text

size: 400
font-family: mont
font-weight: 500

Swap Content Preview

Heading 5

Example Text

size: 300
font-family: mont
font-weight: 500

Swap Content Preview

Heading 6

Example Text

size: 200
font-family: mont
font-weight: 500

Swap Content Preview

Highlight

Example Text

size: 200
font-family: mont
font-weight: 300

Swap Content Preview

Body copy

Example Text

size: 300
font-family: mont
font-weight: 300

Swap Content Preview

Small copy

Example Text

size: 200
font-family: mont
font-weight: 300

Swap Content Preview

Large copy

Example Text

size: 400
font-family: mont
font-weight: 300

Swap Content Preview

Mont

Sizing scale: Default
Fontstack: 'Mont', Helvetica, sans-serif
Custom property: --tux-ref-type--font--mont
Line Height: calc(1.5ex + 0.9rem)
Weights: 400 (italic, normal)
500 (italic, normal)
700 (italic, normal, italic, normal)

Update all content previews:

Type Scale 100

Example Text

size: 100
font-family: mont

Swap Content Preview

Type Scale 200

Example Text

size: 200
font-family: mont

Swap Content Preview

Type Scale 300

Example Text

size: 300
font-family: mont

Swap Content Preview

Type Scale 400

Example Text

size: 400
font-family: mont

Swap Content Preview

Type Scale 500

Example Text

size: 500
font-family: mont

Swap Content Preview

Type Scale 600

Example Text

size: 600
font-family: mont

Swap Content Preview

Type Scale 700

Example Text

size: 700
font-family: mont

Swap Content Preview

Type Scale 800

Example Text

size: 800
font-family: mont

Swap Content Preview

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/

Palette

All registered colors in the active theme.

Risepoint Dark Green
#005641
Risepoint Light Green
#B1C77E
Risepoint Beige
#F2EAE1
Risepoint Maroon
#4E1D39
Risepoint Pink
#DC86BB
Black
#000000
White
#ffffff
Gray
#AAB2BC

Themes

Colors with a defined theme available to apply to component backgrounds.

Color

Risepoint Dark Green `#005641`

Theme

Preview

Title

Highlight Text

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

Now Offering Tuition Freeze Pay 2020 rates for all 2021

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.

Pretzels!

Brian The Traveler

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

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.

Button

This preview shows the default coloring applied to buttons when placed on different backgrounds. The different button styles were designed and built to share the same base color for the section they are in, but it is possible to apply color to specific buttons as needed to override the default with utility classes.

Faucibus mollis

Inner Heading

Maecenas faucibus mollis interdum.

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.

Cool Stats

Cookies, whenever you want

63%

The best you'll find anywhere, trust us

500

Puzzle pieces all over the floor

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

My Tile

With some text.

Video Transcript

Inner heading

Nullam id dolor id nibh ultricies vehicula ut id elit.

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>

CSS Classes - Spacing

TUX is based on a scale of fixed spacing increments to ensure a consistent look and feel across all components. Margin/padding classes can be used for all directions. The examples on this page are only for margin bottom. Other directions would look like:

Top: .u-mt#
Bottom: .u-mb#
Left: .u-ml#
Right: .u-mr#

Vertical (top and bottom) and horizontal (left and right) margin/padding can also be added using an x for horizontal and a y for vertical.

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

Typography

Example Text

Example Text

Example Text

Example Text

Example Text

Example Text

Mont

Color ADA Review

Palette

Themes

Risepoint Dark Green #005641

Title

Risepoint Light Green #B1C77E

Title

Risepoint Beige #F2EAE1

Title

Risepoint Maroon #4E1D39

Title

Black #000000

Title

White #ffffff

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

Cool Stats

My Tile

Inner heading

HTML Elements

Heading

Risepoint Dark Green `#005641`

Risepoint Light Green `#B1C77E`

Risepoint Beige `#F2EAE1`

Risepoint Maroon `#4E1D39`

Black `#000000`

White `#ffffff`