Odznaki - instrukcja do szablonu "Ahead"

Ta instrukcja również dotyczy motywów Flow, Vogue i Pipeline!

Niewielki komponent do liczenia i etykietowania.

Primary Secondary Success Danger Warning Info Light Dark Primary Secondary Success Danger Warning Info Light Dark

W kolorze motywu projektu

Ahead only

Klasa Default umożliwia tworzenie ikon w kolorze wybranym w ustawieniach motywu projektu.

Default Default pill Default soft


          <span class="badge badge-default">Default</span>
<span class="badge badge-pill badge-default">Default pill</span>

<span class="badge badge-default-soft">Default soft</span>

Półprzezroczysty

Ahead only

Klasa Soft umożliwia tworzenie ikon z półprzezroczystym kolorem tła.

Primary Secondary Success Info Warning Danger Light Dark


          <span class="badge badge-primary-soft">Primary</span>
<span class="badge badge-secondary-soft">Secondary</span>
<span class="badge badge-success-soft">Success</span>
<span class="badge badge-info-soft">Info</span>
<span class="badge badge-warning-soft">Warning</span>
<span class="badge badge-danger-soft">Danger</span>
<span class="badge badge-light-soft">Light</span>
<span class="badge badge-dark-soft">Dark</span>

Rozmiary

Ahead only

Aby utworzyć ikonę o dużym rozmiarze, należy użyć klasy .badge-lg. Można również zwiększyć rozmiar tekstu wewnątrz ikony.

Large Standard


          <span class="badge badge-lg badge-primary">
  <span class="h6 text-uppercase font-weight-bold">Large</span>
</span>

Okrągłe ikony

Ahead only

Aby utworzyć okrągłe ikony, użyj klasy .badge-rounded-cirle.


  <span class="badge badge-lg badge-rounded-circle badge-primary">
 
    <i class="icon icon-xxxxs">
  
      {call include_icon icon="feather/check"}
 
    </i>

  </span>

  <span class="badge badge-rounded-circle badge-secondary-soft">
 
    <i class="icon icon-xxxxs">
  
      {call include_icon icon="feather/check"}
 
    </i>

  </span>

Pozycjonowanie

Ahead only

Ikona może być umieszczona wewnątrz lub na zewnątrz elementu przy użyciu klas.badge-float-inside i .badge-float-outside.

Inside

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, sed modi officiis asperiores ex sapiente beatae earum, iusto labore! Fugiat officia iure mollitia, aut, error provident dolorum voluptates deleniti consectetur?

Outside


          <!-- Card -->
<div class="card">
  <div class="card-body">

    <!-- Badge -->
    <span class="badge badge-primary badge-pill badge-float badge-float-inside">
      Inside
    </span>
    
    <!-- Text -->
    <p class="mb-0">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, sed modi officiis asperiores ex sapiente beatae earum, iusto labore! Fugiat officia iure mollitia, aut, error provident dolorum voluptates deleniti consectetur?
    </p>

  </div>
</div>

<!-- Card -->
<div class="card">
  <div class="card-body">

    <!-- Badge -->
    <span class="badge badge-primary badge-pill badge-float badge-float-outside">
      Outside
    </span>
    
    <!-- Text -->
    <p class="mb-0">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, sed modi officiis asperiores ex sapiente beatae earum, iusto labore! Fugiat officia iure mollitia, aut, error provident dolorum voluptates deleniti consectetur?
    </p>

  </div>
</div>

Błąd w tekście? Zaznacz ją myszką i kliknij Ctrl + F1 lub kliknij na ten blok!