2.8 #Components.chipsContainer ChipsContainer

Toggle example guides Toggle HTML markup

ChipsContainer is a component which holds Chips. The example here puts the end and start tags of the chips together since they use inline-flex display, otherwise there is too much spacing between them. This will never be a problem once implemented in React.

Browser support: IE9+, Safari6+, Firefox30+, Chrome30+

This is a great tag
This is a great tag
This is a great tag
Markup
<div class="sb-chips-container sb-padding-top-s sb-padding-left-xl sb-border-bottom-light-3">
  <div className="sb-container sb-flex sb-flex-wrap sb-align-items-start">
    <div class="sb-chip" tabindex="0" aria-label="This is a great tag">
      <div class="sb-chip__content">
       This is a great tag
      </div>
    </div><div class="sb-chip" tabindex="0" aria-label="This is a great tag">
      <div class="sb-chip__content">
       This is a great tag
      </div>
    </div><div class="sb-chip" tabindex="0" aria-label="This is a great tag">
      <div class="sb-chip__content">
       This is a great tag
      </div>
    </div>
  </div>
</div>
Source: components/_chips-container.scss, line 1