iPro / Media

Badges

Badges are used to call out 'data tidbits' for important content that is dynamically loaded onto a page.

When To Use

To draw attention to new, important content on a page that might otherwise be missed.
To filter results with one or more tags.
To indicate the number of new or unread items within a container. For example, to indicate the number of plans within a customer's cart.

When To Consider Something Else

When users are likely to confuse a static badge with a button. For example, when the label appears in the same area of the page as buttons.
To call attention to new or updated content, consider changing the background color of the object itself or experiment with changing the font weight.
When users already expect content to be updated frequently. For example, on a site dedicated to breaking news. In this case placing the new content at the top may be enough.

Guidance

Users frequently confuse badges as buttons. Always conduct usability testing to make sure your particular implementation is not causing frustration.
If your badges are not interactive, be sure to disable hover, focus, and active styles.
Don’t mix interactive and static labels on your site. Once you establish a pattern for how badges behave, users will expect that behavior every time.
Don’t overdo it — if everything on a page is called out as important, nothing is important.

iPro Examples

h/off Health Off Exchange

h/on Health On Exchange

d/off Dental Off Exchange

d/on Dental On Exchange

d Dental

g Medigap

m Medicare Advantage

r Medicare Rx

s Short Term

l Life

v Vision

i Critical Illness

n Accident

Cancer Cancer

hsm Health Sharing Ministry

dis Discount Health

e Limited Medical Indemnity

Icons

All icons are listed in alphabetical order, and almost all are in SVG format with the exception of 3rd party logos - some are transparent PNG.

Selecting Icon Sizes

Changing icon sizes is simple! Just replace the size value within the svg class to one of our predetermined size which are: s16, s24, s32, and s64 pixels

To change the color of the icon, you'll need to add a custom class to the svg tag and add a fill color through CSS, example: .icon-blue {fill: #0074c8;}

Example:

Class: s16

Class: s24

Class: s32

Class: s64

Note: Add class .fill to the <svg class="s32 fill"> tag to fill in the icon, the medicare icon below demonstrates the .fill class.

How to Use

To implement the SVG icon copy the code below and replace the ID at the end to the ID of the icon you want to use.


<svg class="s32 fill" viewBox="0 0 32 32"><use xlink:href="icons/icons.svg#quotit_q"/></svg>

Dependency: <script src="js/svgxuse.js"></script>

Icon: A

#adobe_pdf_available

#adobe_pdf_not_available

#adobe_reader

#alert

#applicant_return

#applications

#arrow_down

#arrow_down_circle

#arrow_left

#arrow_left_circle

#arrow_right

#arrow_right_circle

#arrow_up

#arrow_up_circle

#auto_reply

#award

#admin

#admin_only_person

#admin_only_shield

#admin_only_eye

#arrow_up_down

#arrow_up_down_filled

#arrow_up2

#arrow_down2

#arrow_up2_filled

#arrow_down2_filled

#applicant_return_2

#announcement

#authorization

#agentcubed

#add

Icon: B

#bullet_arrow

#bullet_arrow_double

#bullet_numbered

#buyers_guide

#building

Icon: C

#calculator

#call

#call_us

#cancel

#carrier_forms

#carrier_status_update

#cart

#cart_add

#client_management

#close_window

#comment

#contact_info

#contact_new_individual

#contact_page

#contact_support

#contact_us

#credit_mastercard

#credit_payment

#credit_visa

#customer

#customer_add

#customer_new

#customer_satisfaction

#customization

#car

#coverage

#carrier_status_update_2

#collaspe

Icon: D

#date

#date_created

#date_effective

#date_submitted

#delete_trash

#dental_brush

#dental_plans

#disability_ambulance

#disability_bandaid

#doctor_find

#doctor_search

#document_csv

#document_doc

#document_pdf

#document_xls

#download_apple

#download_google

#dashboard

Icon: E

#easy_to_use

#edit

#edit_pencil

#elevating_health_rocket

#elevating_health_takeoff

#email

#email_outbound

#email_refer_friend

#email_stamp

#email_at

Icon: F

#fail

#family

#family_health

#faq

#featured

#file_download

#file_upload

#filter

#folder

#folder_open

#full_screen_close

#full_screen_open

#featured_favorite

#favorites_heart

Icon: G

#globe

#globe_planet

#group_activity_summary

#group_manage_report

#group_view_contacts

Icon: H

#health_plans

#help

#help_desk

#hierarchy

#history

#hospital_finder

#hr_forms

#heart

#home

Icon: I

#ifp_benefits

#info

#info_added

#info_more

#insurance_accident

#insurance_ancillary

#insurance_cancer

#insurance_chip

#insurance_critical_illness

#insurance_dental

#insurance_group_health

#insurance_health

#insurance_life

#insurance_limited_medical_indemnity

#insurance_premiums

#insurance_temporary_health

#insurance_vision

#info_2

Icon: L

#lead_exchange

#leads

#leads_funnel

#letters

#license_numbers

#life_insurance

#link

#login

#login_new

Icon: M

#math_division

#math_minus

#math_multiply

#math_plus

#medicare

#mobile_solution

#money_enrollment_cost

#money_manage_funds

#money_recurring

#map_point

#money_reimbursement

#medication

Icon: N

#note_add

#note_view

Icon: O

#online_client_services

#online_request_demo

#online_view

Icon: P

#package_bundle

#package_four

#package_one

#packages

#package_three

#package_two

#password

#password_forgot

#plan_benefit_details

#plan_bronze

#plan_card

#plan_clipboard

#plan_clipboard_page

#plan_details

#plan_gold

#plan_silver

#plan_types

#plan_view_similiar

#policy

#policy_add

#policy_edit

#policy_promote_active

#print

#provider_lookup

#priority_high

#priority_low

#priority_normal

#product_epro

#product_ipro

#product_mpro

#product_multiple

#product_webexpress

#proposal

#proposal_lookup

#proposal_send

#proposal_send_page

#provider_search

#paperclip

#pin

#policy_auto

#policy_detail_auto

#page

Icon: Q

#question

#question_answer

#quick_quote

#quotit_hub

#quotit_q

Icon: R

#rating_star

#reminder

#renewal_calendar

#reorder

#request_callback

#retirement_401k

#review

Icon: S

#save

#save_account

#save_username

#search

#search_new

#search_records

#setting

#setting_page

#setting_user

#social_facebook

#social_google_plus

#social_linkedin

#social_twitter_bird

#social_twitter_t

#sort

#sort_ascending

#sort_descending

#special_offer

#status_good

#status_off

#success_checkmark

#scissors

#share

#sticky_notes

Icon: T

#tailored_solutions_lightbulb

#tailored_solutions_needle_thread

#technology

#time_stopwatch

#tree_structure

#tree_structure_alert

#tree_structure_open

#translator

Icon: U

#underwriting_guidelines

#update_anytime

#update_username

#user

#user_profile

Icon: V

#value_focused

#view_activity_summary

#view_details

#vision_glasses

#void

Icon: W

#walkthrough

Icon: X

Logos

Graphical Logos

These logos are either JPG and/or PNG format.

UI Style Guide