7 #Chip Chip
7.1 #Chip.avatar Chip with avatar:
John Smith
Html
<div class="sf-chip -avatar -removable">
<span class="sf-chip__avatar">
<img class="sf-chip__image" src="/assets/AnnaGreen.png" alt="Avatar Image" />
</span>
<span class="sf-chip__content">
John Smith
</span>
<i class="sf-icon -close -size-2xs -black sf-chip__remove-button"></i>
</div>
7.2 #Chip.default Default chip
.sf-chip
Default chip
Default chip with remove
Html
<div class="sf-chip">
<div class="sf-chip__content">
Default chip
</div>
</div>
<div class="sf-chip -removable">
<div class="sf-chip__content">
Default chip with remove
</div>
<i class="sf-icon -close -size-2xs -black sf-chip__remove-button"></i>
</div>
7.3 #Chip.default-error error Chip
.sf-chip.-error
error chip
error chip with remove
Html
<div class="sf-chip -error">
<div class="sf-chip__content">
error chip
</div>
</div>
<div class="sf-chip -error -removable">
<div class="sf-chip__content">
error chip with remove
</div>
<i class="sf-icon -close -size-2xs -black sf-chip__remove-button"></i>
</div>
7.4 #Chip.default-info info Chip
.sf-chip.-info
info chip
info chip with remove
Html
<div class="sf-chip -info">
<div class="sf-chip__content">
info chip
</div>
</div>
<div class="sf-chip -info -removable">
<div class="sf-chip__content">
info chip with remove
</div>
<i class="sf-icon -close -size-2xs -black sf-chip__remove-button"></i>
</div>
7.5 #Chip.default-invert invert Chip
.sf-chip.-invert
invert chip
invert chip with remove
Html
<div class="sf-chip -invert">
<div class="sf-chip__content">
invert chip
</div>
</div>
<div class="sf-chip -invert -removable">
<div class="sf-chip__content">
invert chip with remove
</div>
<i class="sf-icon -close -size-2xs -black sf-chip__remove-button"></i>
</div>
7.6 #Chip.default-success success Chip
.sf-chip.-success
success chip
success chip with remove
Html
<div class="sf-chip -success">
<div class="sf-chip__content">
success chip
</div>
</div>
<div class="sf-chip -success -removable">
<div class="sf-chip__content">
success chip with remove
</div>
<i class="sf-icon -close -size-2xs -black sf-chip__remove-button"></i>
</div>
7.7 #Chip.editable Editable chip
Html
<div class="sf-chip -editable">
<span class="sf-chip__content" contenteditable="true"></span>
</div>
7.8 #Chip.initials Chip with initials
JS
John Smith
Html
<div class="sf-chip -initials -removable">
<span class="sf-chip__initials">
JS
</span>
<span class="sf-chip__content">
John Smith
</span>
<i class="sf-icon -close -size-2xs -black sf-chip__remove-button"></i>
</div>
7.9 #Chip.popup-suggestions Chip with popup with suggestions
Recent
european
evacuation
event
Html
<div class="sf-chip -editable -dropped">
<span class="sf-chip__content" contenteditable="true"></span>
<div class="sf-dropdown sf-chip__dropdown">
<div class="sf-dropdown__heading">
Recent
</div>
<div class="sf-dropdown__item">
european
</div>
<div class="sf-dropdown__item">
evacuation
</div>
<div class="sf-dropdown__item">
event
</div>
</div>
</div>
7.10 #Chip.popup-suggestions-input Chip with popup with suggestions that looks like an input
Recent
european
evacuation
event
Html
<div class="sf-chip -editable -dropped -input">
<span class="sf-chip__content" contenteditable="true"></span>
<div class="sf-dropdown sf-chip__dropdown">
<div class="sf-dropdown__heading">
Recent
</div>
<div class="sf-dropdown__item">
european
</div>
<div class="sf-dropdown__item">
evacuation
</div>
<div class="sf-dropdown__item">
event
</div>
</div>
</div>
7.11 #Chip.with-icon Chip with icon
Html
<div class="sf-chip -removable -icon">
<span class="sf-chip__icon">
<span class="sf-fa sf-fa-users"></span>
</span>
<span class="sf-chip__content">
John Smith
</span>
<i class="sf-icon -close -size-2xs -black sf-chip__remove-button"></i>
</div>