Wake Creators LogoCSS - Components Squid Style
Getting Started
Content
Layout
Forms
Components
Accordion CollapseAlertBadgeExempleOver ElementBoxBreadcrumbButtonCardDropdownLoaderModalPaginationProgress BarStepsTabsTagToastToolip
Utilities
Styleguide

Badge

Badges commonly used for notifications or small counts

Exemple


10
100
100
<span class='badge mb-2'></span>
<span class='badge mb-2'>10</span>
<span class='badge background-yellow black mb-2'>100</span>
<span class='badge background-yellow black mb-2 rounded'>100</span>

Over Element


10
100
100
<i class="far fa-comment-alt-lines position-relative">
  <span class='badge over-element'></span>
</i>
<i class="far fa-comment-alt-lines position-relative">
  <span class='badge over-element top-left'>10</span>
</i>
<i class="far fa-comment-alt-lines position-relative">
  <span class='badge background-yellow black over-element bottom-right'>100</span>
</i>
<i class="far fa-comment-alt-lines position-relative">
  <span class='badge background-yellow black rounded over-element bottom-left'>100</span>
</i>