Awin Logo

UI Style guide

A standard HTML markup and style reference for the Awin interface

A few tips to consider when adding or editing pages in the interface:

  • Avoid the use of inline styles. Its use undermines the purpose of this framework
  • Avoid adding new custom classes, please speak to the UX team before doing so
  • Keep the HTML markup separated from the logic. Ideally use templates
  • Use //styleguide.awin.com/dist/awin.css to include CSS. Do not create duplicated CSS files
  • For a new page in the Provider area use newUIoverride.css only
  • Use existing templates for components where possible
  • In suggested markup there might be some extra wrappers that may not be required in certain cases. You can ignore these on need to need basis
  • If you need any help email UserExperience@awin.com or use slack channel #user-experience

Grid System

Single Column Layout

Layout Single Column

Layout Single Column

Paragraph

<div class="boxLtGrey"> <div class="container-fluid"> <div class="row page-header"> <h1>Layout Single Column</h1> </div> <div class="row"> <div class="col-sm-12"> <h2>Layout Single Column </h2> <p>Paragraph</p> </div> </div> </div> </div>

Two Column Layout

Two Column Layout

Column Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget est erat. Etiam odio lacus, ornare non lectus vel, malesuada lobortis tortor. Aenean egestas placerat molestie.

Column Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget est erat.

<div class="boxLtGrey"> <div class="row page-header"> <h1>Two Column Layout</h1> </div> <div class="row"> <div class="col-sm-8"> <h2>Column Title</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> <div class="col-sm-4"> <h2>Column Title</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> </div> </div>

Widgets

Widget header

Widget content

Widget header

Widget content

<div class="row row-widget"> <div class="col-sm-4 wrapper-widget"> <div class="widget"> <div class="header"> <h2>Widget header</h2> </div> <div> <p>Widget content</p> </div> </div> </div> <div class="col-sm-8 wrapper-widget"> <div class="widget"> <div class="header"> <h2>Widget header</h2> </div> <div> <p>Widget content</p> </div> </div> </div> </div>

Widget with List Group

To Do List

You have 6 commissions to validate

You have 2 pending transaction queries

You have 1 publisher to approve
<div class="row row-widget"> <div class="col-sm-4 wrapper-widget"> <div class="widget"> <div class="header"> <h2>To Do List</h2> </div> <div class="list-group list-group-icons"> <a href="#" class="list-group-item"></a> <a href="#" class="list-group-item"></a> </div> </div> </div> </div>

Widget with table of contents

Account Overview

Average Payment Time 12 days
Pending Sales 6
Value of Pending Sales GBP 85.09
<div class="row row-widget"> <div class="col-sm-4 wrapper-widget"> <div class="widget"> <div class="header"> <h2>Account Overview</h2> </div> <table class="table table-striped align-middle"></table> </div> </div> </div>

Search Widget

<div class="search-widget "> <form> <div class="input-group"> <input type="text" class="form-control" placeholder="Search Advertisers"> <span class="input-group-btn"> <button class="btn btn-default" type="submit" title="Search"> <i class="fa-regular fa-search" aria-hidden="true"></i> </button> </span> </div> </form> </div>

Typography

Headers

h1 - Special. Awin Title

h1. Awin Title

h2. Awin Title

h3. Awin Title

h4. Awin Title

h5. Awin Title
h6. Awin Title
<h1 class="special">h1 - Special. Awin Title</h1> <h1>h1. Awin Title</h1> <h2>h2. Awin Title</h2> <h3>h3. Awin Title</h3> <h4>h4. Awin Title</h4> <h5>h5. Awin Title</h5> <h6>h6. Awin Title</h6>

Text Style

Paragraph

Text Strong

Text muted

Text danger

Text warning

Text success

Text info

Text badge

<p>Paragraph</p> <p><strong>Strong</strong></p> <p class="text-muted">Text muted</p> <p class="text-danger">Text danger</p> <p class="text-warning">Text warning</p> <p class="text-success">Text success</p> <p class="text-info">Text info</p> <p>Text <span class="badge">badge</span></p>

