TUX 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
The current active theme is TUX WP CHILD REF v2.0.0.
Typography
Update all content previews:
Heading 1
Example Text
- size
700- font-family
public-sans- font-weight
200
Computed
Swap Content Preview
Heading 2
Example Text
- size
600- font-family
public-sans- font-weight
900
Computed
Swap Content Preview
Heading 3
Example Text
- size
500- font-family
public-sans- font-weight
700
Computed
Swap Content Preview
Heading 4
Example Text
- size
400- font-family
public-sans- font-weight
700
Computed
Swap Content Preview
Heading 5
Example Text
- size
300- font-family
public-sans- font-weight
700
Computed
Swap Content Preview
Heading 6
Example Text
- size
200- font-family
public-sans- font-weight
700
Computed
Swap Content Preview
Highlight
Example Text
- size
200- font-family
public-sans
Computed
Swap Content Preview
Body copy
Example Text
- size
300- font-family
public-sans
Computed
Swap Content Preview
Small copy
Example Text
- size
200- font-family
public-sans
Computed
Swap Content Preview
Large copy
Example Text
- size
400- font-family
public-sans
Computed
Swap Content Preview
Public Sans
- Sizing scale
- Default
- Fontstack
'Public Sans', Helvetica, sans-serif- Custom property
--tux-ref-type--font--public-sans- Line Height
calc(1.5ex + 0.9rem)- Weights
100-900(italic, normal)
Update all content previews:
Type Scale 100
Example Text
- size
100- font-family
public-sans
Computed
Swap Content Preview
Type Scale 200
Example Text
- size
200- font-family
public-sans
Computed
Swap Content Preview
Type Scale 300
Example Text
- size
300- font-family
public-sans
Computed
Swap Content Preview
Type Scale 400
Example Text
- size
400- font-family
public-sans
Computed
Swap Content Preview
Type Scale 500
Example Text
- size
500- font-family
public-sans
Computed
Swap Content Preview
Type Scale 600
Example Text
- size
600- font-family
public-sans
Computed
Swap Content Preview
Type Scale 700
Example Text
- size
700- font-family
public-sans
Computed
Swap Content Preview
Type Scale 800
Example Text
- size
800- font-family
public-sans
Computed
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.
- Black
#010428 - Blue
#104edc - Sky Blue
#5adbff - Yellow
#ffd447 - Coral
#e06464 - Tea Green
#d5fdd5 - Gray Light
#edeff6 - White
#fff
Themes
Colors with a defined theme available to apply to component backgrounds.
Color
Black #010428
Theme
on-background: white
on-background: white
on-surface: white
on-surface: white
on-primary: black
on-primary: black
on-secondary: black
on-secondary: black
Preview
Title
Highlight Text
Inline Hyperlink
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
Blue #104edc
Theme
on-background: white
on-background: white
on-surface: white
on-surface: white
on-primary: black
on-primary: black
on-secondary: black
on-secondary: black
Preview
Title
Highlight Text
Inline Hyperlink
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
Sky Blue #5adbff
Theme
on-background: black
on-background: black
on-surface: black
on-surface: black
on-secondary: white
on-secondary: white
Preview
Title
Highlight Text
Inline Hyperlink
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
Yellow #ffd447
Theme
on-background: black
on-background: black
on-surface: black
on-surface: black
on-primary: white
on-primary: white
Preview
Title
Highlight Text
Inline Hyperlink
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
Coral #e06464
Theme
on-background: black
on-background: black
on-surface: black
on-surface: black
Preview
Title
Highlight Text
Inline Hyperlink
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
Tea Green #d5fdd5
Theme
on-background: black
on-background: black
on-surface: black
on-surface: black
on-primary: white
on-primary: white
on-secondary: black
on-secondary: black
Preview
Title
Highlight Text
Inline Hyperlink
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
Gray Light #edeff6
Theme
on-background: black
on-background: black
on-surface: black
on-surface: black
on-primary: white
on-primary: white
Preview
Title
Highlight Text
Inline Hyperlink
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
White #fff
Theme
on-background: black
on-background: black
on-surface: black
on-surface: black
on-primary: white
on-primary: white
Preview
Title
Highlight Text
Inline Hyperlink
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.
Curabitur blandit tempus porttitor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
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 ButtonEtiam 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.
Ornare Dapibus Parturient
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.
Adipiscing Amet
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 Fermentum Tristique
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.
Page Header
Heading Text
Hero
Subheading Heading Text
Aenean lacinia bibendum nulla sed consectetur.
Wide Image
Dialog Box
Inner Content
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nulla vitae elit libero, a pharetra augue. Nulla vitae elit libero, a pharetra augue. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
One Column
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.
Two Columns
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.
Two Columns - Media
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.
Course List
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
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.
Nulla vitae elit libero, a pharetra augue. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
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
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.
Nulla vitae elit libero, a pharetra augue. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
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.
Programmatic Facts
- Duration 24 months
- Cost per credit $500
- Credits 123
Quote
Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla.
– Consectetur Purus Cursus
Snipe
Pay 2020 rates for all 2021
Sticky CTA
Tabs
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.
Tabs - Cards Extended
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
Inner heading
Nullam id dolor id nibh ultricies vehicula ut id elit.
- Ligula
- Ridiculus
- Commodo
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.
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.
ButtonAccordion - Card
Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Etiam porta sem malesuada magna mollis euismod.
Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Etiam porta sem malesuada magna mollis euismod.
Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Etiam porta sem malesuada magna mollis euismod.
Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Etiam porta sem malesuada magna mollis euismod.
Action Item
Avatar
Badge
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
Bio
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.
Callout
Card
Faucibus mollis
Inner Heading
Maecenas faucibus mollis interdum.
Chip
Comparison Table
| Benefit | Online | On Campus |
|---|---|---|
| Venenatis Tristique Ornare Fringilla | ||
| Malesuada Tellus Commodo | ||
| Fusce Ligula Sit Cras Consectetur | ||
| Tellus Justo Mollis |
Fact
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 - Vertical
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 - Large Value
Fact Label Text 123 suffix text
Fact Label Text 456
Fact Label Text $9,999 per year
Fact Label Text 1:2
Feedback
Filter
Vehicula
Category 1
Tag A
Consectetur
Category 2
Tag A
Vulputate
Category 3
Tag B
Sem Magna
Category 2
Tag B
Ligula
Category 3
Tag B
Ligula
Category 1
Tag C
Program Finder
x results
One / Business
Elit Ornare
Aenean lacinia bibendum nulla sed consectetur.
One / Education
Malesuada Vehicula
Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
Two / Education
Mattis Lorem
Donec ullamcorper nulla non metus auctor fringilla.
Two / Business
Ridiculus Inceptos
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Financial Calculator
Form
Heading Text
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Icon Content
Icon
Small Circle
Medium Circle
Large Circle
Extra Large Circle
Small Outline Circle
Medium Outline Circle
Large Outline Circle
Extra Large Outline Circle
Preview
Etiam Sem Inceptos Malesuada
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.
Read More
Section Header
Slider
Slider - Stretch
Spotlight CTA
Stats
Cool Stats
Cookies, whenever you want
The best you'll find anywhere, trust us
Puzzle pieces all over the floor
Summary
100% Online
2 Year Duration
36 Credits
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.
Table of Contents
Tile
My Tile
With some text.
Popover
Video
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.
Typography
<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>
Lists
- Ordered List
- Ordered List
- Ordered List
- Unordered List
- Unordered List
- Unordered List
- Featured List
- Featured List
- Featured List
- Detailed List
- Detailed List
- Detailed List
<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>
Tables
| Header 1 | Header 2 | Header 3 |
|---|---|---|
| Cursus | Etiam porta | Cursus Malesuada |
| Cursus | Etiam porta | Cursus Malesuada |
<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>
CSS Classes - Headings
Make sure to use the correct heading level according to the page outline, and then select a class to get the appearance that you want. Open the code accordion to see corresponding classes
Heading 1
Heading 2
Heading 3
Heading 4
H6 heading with underline classname
<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>
CSS Classes - Paragraphs
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
<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>
CSS Classes - Font Size
Apply specific font size from the type scale independent of other heading styles
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
<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
<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>