Jump to content

Guides

Badges

Description

Badges are a useful way of showing some additional information about an item - its status, for example.

 

Standard badges

Standard badges receive the base class ipsBadge, and then one or more of the options shown below.

 

Badge styles

ipsBadge_new
Badge

ipsBadge_style2
Badge

ipsBadge_warning
Badge

ipsBadge_positive
Badge

ipsBadge_negative
Badge

ipsBadge_neutral
Badge

ipsBadge_intermediary
Badge

 

Badge sizes

ipsBadge_normal (default)
Badge

ipsBadge_medium
Badge

ipsBadge_large
Badge

 

Icon badges

Any of the above classes can used to create icon badges by adding the additional ipsBadge_icon class, and using a FontAwesome icon as the badge content. For example:

 

Status badges

"Status badges" is the term we use to denote the icons shown in datalists, record tables etc. that indicate the read/unread status of the icon to the user. They are separate to the badges described above and don't use the same classes.

The base class for status badges is ipsItemStatus, with additional options shown below.

ipsItemStatus_tiny
Shows a tiny status indicator. Include an icon (usually fa-circle) as the content of the element.

ipsItemStatus_small
Shows a small status indicator. Include an icon (usually fa-circle) as the content of the element.

ipsItemStatus_large
Shows a full status indicator. The indicator can be customized with an icon by including it as the content of the element:

<span class='ipsItemStatus ipsItemStatus_large'>
  <i class='fa fa-comments'></i>
</span>

ipsItemStatus_read
The 'read' status of the badge, causing it to fade out (a convention for read content in the IPS Community Suite).

 


  Report Guide


×