Badge

<!-- Default -->
<span class="badge ">123</span>

<!-- Alert -->
<span class="badge alert">123</span>

<!-- Warning -->
<span class="badge warning">123</span>

<!-- Info -->
<span class="badge info">123</span>

<!-- Success -->
<span class="badge success">123</span>

<span class="badge {{classname}}">123</span>
/* Default: No context defined */

/* Alert */
{
  "classname": "alert"
}

/* Warning */
{
  "classname": "warning"
}

/* Info */
{
  "classname": "info"
}

/* Success */
{
  "classname": "success"
}

  • Content:
    .badge {
      padding: .2rem .4rem;
    }
    
    .badge.alert {
      border: none;
      background-color: palette(alert);
      color: #fff;
      transition: background .2s linear;
        &:hover {
            background-color: palette(alert, dimmed);
        }
    }
    
    .badge.warning {
      border: none;
      background-color: palette(warning);
      color: #fff;
      transition: background .2s linear;
        &:hover {
            background-color: palette(warning, dimmed);
        }
    }
    
    .badge.info {
      border: none;
      background-color: palette(info);
      color: #fff;
      transition: background .2s linear;
        &:hover {
            background-color: palette(info, dimmed);
        }
    }
    
    .badge.success {
      border: none;
      background-color: palette(success);
      color: #fff;
      transition: background .2s linear;
        &:hover {
            background-color: palette(success, dimmed);
        }
    }
    
  • URL: /components/raw/badge/badge.scss
  • Filesystem Path: src/components/13-navigation/02-sidebar/01-atoms/02-badge/badge.scss
  • Size: 812 Bytes

There are no notes for this item.