Example copy placeholder

<div class="copy-code-placeholder"> <p>Example copy placeholder</p> </div>

Headers

Page Header

Page Title

<div class="row page-header"> <h1>Page Title</h1> </div>

Page Header with Link

Page Title

Link
<div class="row page-header"> <h1>My Offers</h1> <a href="" title="Link title"> <i class="CSS class for icon if required" aria-hidden="true"></i> Link</a> </div>

Tables

Table Layout

Table header Table header
Table data Table data
Table data Table data
Table data Table data
<div class="table-responsive"> <table class="table table-striped"> <thead> <tr> <th>Table header</th> <th>Table header</th> </tr> </thead> <tbody> <tr> <td>Table data</td> <td>Table data</td> </tr> <tr> <td>Table data</td> <td>Table data</td> </tr> <tr> <td>Table data</td> <td>Table data</td> </tr> </tbody> </table> </div>

Table Cell Styles

text-left 100 100 10.00 10.00
text-center 100 100 10.00 10.00
text-right 100.00 100.00 10.00 10.00
100 100 10.00 10.00
10.00 10.00 10.00 10.00

Global table alignment right specially used for tables with figures.

<table class="table text-right"></table>

Changing colours of links on hover

<table class="table table-hover"></table>

Vertical alignment in cells:

<td class="align-middle"></td>

For hatch style (diagonal stripes) a hatch class is needed in the table tag besides warning-hatch.

<table class="table hatch"></table> <td class="confirmed"></td> <td class="declined"></td> <td class="total"></td> <td class="pending"></td> <td class="warning-hatch"></td>

Filters

Table Filter with Page Selector

Rows per page:

Showing 4401 - 4800 of 13867

<div class="row"> <div class="table-filters"> <div class="col-sm-12 text-right"> <p>Rows per page: </p> <select> <option value="">10</option> <option value="">25</option> <option value="">50</option> <option value="">100</option> <option value="">400</option> </select> <p>Showing 4401 - 4800 of 13867 </p> </div> </div> </div>

Rows per page:

Showing 4401 - 4800 of 13867

Link
<div class="row"> <div class="table-filters"> <div class="col-sm-12 text-right"> <p>Rows per page: </p> <select> <option value="">10</option> <option value="">25</option> <option value="">50</option> <option value="">100</option> <option value="">400</option> </select> <p>Showing 4401 - 4800 of 13867 </p> <a href=""><i class="fa-regular fa-file-excel"></i> Link</a> </div> </div> </div>

Table Filter with Button

Rows per page:

Showing 4401 - 4800 of 13867

Publishers:

<div class="row"> <div class="table-filters"> <div class="col-sm-12 text-right"> <p>Rows per page: </p> <select> <option value="">10</option> <option value="">25</option> <option value="">50</option> <option value="">100</option> <option value="">400</option> </select> <p>Showing 4401 - 4800 of 13867 </p> <p>Publishers: </p> <button type="button" class="btn-filter"> <span>2 Selected</span> <i class="fa-regular fa-list"></i> </button> </div> </div> </div>

Table Filter with Dropdown

Rows per page:

Showing 4401 - 4800 of 13867

Options
<div class="row"> <div class="table-filters"> <div class="col-sm-12 text-right"> <p>Rows per page: </p> <select> <option value="">10</option> <option value="">25</option> <option value="">50</option> <option value="">100</option> <option value="">400</option> </select> <p>Showing 4401 - 4800 of 13867 </p> <div href="" class="option-menu"> <a href="">Options</a> <ul> <li><a href="">Option 1</a></li> <li><a href="">Option 2</a></li> </ul> </div> </div> </div> </div>

Form Elements

Buttons

Default

