7 #Chip Chip

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

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

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

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

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

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

    <div class="sf-chip -editable">
        <span class="sf-chip__content" contenteditable="true"></span>
    </div>

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

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

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

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