Grid System

Single Column Layout

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> Paragraph </div> </div> </div> </div>

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> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div> <div class="col-sm-4"> <h2>Column Title</h2> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div> </div> </div>

Widgets

<div class="row row-widget"> <div class="col-sm-4 wrapper-widget"> <div class="widget"> <div class="header"> <h2>Widget header</h2> </div> <div> Widget content </div> </div> </div> <div class="col-sm-8 wrapper-widget"> <div class="widget"> <div class="header"> <h2>Widget header</h2> </div> <div> Widget content </div> </div> </div> </div> <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>

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> <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"> </button> </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

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

Example copy placeholder

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

Headers

Page Header

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

Page Header with 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"> Link</a> </div>

Navigation

Tabs

<ul class="nav nav-tabs"> <li class="selected"> <a href="">Active Tab</a> </li> <li> <a href="">Tab 2</a> </li> <li> <a href="">Tab 3</a> </li> </ul>

Sub Tabs

Header Tabs

<div class="row row-widget"> <div class="col-sm-12 wrapper-widget"> <div class="widget padding-LR-null"> <div class="header header-tabs margin-bottom"> <h2>Title</h2> <ul class="nav nav-tabs"> <li class="active"> <a href="#">Option One</a> </li> <li> <a href="#">Option Two</a> </li> </ul> </div> </div> </div> </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.

Changing colours of links on hover

Vertical alignment in cells:

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

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"> Rows per page: <select> <option value="">10</option> <option value="">25</option> <option value="">50</option> <option value="">100</option> <option value="">400</option> </select> Showing 4401 - 4800 of 13867 </div> </div> </div>

Table Filter with Link

Rows per page:

Showing 4401 - 4800 of 13867

Link

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

Rows per page:

Showing 4401 - 4800 of 13867

<div class="row"> <div class="table-filters"> <div class="col-sm-12 text-right"> Rows per page: <select> <option value="">10</option> <option value="">25</option> <option value="">50</option> <option value="">100</option> <option value="">400</option> </select> Showing 4401 - 4800 of 13867 <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">Add Button </button> <button class="btn btn-add-disabled"> <i class="fa-regular fa-plus">Add Button Disabled </button>

Add Button with Caret

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

Button Group Toggle

Approve Suggest Changes Reject

<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"> Approve </label> <label class="btn btn-default"> <input type="radio" name="options" id="option2" autocomplete="off"><i class="fa-regular fa-pencil"> Suggest Changes </label> <label class="btn btn-default"> <input type="radio" name="options" id="option3" autocomplete="off"><i class="fa-regular fa-ban"> Reject </label> </div>

Chips

Default chips

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

Status chips

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

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

Inline Radio Buttons

Yes No

<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

Option one

Option two

Option three

<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

Checkbox 1 Checkbox 2

<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

Checkbox

Checkbox 1

Checkbox 2

Disabled Checkbox

<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

Text Feild

<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

Text area

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

<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 </div> <input type="text" class="form-control"> </div> </div> </div>

Input with append

<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 </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"> 00:00 </label> <label> <input type="checkbox" value="00:00"> 01:00 </label> <label> <input type="checkbox" value="00:00"> 03:00 </label> </div> </div> </div>

Horizontal Form

Text field one

Text field two

Text field three

<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

Error Message

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"> This is an error message. </div> </div>

Form Validation Warning

Warning Message

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"> This is an warning message. </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 class="onoffswitch-switch"> </label> </div> </div> </div>

Feedback

Messages

Info message

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

Warning message

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

Error message

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

Success message

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

Form Warning Message

Form field label

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

Form Info Message

Form field with important 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 </div> </div>

Character Limit Counter

Label

<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"> </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> Uploading... </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"> You have 6 commissions to validate </a> <a href="#" class="list-group-item"> <i class="fa-regular fa-exchange" aria-hidden="true"> <p class="icon">You have 2 pending transaction queries </a> <a href="#" class="list-group-item"> <i class="fa-regular fa-user" aria-hidden="true"> <p class="icon">You have 1 publisher to approve </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.

Option 1
Option 2

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

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

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

Circle Icon Colours

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

<span class="pln">
</span><span class="tag">&lt;button</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"button"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn btn-default"</span><span class="pln"> </span><span class="atn">data-toggle</span><span class="pun">=</span><span class="atv">"modal"</span><span class="pln"> </span><span class="atn">data-target</span><span class="pun">=</span><span class="atv">"#exampleModal"</span><span class="tag">&gt;</span><span class="pln">
    Launch demo modal
</span><span class="tag">&lt;/button&gt;</span><span class="pln">

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

-

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.

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

<span class="pln">
</span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"tooltip in right"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"tooltip-arrow"</span><span class="tag">&gt;&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"tooltip-inner"</span><span class="tag">&gt;</span><span class="pln">Description.</span><span class="tag">&lt;/div&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span>

Speech Bubble

<span class="pln">
</span><span class="tag">&lt;blockquote</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"speech-bubble"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"speech-bubble-arrow left"</span><span class="tag">&gt;&lt;/span&gt;</span><span class="pln">
    </span><span class="tag">&lt;p&gt;</span><span class="pln">Message</span><span class="tag">&lt;/p&gt;</span><span class="pln">
</span><span class="tag">&lt;/blockquote&gt;</span>

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

UI Style guide

A standard HTML markup and style reference for the Awin interface

Grid System

Single Column Layout

Layout Single Column

Layout Single Column

Two Column Layout

Two Column Layout

Column Title

Column Title

Widgets

Widget header

Widget header

Widget with List Group

To Do List

Widget with table of contents

Account Overview

Search Widget

Typography

Headers

h1 - Special. Awin Title

h1. Awin Title

h2. Awin Title

h3. Awin Title

h4. Awin Title

h5. Awin Title

h6. Awin Title

Text Style

Headers

Page Header

Page Title

Page Header with Link

Page Title

Navigation

Tabs

Sub Tabs

Header Tabs

Title

Tables

Table Layout

Table Cell Styles

Filters

Table Filter with Page Selector

Table Filter with Link

Table Filter with Button

Table Filter with Dropdown

Form Elements

Buttons

Default

Small

Add Button

Add Button with Caret

Button Group Toggle

Chips

Default chips

Status chips

Form Layout

File Upload

Inline Radio Buttons

Stacked Radio Buttons

Checkbox

Inline Checkboxes

Stacked Checkboxes

Text Field

Text Area

Select

Select2 Angular

Input with prepend

Input with append

Input with Checkbox

Input with Select

Grid selection

Horizontal Form

Disabled Form Group

Form Validation Error

Form Validation Warning

On Off Switch

Feedback

Messages

Form Warning Message

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.