# Utility

## Contacts

![](https://3677920472-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LBql1s3wlqs4NUfqqiL%2F-LC9d8QUMGrvd7BPZ09U%2F-LC9dCDXGW2nLKlhrwDc%2Fcard%20contacts.PNG?alt=media\&token=2573d18f-4f4a-4968-938f-122766cdb29c)

```markup
 <div class="shadow-md p-4 rounded-lg">
	<div class="flex justify-between p-2">
	  <h4>Contacts</h4>
	  <button class="hover:text-grey">
		<i class="material-icons">
		  filter_list
		</i>
	  </button>
	</div>
	<div class="mt-6">
	  <div class="flex justify-between p-2 hover:bg-grey-lightest cursor-pointer">
		<div class="flex">
		  <div class="mr-2">
			<img class="shadow sm:w-12 sm:h-12 w-10 h-10 rounded " src="../images/zellda.jpg" alt="Avatar">
		  </div>
		  <div>
			<p class="text-lg text-grey-darkest">Zelda</p>
			<p class="text-sm text-grey-dark">Hyrule</p>
		  </div>
		</div>
		<div class="flex items-center">
		  <button class="p-1 text-grey-darker hover:text-grey">
			<i class="material-icons">
			  message
			</i>
		  </button>
		  <button class="p-1 text-grey-darker hover:text-grey">
			<i class="material-icons">
			  favorite_border
			</i>
		  </button>
		  <button class="p-1 text-grey-darker hover:text-grey">
			<i class="material-icons">
			  delete_outline
			</i>
		  </button>
		</div>
	  </div>
	</div>
 </div>
```
