Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
  • Very Popular

    Badges

    Jimi Wikman

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

    Discuss the Guide

    Recommended Comments

    There are no comments to display.



    Please sign in to comment

    You will be able to leave a comment after signing in



    Sign In Now
     Share

    • Invision Community Playbook

  • Latest Updates

×
×
  • Create New...