Spartherm

Badges 

<div class="container mb-5">
    <div class="desc desc-line">Badges / Label</div>

    <pre><code>.badge-lg</code></pre>
    <div class="row py-4 justify-content-between">
        <div class="col-12 col-md-6 col-lg-6 mb-3">
            <img src="https://via.placeholder.com/550x290" class="img-fluid">
            <span class="badge badge-dark badge-lg top-left">Optionaler<br>Störer</span>
        </div>
        <div class="col-12 col-md-6 col-lg-6 mb-3">
            <img src="https://via.placeholder.com/550x290" class="img-fluid">
            <span class="badge badge-gradient-accent badge-lg bottom-right">Optionaler<br>Störer</span>
        </div>
    </div>

    <pre><code>.badge</code></pre>
    <div class="row py-4 justify-content-between">
        <div class="col-12 col-md-6 col-lg-6 mb-3">
            <img src="https://via.placeholder.com/550x290" class="img-fluid">
            <span class="badge badge-dark top-left">Optionaler<br>Störer</span>
        </div>
        <div class="col-12 col-md-6 col-lg-6 mb-3">
            <img src="https://via.placeholder.com/550x290" class="img-fluid">
            <span class="badge badge-gradient-accent bottom-right">Optionaler<br>Störer</span>
        </div>
    </div>

    <pre><code>.badge-sm</code></pre>
    <div class="row py-4 justify-content-between">
        <div class="col-12 col-md-6 col-lg-4 mb-3">
            <img src="https://via.placeholder.com/550x290" class="img-fluid">
            <span class="badge badge-gradient-primary badge-sm top-right">Optionaler Störer</span>
        </div>
        <div class="col-12 col-md-6 col-lg-4 mb-3">
            <img src="https://via.placeholder.com/550x290" class="img-fluid">
            <span class="badge badge-gradient-accent badge-sm bottom-left">Optionaler<br>Störer</span>
        </div>

    </div>
</div>
 
<div class="container mb-5">
    <div class="desc desc-line">Badges / Label</div>

    <pre><code>.badge-lg</code></pre>
    <div class="row py-4 justify-content-between">
        <div class="col-12 col-md-6 col-lg-6 mb-3">
            <img src="https://via.placeholder.com/550x290" class="img-fluid">
            <span class="badge badge-dark badge-lg top-left">Optionaler<br>Störer</span>
        </div>
        <div class="col-12 col-md-6 col-lg-6 mb-3">
            <img src="https://via.placeholder.com/550x290" class="img-fluid">
            <span class="badge badge-gradient-accent badge-lg bottom-right">Optionaler<br>Störer</span>
        </div>
    </div>

    <pre><code>.badge</code></pre>
    <div class="row py-4 justify-content-between">
        <div class="col-12 col-md-6 col-lg-6 mb-3">
            <img src="https://via.placeholder.com/550x290" class="img-fluid">
            <span class="badge badge-dark top-left">Optionaler<br>Störer</span>
        </div>
        <div class="col-12 col-md-6 col-lg-6 mb-3">
            <img src="https://via.placeholder.com/550x290" class="img-fluid">
            <span class="badge badge-gradient-accent bottom-right">Optionaler<br>Störer</span>
        </div>
    </div>

    <pre><code>.badge-sm</code></pre>
    <div class="row py-4 justify-content-between">
        <div class="col-12 col-md-6 col-lg-4 mb-3">
            <img src="https://via.placeholder.com/550x290" class="img-fluid">
            <span class="badge badge-gradient-primary badge-sm top-right">Optionaler Störer</span>
        </div>
        <div class="col-12 col-md-6 col-lg-4 mb-3">
            <img src="https://via.placeholder.com/550x290" class="img-fluid">
            <span class="badge badge-gradient-accent badge-sm bottom-left">Optionaler<br>Störer</span>
        </div>

    </div>
</div>
 
/* Kein Inhalt definiert. */
  • Inhalt: 
    .badge {
  position: relative;
  padding: 0.875em 1.75em;
  font-size: 1rem;
  font-weight: $font-weight-medium;
  line-height: 1.25;
  text-decoration: none;
  text-transform: uppercase;
  &-sm {
    font-size: 0.875rem;
    padding: 0.75em 1.5em;
  }
  &-lg {
    font-size: 1.125rem;
    padding: 1.875em 1.875em;
  }
  &-gradient-accent {
    @extend .gradient-accent;
  }
  &-gradient-primary {
    @extend .gradient-primary;
  }
  &-gradient-secondary {
    @extend .gradient-secondary;
  }
  &-dark {
    .dark & {
      background: $white;
      color: $black;
    }
  }
  &.top-left {
    position: absolute;
    top: -20px;
    left: -20px;
  }
  &.top-right {
    position: absolute;
    top: -20px;
    right: -20px;
  }
  &.bottom-right {
    position: absolute;
    right: -20px;
    bottom: -20px;
  }
  &.bottom-left {
    position: absolute;
    left: -20px;
    bottom: -20px;
  }
}
  • URL: /components/raw/badges/badges.scss
  • Pfad Dateisystem: components\04-components\badges\badges.scss
  • Größe: 953 Bytes

Keine Notizen vorhanden.