<button class="btn btn-primary">Primary Action</button> <button class="btn btn-secondary">Secondary Action</button> <button class="btn btn-tertiary">Tertiary Action</button> <button class="btn btn-disabled">Primary Disabled</button> <button class="btn btn-secondary" disabled>Secondary Disabled</button> <button class="btn btn-tertiary" disabled>Tertiary Disabled</button>

Small

<button class="btn btn-primary btn-sm">Primary Small</button> <button class="btn btn-secondary btn-sm">Secondary Small</button>

Add Button

<button class="btn btn-add"> <i class="fa-regular fa-plus"></i>Add Button </button> <button class="btn btn-add-disabled"> <i class="fa-regular fa-plus"></i>Add Button Disabled </button>

Add Button with Caret

<button class="btn btn-add btn-caret"> <i class="fa-regular fa-plus"></i> Add button with caret </button>

Button Group Toggle

<div class="btn-group" data-toggle="buttons"> <label class="btn btn-default active"> <input type="radio" name="options" id="option1" autocomplete="off" checked><i class="fa-regular fa-check"></i> Approve </label> <label class="btn btn-default"> <input type="radio" name="options" id="option2" autocomplete="off"><i class="fa-regular fa-pencil"></i> Suggest Changes </label> <label class="btn btn-default"> <input type="radio" name="options" id="option3" autocomplete="off"><i class="fa-regular fa-ban"></i> Reject </label> </div>

Chips

Default chips

Chip muted Chip highlighted Chip outlined <span class="chip-sm chip-muted">Chip muted</span> <span class="chip-sm chip-highlighted">Chip highlighted</span> <span class="chip-sm chip-outlined">Chip outlined</span>

Status chips

Chip info Chip success Chip warning Chip danger <span class="chip-sm chip-info">Chip info</span> <span class="chip-sm chip-success">Chip success</span> <span class="chip-sm chip-warning">Chip warning</span> <span class="chip-sm chip-danger">Chip danger</span>

Form Layout

All form elements should be generally wrapped in a column 8 div, specially in vertical forms in order to limit the input fields widths.

<div class="row"> <div class="col-sm-8""> <form action="" class="form-horizontal"> <div class="form-group"> <label class="control-label col-sm-4">Form Label</label> <div class="col-sm-8"> <input type="text" name="" class="form-control"> </div> </div> </form> </div> </div>

File Upload

<div class="form-group"> <label class="control-label col-sm-4">File upload</label> <div class="col-sm-8"> <div class="input-group"> <input type="text" class="form-control" placeholder="Choose file to upload"> <input type="file" files name="file" id="file" class="input-file" /> <label for="file" class="input-group-addon btn-browse">Browse</label> </div> <p class="text-light text-right">Maximum size 500kb.</p> </div> </div>

Inline Radio Buttons

<div class="form-group"> <label class="control-label col-sm-4"> Inline Radio Buttons </label> <div class="radio-group col-sm-8"> <label class="radio-inline col-sm-3"> <input type="radio" name="inlineRadioOptions" value="yes">Yes </label> <label class="radio-inline col-sm-4"> <input type="radio" name="inlineRadioOptions" value="no">No </label> </div> </div>

Stacked Radio Buttons

<div class="form-group"> <label class="control-label col-sm-4"> Stacked Radio Buttons </label> <div class="col-sm-8"> <div class="radio"> <label> <input type="radio" name="" value="option1">Option one </label> </div> <div class="radio"> <label> <input type="radio" name="" value="option2">Option two </label> </div> <div class="radio"> <label> <input type="radio" name="" value="option2">Option three </label> </div> </div> </div>

Checkbox

<div class="form-group"> <label class="control-label col-sm-4">Checkboxes</label> <div class="col-sm-8"> <div class="checkbox"> <input type="checkbox"> </div> </div> </div>

Inline Checkboxes

<div class="form-group"> <label class="control-label col-sm-4"> Inline Checkboxes </label> <div class="checkbox-group col-sm-8"> <label class="checkbox-inline col-sm-3"> <input type="checkbox"> Checkbox 1 </label> <label class="checkbox-inline col-sm-4"> <input type="checkbox"> Checkbox 2 </label> </div> </div>

