360Giving Design System - Components

Icon Badge 

<!-- Material Icon -->
<span class="icon-badge">
    <div class="icon">

        <i class="material-icons icon__mat-icon">add_location</i>

    </div>

    Includes recipient locations
</span>


<!-- Overlaid Text -->
<span class="icon-badge">
    <div class="icon">

        <span class="icon__overlaid-text">CSV</span>

    </div>

    CSV files
</span>


<span class="icon-badge">
  {% render '@icon', { icon_name: icon_name, overlaid_text: overlaid_text } %}
  {{ label }}
</span>
 
/* Material Icon */
{
  "icon_name": "add_location",
  "label": "Includes recipient locations"
}


/* Overlaid Text */
{
  "overlaid_text": "CSV",
  "label": "CSV files"
}
  • Content: 
    .icon-badge {
  display: inline-block;
  border: solid 1px $black;
  border-radius: 10px;
  padding: 0.5rem 0.8rem;
  margin: 0 0.5rem 0.5rem 0;
  font-size: 80%;

  @include breakpoint($medium) {
    font-size: 90%;
  }
}
  • URL: /components/raw/icon-badge/icon-badge.scss
  • Filesystem Path: src/components/03-components/icon-badge/icon-badge.scss
  • Size: 223 Bytes

No notes defined.