Skip to main content

Badge

Types

Icon

Result
Loading...
Live Editor
<div class="fds-badge">
  <span class="fds-icon fds-icon--xl">
    <i class="fa-light fa-bank"></i>
  </span>
</div>

Letter

Result
Loading...
Live Editor
<div class="fds-badge">
  <span class="fds-badge__letter">fds</span>
</div>

Image

Result
Loading...
Live Editor
<div class="fds-badge">
  <img class="fds-badge__image" src="https://images.unsplash.com/photo-1618354691373-d851c5c3a990?q=80&w=2367&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="badge-image"/>
</div>

Size

Result
Loading...
Live Editor
<div class="demo">
  <div class="fds-badge fds-badge--lg">
    <span class="fds-badge__letter">fds</span>
  </div>

  <div class="fds-badge">
    <span class="fds-badge__letter">fds</span>
  </div>
</div>

Circle

Letter

Result
Loading...
Live Editor
<div class="fds-badge fds-badge--circle">
  <span class="fds-badge__letter">fds</span>
</div>

Image

Result
Loading...
Live Editor
<div class="fds-badge fds-badge--circle">
  <img class="fds-badge__image" src="https://images.unsplash.com/photo-1633332755192-727a05c4013d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2960&q=80" alt="badge-circle-image"/>
</div>