Stacked Checkboxes

<div class="form-group"> <label class="control-label col-sm-4">Checkbox</label> <div class="col-sm-8"> <div class="checkbox"> <label><input type="checkbox"> Checkbox 1</label> </div> <div class="checkbox"> <label><input type="checkbox">Checkbox 2</label> </div> <div class="checkbox disabled"> <label><input type="checkbox" disabled>Disabled Checkbox</label> </div> </div> </div>

Text Field

<div class="form-group"> <label class="control-label col-sm-4">Text Feild</label> <div class="col-sm-8"> <input type="text" name="" class="form-control" /> </div> </div>

Text Area

<div class="form-group"> <label class="control-label col-sm-4">Text area</label> <div class="col-sm-8"> <textarea name="" cols="30" rows="10" class="form-control"></textarea> </div> </div>

Select

<div class="form-group"> <label class="control-label col-sm-4">Select</label> <div class="col-sm-8"> <select class="form-control"> <option value="">One two three</option> <option value="">Three four five</option> <option value="">Six seven eight</option> </select> </div> </div>

Select2 Angular

<div class="form-group"> <label class="control-label col-sm-4">Select</label> <div class="col-sm-8"> <div class="select2-angular"> <div class="ui-select-multiple form-control"></div> </div> </div> </div>

Input with prepend

Prepend label
<div class="form-group"> <label class="control-label col-sm-4">Label</label> <div class="col-sm-8"> <div class="input-group"> <div class="input-group-prepend"> <span class="input-group-text">Prepend label</span> </div> <input type="text" class="form-control"> </div> </div> </div>

Input with append

Append label
<div class="form-group"> <label class="control-label col-sm-4">Label</label> <div class="col-sm-8"> <div class="input-group"> <input type="text" class="form-control"> <div class="input-group-append"> <span class="input-group-text">Append label</span> </div> </div> </div> </div>

Input with Checkbox

<div class="form-group"> <label class="control-label col-sm-4">Label</label> <div class="col-sm-8"> <div class="input-group"> <div class="input-group-prepend"> <div class="input-group-text"> <input type="checkbox" aria-label="Checkbox for following text input"> </div> </div> <input type="text" class="form-control"> </div> </div> </div>

Input with Select

<div class="form-group"> <label class="control-label col-sm-4">Label</label> <div class="col-sm-8"> <div class="input-group"> <div class="input-group-prepend"> <select id=""> <option value="">Option 1</option> <option value="">Option 2</option> <option value="">Option 3</option> </select> </div> <input type="text" class="form-control"> </div> </div> </div>

Grid selection

<div class="form-group"> <label class="control-label col-sm-4">Select</label> <div class="checkbox-group col-sm-8"> <div class="check-button"> <label> <input type="checkbox" value="00:00"> <span>00:00</span> </label> <label> <input type="checkbox" value="00:00"> <span>01:00</span> </label> <label> <input type="checkbox" value="00:00"> <span>03:00</span> </label> </div> </div> </div>

Horizontal Form

<div class="form-horizontal"> <div class="row"> <div class="col-sm-4"> <div class="form-group"> <label class="control-label">Text field one</label> <input type="text" class="form-control"> </div> </div> <div class="col-sm-4"> <div class="form-group"> <label class="control-label">Text field two</label> <input type="text" class="form-control"> </div> </div> <div class="col-sm-4"> <div class="form-group"> <label class="control-label">Text field three</label> <input type="text" class="form-control"> </div> </div> </div> </div>

Disabled Form Group

<div class="form-group has-disabled"> <label class="control-label col-sm-4">Disabled Form Group</label> <div class="col-sm-8"> <input type="text" name="" class="form-control" placeholder="This field is disabled" disabled="disabled" /> </div> </div>

