Badge Bar

This component is bar that contains multiple Badges.

The following code shows how to use a badge bar:

<div class="badge-bar">
  <span class="badge">Hello World 01</span>
  <span class="badge">Hello World 02</span>
  <span class="badge">Hello World 03</span>
  <span class="badge">Hello World 04</span>
  <!-- ... -->
</div>

The following list describe all existing block/element/modifier classes of the component.

.badge-bar - required the block that contains a list of badges

The following example shows how to use the badge bar.

Theme basic Screen size XL

html

Snapshot Example

This example shows the badge bar, that is below the Snapshot.

Theme de [FIX] Screen size XL

html

Ellipsis

This example shows the badge bar and badges with the .badge--ellipsis modifier.

Theme de [FIX] Screen size XL

html