Style Guide

Colors and Alerts
Container Examples
Forms and Buttons
Icons
Highlighted Content and Font Stack

Colors

Blues

#034b78

#e1e7ed

Greys

#a7a7a7

#cccccc

#f2f2f2

#f7f7f7

Orange

#ec8900

Alerts and Messages

Info message

Use CSS class .info

Warning message

Use CSS class .warning

Success message

Use CSS class .success

Red Alert message

Use CSS class .red_alert

Standard Container Example

A lot of ClearIQ’s content is contained in containers, such as the one this paragraph is in, and other UI examples in this document. The Idea behind this is to group information in a meaningful way. Only use this container CSS class content_container as the outer most container, accompanied with a header that represents its contents.

<div class="content_container"> <h3>Title of Container</h3> Content here... </div>

Container with Inner Containers

If additional grouping is needed inside the outer container use the html tags fieldset and legend to achieve this. See below example.

Inner Container Example:

Content...

2nd Inner Container Example:

Content...

<div class="content_container"> <h3>Title of Container</h3> <fieldset> <legend>Legend Label...</legend> </fieldset> <fieldset> <legend>Legend Label...</legend> </fieldset> </div>

Container with Two Columns

Left Container Wrap content withcontainer_left_columnCSS class

Right Container Wrap content withcontainer_right_columnCSS class

<div class="container_left_column"> <fieldset> <legend>Left Container</legend> </fieldset> </div> <div class="container_right_column"> <fieldset> <legend>Right Container</legend> </fieldset> </div> <div class="clearBoth"></div>

Data Table Example

Table Header 1	Table Header 2	Table Header 3	Table Header 4	Table Header 5
Footer...
Table Data	Table Data	Table Data	Table Data	Table Data
Table Data	Table Data	Table Data	Table Data	Table Data
Table Data	Table Data	Table Data	Table Data	Table Data
Table Data	Table Data	Table Data	Table Data	Table Data

<div class="search_content_container"> <h3>Title of Container</h3> <table class="data-table"> <thead class="searhResults_header"> <tr> <th>Table Header 1</th> </tr> </thead> <tfoot> <tr> <td colspan="1"> Footer...</td> </tr> </tfoot> <tbody> <tr> <td>Table Data....</td> </tr> </tbody> </table> </div>

Form Sizes

Put CSS classes form-small, form-medium, or form-large on a parent container.

form-small size

form-medium size

form-large size

Buttons

Use CSS .cancel_btn
Use CSS .emphasis
Use CSS .theme

Icons

.icons-approved

.icons-auto

.icons-auto-insurance

.icons-bank

.icons-calculator

.icons-campaign-measurement

.icons-catch-fraud

.icons-chat

.icons-company-attributes

.icons-computer

.icons-connect

.icons-consultative-people

.icons-court

.icons-create-account

.icons-credit-bureau

.icons-credit-card

.icons-credit-history

.icons-credit-issue

.icons-credit-monitoring

.icons-credit-scope

.icons-credit-score

.icons-dashboard

.icons-database

.icons-declined

.icons-document

.icons-download

.icons-education

.icons-exclamation

.icons-globe

.icons-good-credit-score

.icons-google

.icons-graph

.icons-help

.icons-home

.icons-identity

.icons-identity-protection

.icons-industry-verticles

.icons-info

.icons-lifestage-events

.icons-load-wheel

.icons-loan

.icons-location

.icons-lock

.icons-login

.icons-logout

.icons-mail

.icons-mail-exclamation

.icons-matching

.icons-mitigate-risk

.icons-momentum

.icons-monitor

.icons-mortgage

.icons-multidimentional-view

.icons-notification

.icons-offer-varification

.icons-optimization

.icons-password

.icons-patent-pending

.icons-phone

.icons-poor-credit-score

.icons-print

.icons-product

.icons-profession

.icons-property-insurance

.icons-resolve-credit-issue

.icons-search

.icons-security

.icons-settings

.icons-support

.icons-tablet

.icons-targeted

.icons-shopping-cart

.icons-targeted-campaign

.icons-thumbs-up

.icons-tools

.icons-twitter

.icons-unlock

.icons-usa

.icons-user

.icons-varify-account

.icons-wallet

.icons-youtube

.doc_icon

.alert-icon

.alert_yellowIcon

.icon-plus-12

.whiteArrowRight

.whiteArrowDown

.darkArrowRight

.darkArrowDown

.darkCheckmark

.greenCheckmark

.pStatus_greenIcon

.pStatus_greyIcon

.pStatus_greyXIcon

.pStatus_orangeIcon

.pStatus_yellowIcon

.p_checkIcon

.p_Error

.p_inprogressIcon

.previous-icon

.added-icon

.scriptToggle_down

.scriptToggle_up

.questionMark_icon

.icon-procedures-blue

.icon-insurance-blue

.icon-estimate-blue

.icon-collectpayment-blue

.history_icon-blue

.MN_Icon

.PA_Icon

.icon-elgibility-blue

.icon-charity-blue

.icon-finance-blue

.icon-creditcheck-blue

.icon-id-blue

.icon-benefits-blue

.icon-guarantor-blue

.pencil_icon

.button-notes-active

.button-notes

.icon-task

.icon-notes

.icon-letter

Highlighted Content

First Name

John

Middle Name

William

Last Name

Smith

Font Stack:

Font-family: "Trebuchet MS", Arial, Helvetica, sans-serif

IE Bugs and How to Fix Them

Current User: System Last Login: