7 #Chip Chip

Avatar Image John Smith
Html
    <div class="sf-chip -avatar  -removable">
        <span class="sf-chip__avatar">
             <img class="sf-chip__image" src="https://d117h1jjiq768j.cloudfront.net/images/default-source/company-section/yogesh_gupta-11-16-16.png?sfvrsn=f938a1d9_1" 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>
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>
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>
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>
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>
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>
Html
    <div class="sf-chip -editable">
        <span class="sf-chip__content" contenteditable="true"></span>
    </div>
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>

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

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>

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

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>
John Smith
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>