Palette — Basics

Typography

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.

Headers for specific uses

Page Title

Section Title

Card Title

                    <h1 class="page-title">Page Title</h1>
                    <h2 class="header-title">Section Title</h2>
                    <h6 class="my-0">Card Title</h6>
                
Generic headers and paragraphs

What is Lorem Ipsum? <h1> or <p class="h1">

Where does it come from? <h2> or <p class="h2">

Yeah but where did it really come from? <h3> or <p class="h3">

Why do we use it? <h4> or <p class="h4">

Where can I get some? <h5> or <p class="h5">
The standard Lorem Ipsum <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
                
Contextual type styling

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>
                

Text colors: global classes

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.

Guidelines: where and when to use

Watch this space – in the meantime, ask.

Please do not use the HR-specific colors yet – work in progress.

Text color

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>
                

Background colors: global classes

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.

Background color

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

HR-specific background colors

bg-hr-blue text-white

bg-hr-green text-white

bg-hr-sand text-white

bg-hr-gray text-white

HR-specific background colors: pale

bg-hr-blue-lighen

bg-hr-green-lighten

bg-hr-sand-lighten

bg-hr-gray-lighten


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

Border colors: global classes

Borders can be set on practically anyting. Don't, though, unless you have a really good reason.

Guidelines: where and when to use

Watch this space – in the meantime, ask.

Please do not use the HR-specific colors yet – work in progress.

Border colors

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>

                

How to use global classes

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.

Guidelines: where and when to use

Watch this space – in the meantime, ask.

Please do not use the HR-specific colors yet – work in progress.

Cards example of border and background

Default border colors card border border-*

card border border-blue

card border border-success

card border border-warning

card border border-danger

HR-specific border colors card border-*

card border-blue

card border-green

card border-sand

card border-gray

card border-* with card-header bg-hr-*

card-header bg-hr-blue

card border-blue

card-header bg-hr-green

card border-green

card-header bg-hr-sand

card border-sand

card-header bg-hr-gray

card border-gray

Background

bg-hr-*-lighten on tr

Normal table with bg-hr-*-lighten applied to two rows
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

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.

Buttons

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

                
Button variations

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>
                
Button groups

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>
                
Link color

                    <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>
                
Export files types buttons / navigation

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

How to use buttons, button groups, and links

If the shortest possible description is …

  • … a noun (e.g., Home, Products, Site Map), then use a link
  • … a verb (e.g., Update, Send, Apply, Delete, Purchase), then use a button

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.

Naming links and buttons

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 Send

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

Primary and secondary action: addition / deletion

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.

Button groups, button navigation bar

Consider wrapping button groups and multiple buttons in a navbar.

Links

Rule of thumb: links are used to navigation away, leaving some context for another.

Button color coding

Add the attribute disabled to the button-element for disabled state

Dialog button placement & colors

Placement bottom right. This is achieved with flexbox classes d-flex flex-row justify-content-end flex-wrap.

Card header

(some content)

Card header

(some content)

Card header

(some content)

Card header

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

                    
Combinations

Consider a navbar for combinations, multiple options, and full-width. See section on navigation.

Links – horisontal list

Link navbar. By adding nav-tabs to the ul, will make them tabs. See section on navigation.

How to convey meaning with text, icons, colours

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.

Text

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.

Icons

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.

Colors

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.

WCAG

Do not use color only as a cue / information. Traffic-light color-encoding is desirable, but must be together with text and / or icon.

Text, icons, color

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>
                

Icons

See all icons at FontAwesome

Fundamentals

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>

Weights

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

Duotone icons are basically a "stack", where the two pre-defined elements can be assigned different colours or opacity.

Sizing

If 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

Equal widths

If you have a list of icons and need them to line up with equal width, use the helper class .fa-fw. Consult FontAwesome docs for more.

Icon weights classes
Note: transparency and / or two-colours options for FAD set in css
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>
Custom-made icons

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>

Examples of custom stacked icons
Dynamic numbers
5 5 5
Icon with subscript
12 7 2
Weekdays
mo tu we th fr sa su
Icon stack

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

Tables

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

Table
Normal table (with row states)
# 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>
                
Responsive table
Responsive table (w/ less padding and hover highlight)
# 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>
                

Spinner / loader

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.

Loading...

If you need to remove the opacity overlay, delete class modal-loading2 and ID loading2

Spinner / loader

Small

Loading...

Medium

Loading...

Large

Loading...

            <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>
                    <i id="loading2" class="spinB fad fa-spin"></i>
                </div>         
            </div>