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