Form Validation Error

This is an error message.

<div class="form-group has-error"> <label class="control-label col-sm-4">Error Message</label> <div class="col-sm-8"> <input type="text" name="" class="form-control" /> <p class="help-block"><i class="fa-regular fa-alert"></i> This is an error message.</p> </div> </div>

Form Validation Warning

This is an warning message.

<div class="form-group has-warning"> <label class="control-label col-sm-4">Warning Message</label> <div class="col-sm-8"> <input type="text" name="" class="form-control" /> <p class="help-block"><i class="fa-regular fa-alert"></i> This is an warning message.</p> </div> </div>

On Off Switch

<div class="form-group"> <label class="control-label col-sm-4">On Off Switch</label> <div class="col-sm-8"> <div class="onoffswitch"> <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked> <label class="onoffswitch-label" for="myonoffswitch"> <span class="onoffswitch-inner"></span> <span class="onoffswitch-switch"></span> </label> </div> </div> </div>

Feedback

Messages

Info message

<p class="alert alert-info">Info message</p>

Warning message

<p class="alert alert-warning">Warning message</p>

Error message

<p class="alert alert-danger">Error message</p>

Success message

<p class="alert alert-success">Success message</p>

Form Warning Message

This is a warning information inside form group

<div class="form-group"> <label class="control-label col-sm-4"> Form field with warning message </label> <div class="col-sm-8"> <input name="" class="form-control" type="text"> <p class="alert alert-warning">Warning information inside form group</p> </div> </div>

Form Info Message

This is an important information inside form group

<div class="form-group"> <label class="control-label col-sm-4"> Form field with information message</label> <div class="col-sm-8"> <input name="" class="form-control" type="text"> <p class="alert alert-warning">This is an warning information inside form group</p> </div> </div>

Character Limit Counter

<div class="form-group"> <label class="control-label col-sm-4">Label</label> <div class="col-sm-8"> <textarea maxlength="25" class="form-control has-counter" placeholder="Placeholder description"></textarea> <span class="character-counter"></span> </div> </div>

Pop Up Notifications

Error Alert

<div class="modal modal-alert fade" tabindex="-1" role="dialog" aria-labelledby="exampleErrorPopup" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content alert-danger"> <div class="modal-header"> <h5 class="modal-title">Error alert</h5> </div> <div class="modal-body col-xs-12"> ... </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">OK</button> </div> </div> </div> </div>

Info Alert

<div class="modal modal-alert fade" id="alert-info" tabindex="-1" role="dialog" aria-labelledby="exampleAlertPopup" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content alert-info"> <div class="modal-header"> <h5 class="modal-title">Info alert title</h5> </div> <div class="modal-body col-xs-12"> ... </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">OK</button> </div> </div> </div> </div>

Success Alert

<div class="modal modal-alert fade" id="alert-success" tabindex="-1" role="dialog" aria-labelledby="exampleAlertPopup" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content alert-info"> <div class="modal-header"> <h5 class="modal-title">Warning pop up</h5> </div> <div class="modal-body col-xs-12"> ... </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">OK</button> </div> </div> </div> </div>

Warning Alert

<div class="modal modal-alert fade" id="alert-warning" tabindex="-1" role="dialog" aria-labelledby="exampleAlertPopup" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content alert-warning"> <div class="modal-header"> <h5 class="modal-title">Warning alert title</h5> </div> <div class="modal-body col-xs-12"> ... </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">OK</button> </div> </div> </div> </div>

Progress Bar

The following example corresponds to a customised version of jQuery progressbar widget

Uploading...

<div class="ui-progressbar-wrapper"> <div class="ui-progressbar"> <div class="ui-progressbar-value"></div> </div> <p>Uploading...</p> </div>

Lists

List Group with Icons

You have 6 commissions to validate

You have 2 pending transaction queries

