Rock Badges

Styling Badges

Use Rock’s built-in badge styles to simplify the creation of custom Rock badges starting in V14.

When using our recommended markup, Rock Badges will automatically scale wherever they are placed within the Rock interface.

Enabling Legacy Badge Markup

If custom badges that are not rendering correctly in Rock V14 add the following snippet to the top of the Rock theme CSS Overrides section. This can be found by selecting the "Rock" theme in CMS Configuration > Themes. Migrating to the new V14 markup as soon as possible is recommended.

@enable-legacy-badges: true;

Rockbadge Standard

<div class="rockbadge rockbadge-standard">
    <span class="metric-value">9</span>
    <span class="metric-unit">yr</span>
</div>

<div class="rockbadge rockbadge-standard">
    <span class="metric-value">eRA</span>
</div>

Rockbadge Icon

<div class="rockbadge rockbadge-icon">
    <i class="badge-icon fa fa-tint"></i>
</div>

<div class="rockbadge rockbadge-icon rockbadge-circle">
    <i class="badge-icon fa fa-tint"></i>
</div>

<div class="rockbadge rockbadge-icon rockbadge-disabled">
    <i class="badge-icon fa fa-tint"></i>
</div>

<div class="rockbadge rockbadge-icon rockbadge-disabled rockbadge-slash">
    <i class="badge-icon fa fa-tint"></i>
</div>

<div class="rockbadge rockbadge-icon rockbadge-slash">
    <i class="badge-icon fa fa-tint"></i>
</div>

<div class="rockbadge rockbadge-icon rockbadge-icon-nobg">
    <i class="badge-icon fa fa-tint"></i>
</div>

Rockbadge Fraction

<div class="rockbadge rockbadge-fraction">
    <span class="metric-value">0</span>
    <span class="metric-unit">/16</span>
</div>

Rockbadge Overlay

<div class="rockbadge rockbadge-overlay">
    <i class="badge-icon fa fa-chalkboard"></i>
    <span class="metric-value">13</span>
</div>

Rockbadge Label

<div class="rockbadge rockbadge-label">
    <span class="label label-info">General Group</span>
</div>