<div class="row">
  <div class="col-12">
    <app-heading></app-heading>
    <app-breadcrumb></app-breadcrumb>
    <div class="separator mb-5"></div>
  </div>
</div>
<div class="row">
  <div class="col-12">
    <div class="card mb-4">
      <div class="card-body ">
        <h5 class="mb-4">{{"badge.sizes" | translate}}</h5>
        <h1>{{"badge.heading" | translate}} <span class="badge badge-secondary">{{"badge.new" | translate}}</span></h1>
        <h2>{{"badge.heading" | translate}} <span class="badge badge-secondary">{{"badge.new" | translate}}</span></h2>
        <h3>{{"badge.heading" | translate}} <span class="badge badge-secondary">{{"badge.new" | translate}}</span></h3>
        <h4>{{"badge.heading" | translate}} <span class="badge badge-secondary">{{"badge.new" | translate}}</span></h4>
        <h5>{{"badge.heading" | translate}} <span class="badge badge-secondary">{{"badge.new" | translate}}</span></h5>
        <h6>{{"badge.heading" | translate}} <span class="badge badge-secondary">{{"badge.new" | translate}}</span></h6>
      </div>
    </div>

    <div class="card mb-4">
      <div class="card-body ">
        <h5 class="mb-4">{{"badge.colors" | translate}}</h5>
        <span class="badge badge-pill badge-primary mb-1">{{"badge.primary" | translate}}</span>{{" "}}
        <span class="badge badge-pill badge-secondary mb-1">{{"badge.secondary" | translate}}</span>{{" "}}
        <span class="badge badge-pill badge-success mb-1">{{"badge.success" | translate}}</span>{{" "}}
        <span class="badge badge-pill badge-danger mb-1">{{"badge.danger" | translate}}</span>{{" "}}
        <span class="badge badge-pill badge-warning mb-1">{{"badge.warning" | translate}}</span>{{" "}}
        <span class="badge badge-pill badge-info mb-1">{{"badge.info" | translate}}</span>{{" "}}
        <span class="badge badge-pill badge-light mb-1">{{"badge.light" | translate}}</span>{{" "}}
        <span class="badge badge-pill badge-dark mb-1">{{"badge.dark" | translate}}</span>{{" "}}
      </div>
    </div>

    <div class="card mb-4">
      <div class="card-body ">
        <h5 class="mb-4">{{"badge.outline" | translate}}</h5>
        <span class="badge badge-pill badge-outline-primary mb-1">{{"badge.primary" | translate}}</span>{{" "}}
        <span class="badge badge-pill badge-outline-secondary mb-1">{{"badge.secondary" | translate}}</span>{{" "}}
        <span class="badge badge-pill badge-outline-success mb-1">{{"badge.success" | translate}}</span>{{" "}}
        <span class="badge badge-pill badge-outline-danger mb-1">{{"badge.danger" | translate}}</span>{{" "}}
        <span class="badge badge-pill badge-outline-warning mb-1">{{"badge.warning" | translate}}</span>{{" "}}
        <span class="badge badge-pill badge-outline-info mb-1">{{"badge.info" | translate}}</span>{{" "}}
        <span class="badge badge-pill badge-outline-light mb-1">{{"badge.light" | translate}}</span>{{" "}}
        <span class="badge badge-pill badge-outline-dark mb-1">{{"badge.dark" | translate}}</span>{{" "}}
      </div>
    </div>


    <div class="card mb-4">
      <div class="card-body ">
        <h5 class="mb-4">{{"badge.links" | translate}}</h5>
        <a href="javascript:;" class="badge badge-primary mb-1">{{"badge.primary" | translate}}</a>{{" "}}
        <a href="javascript:;" class="badge badge-secondary mb-1">{{"badge.secondary" | translate}}</a>{{" "}}
        <a href="javascript:;" class="badge badge-success mb-1">{{"badge.success" | translate}}</a>{{" "}}
        <a href="javascript:;" class="badge badge-danger mb-1">{{"badge.danger" | translate}}</a>{{" "}}
        <a href="javascript:;" class="badge badge-warning mb-1">{{"badge.warning" | translate}}</a>{{" "}}
        <a href="javascript:;" class="badge badge-info mb-1">{{"badge.info" | translate}}</a>{{" "}}
        <a href="javascript:;" class="badge badge-light mb-1">{{"badge.light" | translate}}</a>{{" "}}
        <a href="javascript:;" class="badge badge-dark mb-1">{{"badge.dark" | translate}}</a>{{" "}}
      </div>
    </div>
    <div class="card mb-4">
      <div class="card-body ">
        <h5 class="mb-4">{{"badge.counter-badges" | translate}}</h5>
        <button type="button" class="btn btn-primary">Notifications <span
            class="badge badge-light">4</span></button>{{" "}}
        <button type="button" class="btn btn-primary">Notifications <span
            class="badge badge-secondary">4</span></button>{{" "}}
      </div>
    </div>

    <div class="card mb-4">
      <div class="card-body ">
        <h5 class="mb-4">{{"badge.bootstrap-default" | translate}}</h5>
        <span class="badge badge-primary mb-1">{{"badge.primary" | translate}}</span>{{" "}}
        <span class="badge badge-secondary mb-1">{{"badge.secondary" | translate}}</span>{{" "}}
        <span class="badge badge-success mb-1">{{"badge.success" | translate}}</span>{{" "}}
        <span class="badge badge-danger mb-1">{{"badge.danger" | translate}}</span>{{" "}}
        <span class="badge badge-warning mb-1">{{"badge.warning" | translate}}</span>{{" "}}
        <span class="badge badge-info mb-1">{{"badge.info" | translate}}</span>{{" "}}
        <span class="badge badge-light mb-1">{{"badge.light" | translate}}</span>{{" "}}
        <span class="badge badge-dark mb-1">{{"badge.dark" | translate}}</span>{{" "}}
      </div>
    </div>
  </div>
</div>