You have 1 publisher to approve
<div class="row"> <div class="col-sm-4"> <div class="list-group list-group-icons"> <a href="#" class="list-group-item"> <i class="fa-regular fa-check-square"></i> <p>You have 6 commissions to validate</p> </a> <a href="#" class="list-group-item"> <i class="fa-regular fa-exchange" aria-hidden="true"></i> <p class="icon">You have 2 pending transaction queries</p> </a> <a href="#" class="list-group-item"> <i class="fa-regular fa-user" aria-hidden="true"></i> <p class="icon">You have 1 publisher to approve</p> </a> </div> </div> </div>

Progress List

  • We could not retrieve this file when we tried to download it.
  • There are 11 products with no category mapping.
  • There are no failed products.
<ul class="list-progress"> <li class="text-danger"> We could not retrieve this file when we tried to download it. </li> <li class="text-warning"> There are 11 products with no category mapping. </li> <li class="text-success"> There are no failed products. </li> </ul>

Basic Unordered List

Example of an unordered list that is styled using our bullet class.

<ul class="bullet"> <li>Option 1</li> <li><a href="" target="_blank" title="Option 2">Option 2</a></li> </ul>

Icons

UI icons come from FontAwesome, please use non-circle or outline versions where possible for styling consistency.

<i class="fa-regular fa-info-circle" aria-hidden="true"></i>

Common Icons

fa-times

fa-plus

fa-pencil

fa-cog

fa-search

fa-check

fa-circle

fa-info-circle

fa-arrow-up

fa-arrow-down

fa-sort-up

fa-sort-desc

fa-arrows-h

fa-exchange

fa-angle-up

fa-angle-down

fa-angle-left

fa-angle-right

fa-clock

fa-download

fa-upload

fa-file

fa-file-excel

fa-clipboard

fa-bell

fa-envelope

fa-calendar

fa-save

fa-folder

fa-photo

fa-table

fa-line-chart

fa-pie-chart

fa-refresh

fa-sign-out

fa-home

fa-columns

fa-tags

fa-eye-slash

fa-scissors

fa-check-square

fa-user-circle

fa-user

fa-list

fa-newspaper

fa-mobile-phone

fa-desktop

fa-tablet

fa-hand-o-up

fa-handshake

fa-sitemap

fa-life-bouy

Flag Icons

<span class="sprite_flags flag_de"></span>

Argentina (AR)

Australia (AU)

Austria (AT)

Belgium (BE)

Brazil (BR)

Bulgaria (BU)

Canada (CA)

Chile (CL)

China (CN)

Colombia (CO)

Croatia (HR)

Czech Republic (CZ)

Denmark (DK)

Finland (FI)

France (FR)

Germany (DE)

Greece (GR)

Hungary (HU)

India (IN)

Ireland (IE)

Italy (IT)

Japan (JP)

Latvia (LV)

Lithuania (LT)

Mexico (MX)

Netherlands (NL)

New Zealand (NZ)

Norway (NO)

Peru (PE)

Poland (PO)

Portugal (PO)

Romania (RO)

Russia (RU)

Singapore (SG)

Slovakia (SK)

Slovenia (SI)

South Africa (ZA)

Spain (ES)

Sweden (SW)

Switzerland

Taiwan (TW)

Turkey (TR)

Ukraine (UA)

United Arab Emirates (AE)

United Kingdom (GB)

United States of America (US)

Circle Icon Sizes

<div class="circle-icon-sm"> <i class="fa-regular fa-shopping-cart"></i> </div> <div class="circle-icon-md"> <i class="fa-regular fa-shopping-cart"></i> </div> <div class="circle-icon-lg"> <i class="fa-regular fa-shopping-cart"></i> </div>

Circle Icon Colours

<div class="circle-icon-sm">...</div> <div class="circle-icon-sm circle-cyan">...</div> <div class="circle-icon-sm circle-yellow">...</div> <div class="circle-icon-sm circle-purple">...</div> <div class="circle-icon-sm circle-aqua">...</div> <div class="circle-icon-sm circle-red">...</div>

