Style Guide

Support | Login

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.

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
<div><span class="someIcon"></span>Icon Name</div> -or- <a><span class="someIcon"></span>Icon Name</a>

Highlighted Content

John
William
Smith

Font Stack:

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

IE Bugs and How to Fix Them

IE Bugs and How to Fix Them

Current User: System Last Login:

© 2024 FinThrive, Inc. and its affiliates and subsidiaries (collectively, “FinThrive")" - All Rights Reserved

Version: 2024.4.15.2 ClearIQ - Patent Pending

Outpatient Evaluation - Patent Pending

FinThrive does not provide medical advice, diagnosis, or treatment advice. The information provided is based on historical medical information obtained from the Provider. Providers are responsible for determining appropriate diagnosis/treatment options.

* HFMA staff and volunteers determined that this product has met specific criteria developed under the HFMA Peer Review Process. HFMA does not endorse or guaranty the use of this product.

CPT only © 2023 American Medical Association.  All rights reserved.  CPT is a registered Trademark of the American Medical Association.

Fee schedules, relative value units, conversion factors and/or related components are not assigned by the AMA, are not part of CPT®, and the AMA is not recommending their use.

The AMA does not directly or indirectly practice medicine or dispense medical services. The AMA assumes no liability for data contained or not contained herein.

Build: 2024.4.15.2

Site ID: 5727

azrvpciqweb04 Emanuel Medical/Quadax

Auth Ticket Expires:

53ejl54mkbehon3rdcllqrdw

Style Guide