## Introduction

The Shapla chip represents complex entities in small blocks.

## Usages

 1. Basic Chip

```html
<span class="shapla-chip">
    <span class="shapla-chip__text">Basic Chip</span>
</span>
```

&nbsp;2. Deletable Chip

```html
<span class="shapla-chip shapla-chip--deletable">
    <span class="shapla-chip__text">Deletable Chip</span>
    <span class="shapla-delete-icon is-small shapla-chip__action" aria-label="close"></span>
</span>
```

&nbsp;2. Contact Chip

```html
<span class="shapla-chip shapla-chip--contact">
    <img class="shapla-chip__contact" src="https://secure.gravatar.com/avatar/5ba82fcf5f7f8b24097ff9f7ad4b3d5b" alt="">
    <span class="shapla-chip__text">Contact Chip</span>
</span>
```

&nbsp;2. Deletable Contact Chip

```html
<span class="shapla-chip shapla-chip--contact shapla-chip--deletable">
    <img class="shapla-chip__contact" src="https://secure.gravatar.com/avatar/5ba82fcf5f7f8b24097ff9f7ad4b3d5b" alt="">
    <span class="shapla-chip__text">Deletable Contact Chip</span>
    <span class="shapla-delete-icon is-small shapla-chip__action" aria-label="close"></span>
</span>
```