<span class="badge alert">123</span>
<span class="badge {{classname}}">123</span>
{
  "classname": "alert"
}
  • 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.