Use semantically correct heading tags in order (h1-h6), to adhere to WCAG accessibility guidelines. If you need a different size than what is associated with the correct heading tag, you can use helper classes
for the style you need. Just add classes .h1, .h2, .h3 etc for the size you need.
All pages should have a page title, like seen on this page (Palette — Basics at the very top). For this, use <h1 class="page-title">.
Sometimes you'll need a section title, like the above Typography title. Use <h2 class="header-title"> with supplementary margin helpers, if needed, for proper positioning.
We rely on quite a lot of .cards, and to get the appropriate .card-header style, like seen in the examples in this style guide, you need to wrap the card header in a <h6 class="my-0">.
For “normal” text paragraphs, use the <p> tag. If you need muted text, for form help texts or any other text that needs less attention, add the .text-muted class to your text element.
<h1 class="page-title">Page Title</h1>
<h2 class="header-title">Section Title</h2>
<h6 class="my-0">Card Title</h6>
<h1> or <p class="h1"><h2> or <p class="h2"><h3> or <p class="h3"><h4> or <p class="h4"><h5> or <p class="h5"><h6> or <p class="h6">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make ...<p>
<h1>What is Lorem Ipsum?</h1>
<h2>Where does it come from?</h2>
<h3>Yeah but where did it <em>really</em> come from?</h3>
<h4>Why do we use it?</h4>
<h5>Where can I get some?</h5>
<h6>The standard Lorem Ipsum</h6>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make
You can use the mark tag to highlight text.
This line of text is meant to be treated as deleted text.
This line of text is meant to be treated as no longer accurate.
This line of text is meant to be treated as an addition to the document.
This line of text will render as underlined
This line of text is meant to be treated as fine print.
This line rendered as bold text.
This line rendered as italicized text.
Sometimes we need to tell the user to press ctrl alt delete (or other keys)
<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>
<p>Sometimes we need to tell the user to press <kbd>ctrl</kbd> <kbd>alt</kbd> <kbd>delete</kbd> (or other keys)</p>
Convey meaning through color with a handful of emphasis utility classes. These may also be applied to links and will darken on hover just like our default link styles.
Watch this space – in the meantime, ask.
Please do not use the HR-specific colors yet – work in progress.
General text colors
text-muted
text-primary
text-success
text-warning
text-danger
bg-dark text-white
HR-specific text colors
hr-blue
hr-green
hr-sand
hr-gray
<p>General text colors</p>
<p class="text-muted">text-muted</p>
<p class="text-primary">text-primary</p>
<p class="text-success">text-success</p>
<p class="text-warning">text-warning</p>
<p class="text-danger">text-danger</p>
<p class="text-white bg-dark">bg-dark text-white</p>
<p>HR-specific text colors</p>
<p class="hr-blue">hr-blue</p>
<p class="hr-green">hr-green</p>
<p class="hr-sand">hr-sand</p>
<p class="hr-gray">hr-gray</p>
Similar to the text color classes, easily set the background of an element to any contextual class. Anchor components (links) will darken on hover, just like the text classes. Background utilities do not set color on text, so in some cases you’ll want to use .text-* utilities.
Watch this space – in the meantime, ask.
Please do not use the HR-specific colors yet – work in progress.
General background colors
bg-primary text-white
bg-success text-white
bg-warning text-white
bg-danger text-white
bg-dark text-white
bg-faded
<p>General background colors</p>
<p class="bg-primary text-white">bg-primary text-white</p>
<p class="bg-success text-white">bg-success text-white</p>
<p class="bg-warning text-white">bg-warning text-white</p>
<p class="bg-danger text-white">bg-danger text-white</p>
<p class="bg-dark text-white">bg-dark text-white</p>
<p class="bg-faded">bg-faded</p>
<!--
<p>HR-specific background colors</p>
<p class="bg-hr-blue text-white">bg-hr-blue text-white</p>
<p class="bg-hr-green text-white">bg-hr-green text-white</p>
<p class="bg-hr-sand text-white">bg-hr-sand text-white</p>
<p class="bg-hr-gray text-white">bg-hr-gray text-white</p>
<p>HR-specific background colors: pale</p>
<p class="bg-hr-blue-lighten">bg-hr-blue-lighen</p>
<p class="bg-hr-green-lighten">bg-hr-green-lighten</p>
<p class="bg-hr-sand-lighten">bg-hr-sand-lighten</p>
<p class="bg-hr-gray-lighten">bg-hr-gray-lighten</p>
-->
Borders can be set on practically anyting. Don't, though, unless you have a really good reason.
Watch this space – in the meantime, ask.
Please do not use the HR-specific colors yet – work in progress.
Default border colors
border border-default
border border-success
border border-warning
border border-danger
HR-specific border colors
border-blue
border-green
border-sand
border-gray
<p>Default border colors</p>
<p class="border border-default">border border-default</p>
<p class="border border-success">border border-success</p>
<p class="border border-warning">border border-warning</p>
<p class="border border-danger">border border-danger</p>
<p>HR-specific border colors</p>
<p class="border-blue">border-blue</p>
<p class="border-green">border-green</p>
<p class="border-sand">border-sand</p>
<p class="border-gray">border-gray</p>
The classes demonstrated in the previous two sections don't really work or are particularly useful on their own. This is becase they are global. Here is how to use them.
The global classes can be used on most elements. For example, border-* or bg-* can be set on cards, headings, inputs, selects, tables, th, tr, or whatever.
In combination with classes such as padding, margin, radius, you can refine the elements endlessly.
Watch this space – in the meantime, ask.
Please do not use the HR-specific colors yet – work in progress.
Default border colors card border border-*
card border border-blue
card border border-success
card border border-warning
card border border-danger
bg-hr-*-lighten on tr
| th A | th B | th C | th D |
|---|---|---|---|
| th 1a | td 1b | td 1c | td 1d |
| th 2a | td 2b | td 2c | td 2d |
| th 3a | td 3b | td 3c | td 3d |
| th 4a | td 4b | td 4c | td 4d |
Buttons and links are very separate concepts. Always use a <button> when clicking will trigger an action, and an <a href="{link}"> when clicking will change the view or take the user out of the
application.
The styling for buttons and links can be somewhat interchangeable. In fact you can make any element look like a button by adding the class .btn to an element. You can also make a button look like a link by combining the
classes .btn and .btn-link. Make sure the context is very clear if you use styling tricks like this though. We don't want to trick the user into thinking clicking something will do one thing and then we
do another.
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-link">Link</button>
Outlined buttons with transparent background:
Button sizes:
<p>Outlined buttons with transparent background:</p>
<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>
<p>Button sizes:</p>
<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
You can even make button groups:
And groups of button groups:
<p>You can even make button groups:</p>
<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-outline-primary">Left</button>
<button type="button" class="btn btn-outline-primary">Middle</button>
<button type="button" class="btn btn-outline-primary">Right</button>
</div>
<p>And groups of button groups:</p>
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group mr-2" role="group" aria-label="First group">
<button type="button" class="btn btn-outline-outline-primary">1</button>
<button type="button" class="btn btn-outline-primary">2</button>
<button type="button" class="btn btn-outline-primary">3</button>
<button type="button" class="btn btn-outline-primary">4</button>
</div>
<div class="btn-group mr-2" role="group" aria-label="Second group">
<button type="button" class="btn btn-outline-primary">5</button>
<button type="button" class="btn btn-outline-primary">6</button>
<button type="button" class="btn btn-outline-primary">7</button>
</div>
<div class="btn-group" role="group" aria-label="Third group">
<button type="button" class="btn btn-outline-primary">8</button>
</div>
</div>
<a href="#" class="text-muted">text-muted</a>
<a href="#" class="text-primary">text-primary</a>
<a href="#" class="text-success">text-success</a>
<a href="#" class="text-warning">text-warning</a>
<a href="#" class="text-danger">text-danger</a>
<ul role="navigation" class="nav exportIcons" aria-label="file export options">
<li aria-label="code export"><a href="/"><span class="fal fa-file-code-o hr-purple"></span></a></li>
<li aria-label="Excel"><a href="/"><span class="fal fa-file-excel-o hr-green"></span></a></li>
<li aria-label="pdf"><a href="/"><span class="fal fa-file-pdf-o hr-red"></span></a></li>
<li aria-label="Powerpoint"><a href="/"><span class="fal fa-file-powerpoint-o hr-orange"></span></a></li>
<li aria-label="zip"><a href="/"><span class="fal fa-file-archive-o hr-yellow"></span></a></li>
<li aria-label="comma-separated"><a href="/"><span class="fal fa-file-csv hr-green"></span></a></li>
<li aria-label="Word"><a href="/"><span class="fal fa-file-word-o hr-blue"></span></a></li>
</ul>
If the shortest possible description is …
A button is something that effects some action where you are. It turns on the lights, turns off the stove.
A link sends you away, to a different place. You walk into a different room, you fly to Tahiti.
Give buttons titles that will be understandable on their own instead of questions with yes/no. A yes/no or OK can always be formulated both ways ("do you want to save?" or "do you want to delete?"), and adds unecessary cogntive load. Give buttons "active names". Instead of "Do you want to do x?" no / yes
Formulate something like:
Send message?
Cancel SendThis is an action the user performs, a choice she makes. She is not interested in how the system operates or what describes what the database and system does. Therefore, avoid "database-speak" and generic terms. Use words that are connected to the action the user performs. Instead of submit, use for example "Create account", "Send message", "Subscribe", "Place order", "Save changes".
A primary action is presumably the goal of what the user is doing, so we make this button visibly stronger: see example.
The primary action is "going forward" or "continuing" something, whereas cancel is a "going backwards". Therefore, the primary is placed to the right.
Consider wrapping button groups and multiple buttons in a navbar.
Rule of thumb: links are used to navigation away, leaving some context for another.
Add the attribute disabled to the button-element for disabled state
Placement bottom right. This is achieved with flexbox classes d-flex flex-row justify-content-end flex-wrap.
(some content)
(some content)
(some content)
(some content)
<div class="card">
<div class="card-header">
Card header
</div>
<div class="card-body">
<p class="card-text">(some content)</p>
<div class="d-flex flex-row justify-content-end flex-wrap">
<button type="button" class="btn btn-outline-primary">Save draft</button>
<button type="button" class="btn btn-primary">Send</button>
</div>
</div>
</div>
<div class="card border-blue">
<div class="card-header bg-hr-blue text-white">
Card header
</div>
<div class="card-body">
<p class="card-text">(some content)</p>
<div class="d-flex flex-row justify-content-end flex-wrap">
<button type="button" class="btn btn-outline-primary">Cancel</button>
<button type="button" class="btn btn-primary">Save</button>
</div>
</div>
</div>
<div class="card border border-success">
<div class="card-header bg-success text-white">
Card header
</div>
<div class="card-body">
<p class="card-text">(some content)</p>
<div class="d-flex flex-row justify-content-end flex-wrap">
<button type="button" class="btn btn-outline-primary">Cancel</button>
<button type="button" class="btn btn-success">Create</button>
</div>
</div>
</div>
<div class="card border border-danger">
<div class="card-header bg-danger text-white">
Card header
</div>
<div class="card-body">
<p class="card-text">(some content)</p>
<div class="d-flex flex-row justify-content-end flex-wrap">
<button type="button" class="btn btn-outline-primary">Cancel</button>
<button type="button" class="btn btn-danger">Delete</button>
</div>
</div>
</div>
Consider a navbar for combinations, multiple options, and full-width. See section on navigation.
Link navbar. By adding nav-tabs to the ul, will make them tabs. See section on navigation.
Text, shape, icons, and colors are tools to help bring a message across and minimise cognitive load. It is important that this is consistent, and that there are no contradictory use in textual and visual clues and cues. The meaning of colors and icons are not coherent across cultures, traditions, and contexts, and are ambivalent more times than you think.
Create simple, human-readable sentences. Instead of outputs like "Password: fail", "Time zone: 0", "Email: set" see example.
Put the essential, operative word first in the sentence. This way, a quick glance will let a user understand what the rest of the sentence is about.
With the exception of icons in the example, ask your friendly UI-UX-person if you need an icon. This ensure consistency within and across applications.
We have color classes for typical "traffic-light"-feedback. You can see them in sections above.
success classes: all is well / this action is confirmed / clicking this will add something, not replace something
warning classes: something needs attention soon-ish / this action requires you to be extra-sure / clicking this will change something
danger classes: blocking problem – this problem will prevent user from accomplishing something / this action makes irreversible changes.
Do not use color only as a cue / information. Traffic-light color-encoding is desirable, but must be together with text and / or icon.
Password is not set.
Time zone not defined
Email is confirmed
<p><span class="fa fa-minus-circle text-danger"></span> Password is <em><span class="text-danger">not</span></em> set.</p>
<p><span class="fa fa-exclamation-circle text-warning"></span> Time zone not defined</p>
<p><span class="fa fa-check-circle text-success"></span> Email is confirmed</p>
FontAwesome 5 is a breaking release. This means some fundamental changes.
Right now we are using temporary a fix to be able to run both old and new FontAwesome. This should work for TM, TR, TO, absence, and HRID.
We use FontAwesome for all inline icons. To display an icon, find the right class and insert into an i or span tag. Like this: <i class="fal fa-bolt"></i>
In FA4, there was only one prefix: fa. In V5 this is deprecated and replaced with four new ones: .fab .fas .far .fal .fad
Duotone icons are basically a "stack", where the two pre-defined elements can be assigned different colours or opacity.
falIf you need to adjust the size of the icon, add a helper class for icon size: .fa-lg, .fa-2x, .fa-3x, .fa-4x, .fa-5x
.fa-fw. Consult FontAwesome docs for more.
| Prefix | Meaning | Example classes | Result |
|---|---|---|---|
fab |
Brand | <i class="fab fa-facebook-f"></i> |
|
fas |
Solid | <i class="fas fa-file-signature"></i> |
|
far |
Regular | <i class="far fa-file-signature"></i> |
|
fal |
Light | <i class="fal fa-file-signature"></i> |
|
fad |
Duotone | <i class="fad fa-file-signature"></i> |
There is nothing that differs these icons from FontAwesome except the extra r in far-x! so their respective classes are:
= <i class="far far-hr-logo"></i>
= <i class="far far-we-logo"></i>
= <i class="far far-rm-logo"></i>
= <i class="far far-hr-absence"></i>
= <i class="far far-talentech-icon"></i>
Two options for Talmundo logo: two-colors or one
= <i class="far far-talmundo-logo-1"></i><i class="far far-talmundo-logo-2 talmundo-yellow"></i>
= <i class="far far-talmundo-logo-1"></i><i class="far far-talmundo-logo-2"></i>
<h6>Dynamic numbers</h6>
<span class="fa-stack fa-1x">
<i class="fal fa-calendar-o fa-stack-2x hr-blue"></i>
<strong class="fa-stack-1x calendar-text hr-blue">5</strong>
</span>
<span class="fa-stack fa-1x fa-fw" aria-label="skill level 5">
<i class="fas fa-square fa-fw fa-stack-2x hr-green"></i>
<strong class="fa-stack-1x text-white">5</strong>
</span>
<span class="fa-stack fa-1x fa-fw" aria-label="skill level 5">
<i class="fal fa-circle fa-fw fa-stack-2x hr-blue"></i>
<strong class="fa-stack-1x hr-blue">5</strong>
</span>
<h6 class="pt-3">Icon with subscript</h6>
<i class="fal fa-truck-moving fa-fw fa-lg hr-blue" aria-label="relocating"></i>
<strong class="negMargin"><sup class="hr-red">12</sup></strong>
<i class="fal fa-door-open fa-fw fa-lg hr-blue" aria-label="leaving"></i>
<strong class="negMargin"><sup class="hr-red">7</sup></strong>
<i class="fal fa-clock fa-fw fa-lg hr-blue" aria-label=""></i>
<strong class="negMargin"><sup class="hr-red">2</sup></strong>
<h6 class="pt-3">Weekdays</h6>
<span class="fa-stack fa-1x fa-fw weekday" aria-label="monday">
<i class="fas fa-circle fa-fw fa-stack-2x monday"></i>
<strong class="fa-stack-1x">mo</strong>
</span>
<span class="fa-stack fa-1x fa-fw weekday" aria-label="tuesday">
<span class="fas fa-circle fa-fw fa-stack-2x tuesday"></span>
<strong class="fa-stack-1x">tu</strong>
</span>
<span class="fa-stack fa-1x fa-fw weekday" aria-label="wednesday">
<span class="fas fa-circle fa-fw fa-stack-2x wednesday"></span>
<strong class="fa-stack-1x">we</strong>
</span>
<span class="fa-stack fa-1x fa-fw weekday" aria-label="thursday">
<span class="fas fa-circle fa-fw fa-stack-2x thursday"></span>
<strong class="fa-stack-1x">th</strong>
</span>
<span class="fa-stack fa-1x fa-fw weekday" aria-label="friday">
<span class="fas fa-circle fa-fw fa-stack-2x friday"></span>
<strong class="fa-stack-1x">fr</strong>
</span>
<span class="fa-stack fa-1x weekday" aria-label="saturday">
<span class="fas fa-circle fa-fw fa-stack-2x saturday"></span>
<strong class="fa-stack-1x">sa</strong>
</span>
<span class="fa-stack fa-1x fa-fw weekday" aria-label="sunday">
<span class="fas fa-circle fa-fw fa-stack-2x sunday"></span>
<strong class="fa-stack-1x">su</strong>
</span>
<h6 class="pt-3">Icon stack</h6>
<span class="fa-stack fa-1x fa-fw" aria-label="create new communication template">
<i class="fal fa-square fa-fw fa-stack-2x hr-blue"></i>
<i class="fas fa-plus fa-fw fa-fw fa-stack-1x hr-blue"></i>
</span>
<span class="fa-stack fa-1x fa-fw" aria-label="template overwritten">
<i class="fal fa-square fa-fw fa-stack-2x hr-blue"></i>
<i class="fas fa-cog fa-fw fa-fw fa-stack-1x hr-blue"></i>
</span>
<span class="fa-stack fa-1x fa-fw" aria-label="template inherited">
<i class="fal fa-square fa-fw fa-stack-2x hr-blue"></i>
<i class="fas fa-level-down fa-fw fa-stack-1x hr-blue"></i>
</span>
<span class="fa-stack fa-1x fa-fw" aria-label="excluded template">
<i class="fal fa-square fa-fw fa-stack-2x hr-blue"></i>
<i class="fas fa-times fa-fw fa-stack-1x hr-red"></i>
</span>
<span class="fa-stack fa-1x fa-fw" aria-label="template locked">
<i class="fal fa-square fa-fw fa-stack-2x hr-blue"></i>
<i class="fas fa-lock fa-fw fa-stack-1x hr-blue"></i>
</span>
<span class="fa-stack fa-1x fa-fw" aria-label="copy template">
<i class="fal fa-clone fa-fw fa-stack-2x hr-blue"></i>
</span>
<span class="fa-stack fa-1x fa-fw" aria-label="template locked">
<i class="fal fa-square fa-fw fa-stack-2x hr-blue"></i>
<i class="fas fa-pencil fa-fw fa-stack-1x hr-blue"></i>
</span>
<span class="fa-stack fa-1x fa-fw" aria-label="template missing">
<i class="fal fa-square fa-fw fa-stack-2x hr-blue"></i>
<i class="fas fa-exclamation fa-fw fa-stack-1x hr-red"></i>
</span>
We have a few options for table styles, states, responsiveness and otherwise. If you are in doubt about which table style to use, please consult with a UX or front-end designer.
For simple, small tables with few and narrow columns, it should be sufficient to add the class .table to the <table> tag.
For tables with lots of rows and columns it’s recommended to add the classes .table-sm (less padding) and .table-hover to the <table> tag to save space while letting the user highlight entire
rows on mouse hover.
If you need to convey a state or special attention to a table row, there are several contextual classes you can use. Try adding one of the classes .table-success, .table-warning, .table-danger and .table-info to the row’s <tr>.
| # | First Name | Last Name |
|---|---|---|
| 1 | Henning | Støverud |
| 2 | Jagjit | Singh |
| 3 | Knut‑Erik | Lødding |
| 4 | Henning | Støverud |
| 5 | Jagjit | Singh |
| 6 | Knut‑Erik | Lødding |
| 7 | Henning | Støverud |
| 8 | Jagjit | Singh |
| 9 | Knut‑Erik | Lødding |
<table class="table">
<caption>Normal table (w/ row states)</caption>
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First Name</th>
<th scope="col">Last Name</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Henning</td>
<td>Støverud</td>
</tr>
<tr class="table-info">
<th scope="row">2</th>
<td>Jagjit</td>
<td>Singh</td>
</tr>
<tr class="table-danger">
<th scope="row">3</th>
<td>Knut‑Erik</td>
<td>Lødding</td>
</tr>
<tr>
<th scope="row">4</th>
<td>Henning</td>
<td>Støverud</td>
</tr>
<tr>
<th scope="row">5</th>
<td>Jagjit</td>
<td>Singh</td>
</tr>
<tr class="table-warning">
<th scope="row">6</th>
<td>Knut‑Erik</td>
<td>Lødding</td>
</tr>
<tr>
<th scope="row">7</th>
<td>Henning</td>
<td>Støverud</td>
</tr>
<tr class="table-success">
<th scope="row">8</th>
<td>Jagjit</td>
<td>Singh</td>
</tr>
<tr>
<th scope="row">9</th>
<td>Knut‑Erik</td>
<td>Lødding</td>
</tr>
</tbody>
</table>
| # | First Name | Last Name | First Name | Last Name | First Name | Last Name | First Name | Last Name | First Name | Last Name | First Name | Last Name | First Name | Last Name | First Name | Last Name |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 1 | Henning | Støverud | Henning | Støverud | Henning | Støverud | Henning | Støverud | Henning | Støverud | Henning | Støverud | Henning | Støverud | Henning | Støverud |
| 2 | Jagjit | Singh | Jagjit | Singh | Jagjit | Singh | Jagjit | Singh | Jagjit | Singh | Jagjit | Singh | Jagjit | Singh | Jagjit | Singh |
| 3 | Knut‑Erik | Lødding | Knut‑Erik | Lødding | Knut‑Erik | Lødding | Knut‑Erik | Lødding | Knut‑Erik | Lødding | Knut‑Erik | Lødding | Knut‑Erik | Lødding | Knut‑Erik | Lødding |
<table class="table table-responsive">
<caption>Responsive table</caption>
<thead>
<tr>
<th scope="col">#</th>
[...]
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
[...]
</tr>
<tr>
<th scope="row">2</th>
[...]
</tr>
<tr>
<th scope="row">3</th>
[...]
</tr>
</tbody>
</table>
Use this code for a default loading spinner. The graphics will periodically change, what you see here is the current.
Expected results: this spinner in the size of your choice, centered on a white opacity overlay.
If you need to remove the opacity overlay, delete class modal-loading2 and ID loading2
Small
Medium
Large
<p>Small</p>
<div class="modal-loading2">
<div class="fa-1x">
<span class="sr-only">Loading...</span>
<i id="loading2" class="spinB fad fa-spin"></i>
</div>
</div>
<p>Medium</p>
<div class="modal-loading2">
<div class="fa-2x">
<span class="sr-only">Loading...</span>
<i id="loading2" class="spinB fad fa-spin"></i>
</div>
</div>
<p>Large</p>
<div class="modal-loading2">
<div class="fa-3x">
<span class="sr-only">Loading...</span>f
<i id="loading2" class="spinB fad fa-spin"></i>
</div>
</div>