Stats/Data

UI graph colours are used at 80% opacity RGB, for HEX format see below.

colors: [ 'rgba(0,154,255,0.8)', // #419bf9 'rgba(0,198,55,0.8)', // #00c637 'rgba(68,86,213,0.8)', // #4756d5 'rgba(250,180,24,0.8)', // #fab418 'rgba(222,8,51,0.8)', // #de0833 'rgba(255,102,0,0.8)', // #ff6600 'rgba(32,174,188,0.8)', // #20aebc 'rgba(68,41,147,0.8)', // #442993 'rgba(0,150,75,0.8)', // #00964b 'rgba(232,53,146,0.8)', // #ea2e92 'rgba(100,218,255,0.8)', // #65daff 'rgba(187,123,65,0.8)', // #bb7b41 'rgba(155,155,155,0.8)', // #999999 'rgba(0,68,139,0.8)', // #00568b 'rgba(35,40,44,0.8)', // #23282c 'rgba(155,145,55,0.8)' // #999933 ],

Components


<button type="button" class="btn btn-default" data-toggle="modal" data-target="#exampleModal">
    Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <i class="fa-regular fa-times" aria-hidden="true"></i>
                </button>
            </div>
            <div class="modal-body">
                ...
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-link" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-default">Save</button>
            </div>
        </div>
    </div>
</div>
-

Tooltip

Tooltip "top-right"
Short description with external link. Vestibulum eros leo, hendrerit non bibendum sit amet, efficitur sit amet tortor.

Tooltip "top"
Short description with external link Vestibulum eros leo, hendrerit non bibendum sit amet, efficitur sit amet tortor.

Tooltip "bottom"
Short description with external link Vestibulum eros leo, hendrerit non bibendum sit amet, efficitur sit amet tortor.

Tooltip "bottom-left"
Short description with external link Vestibulum eros leo, hendrerit non bibendum sit amet, efficitur sit amet tortor.
 


<div class="tooltip-hover">
    <i class="fa-regular fa-info-circle"></i>
    <div class="tooltip top-right">
        <div class="tooltip-arrow"></div>
        <div class="tooltip-inner">
            Short description with <a target="_blank" href="#">external link</a>.
            Vestibulum eros leo, hendrerit non bibendum sit amet, efficitur sit amet tortor.
        </div>
    </div>
</div>
Short description with external link. Vestibulum eros leo, hendrerit non bibendum sit amet, efficitur sit amet tortor.

<div class="tooltip in right">
    <div class="tooltip-arrow"></div>
    <div class="tooltip-inner">Description.</div>
</div>

Speech Bubble


<blockquote class="speech-bubble">
    <span class="speech-bubble-arrow left"></span>
    <p>Message</p>
</blockquote>

Left hand side speech bubble

Right hand side speech bubble

Helper Classes

Text

.text-left .text-right .text-center .align-middle // vertical alignment .text-normal // font-weight normal .text-nowrap .text-wrap .text-break // use only to break long strings or URLs .text-truncate

Margin

.mt-0 // remove top margin .mt-xs // extra small top margin .mt-sm // small top margin .mt-md // medium top margin .mt-lg // large top margin .mt-neg // negative top margin .mt-neg-lg // negative top margin large .mr-0 // remove right margin .mr-neg // negative right margin .mb-0 // remove bottom margin .mb-xs // small bottom margin .mb-md // medium bottom margin .mb-lg // large bottom margin .ml-0 // remove left margin .ml-md // medium left margin

Padding

.pt-0 // remove top padding .pr-0 // remove right padding .pb-0 // remove bottom padding .pl-0 // remove left padding

Border

.borderless .border-top-null .border-top .border-bottom

Floats

.pull-right .pull-left

Overflow

.overflow-auto

Hide / Show

.hidden // hide forced .hidden-normal // hide normal .display-block

Colours

.brand-orange

Other

.bullet // basic styling for lists