14Chips
Chips can be used to represent small blocks of information like tags. Use these colors to color code the chips: #58799C, #2B7FBF, #3BA2E6, #FFA02F, #52B77D, #F8C677, #77CBF9, #66DD87
Default Chip
Chip with dot
Chip with closing icon
Empty Chip
<div class="chip">
<span class="chip__title">Default Chip</span>
</div>
<div class="chip">
<div class="chip__dot" style="background-color: #1ea3eb"></div>
<span class="chip__title">Chip with dot</span>
</div>
<div class="chip">
<span class="chip__title">Chip with closing icon</span>
<svg class="svg-icon svg-icon--deep-medium-navy svg-icon--large remove-chip"
role="presentation"
>
<use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--cancel-circle"></use>
</svg>
</div>
<div class="chip chip--empty">
<span class="chip__title">Empty Chip</span>
</div>
<br><br>
<div class="toggle">
<input type="checkbox" value="animals"checked="">
<label class="js-click sy-rounded-light-focus" tabindex="0">
<span class="visible-label" aria-hidden="true">Animals</span>
<span class="show-for-sr">Animals</span>
</label>
</div>
<div class="toggle">
<input type="checkbox" name="service_areas" value="community-nonprofit-development" id="id_service_areas_3">
<label class="js-click sy-rounded-light-focus" tabindex="0" for="id_service_areas_3">
<span class="visible-label" aria-hidden="true">Community & Nonprofit Development</span>
<span class="show-for-sr">Community & Nonprofit Development</span>
</label>
</div>
<br><br>