How to Create Contact Chips using CSS?
Contact chips are UI elements that provide user information in a condensed, readable visual format. Usually, these chips have the user’s name, avatar, and an edit or close icon. They are widely used in contact lists, search fields, and tagging systems. Including contact chips can enhance user engagement and simplify the user interface.
Approach
- The HTML structure features a container styled with CSS to center its contents both horizontally and vertically on the page, providing a clean and organized layout.
- JavaScript employs event delegation to efficiently manage event listeners for all close buttons, ensuring responsive interaction without overwhelming the browser with excessive event bindings.
- Close buttons within the chips, trigger JavaScript event listeners to hide the corresponding chip when clicked, allowing users to remove contacts dynamically.
- Within each chip, an avatar image and the contact’s name are vertically aligned using CSS rules, maintaining a cohesive design.
- Each contact chip is designed using CSS properties like padding, border, border-radius, and background color, ensuring a consistent visual appearance across all chips.
Example: The example below shows how to create contact chips using CSS.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Document</title>
</head>
<body>
<style>
.container {
display: flex;
flex-direction: column;
width: 100vw;
height: 100vh;
align-items: center;
justify-content: center;
}
.contact-chip {
display: inline-block;
padding: 5px 10px;
border: 1px solid #ccc;
border-radius: 25px;
background-color: #f1f1f1;
margin: 5px;
}
.contact-chip .avatar {
width: 24px;
height: 24px;
border-radius: 50%;
vertical-align: middle;
}
.contact-chip .name {
margin-left: 10px;
vertical-align: middle;
}
.contact-chip .close-btn {
margin-left: 10px;
color: #aaa;
cursor: pointer;
}
</style>
<div class="container">
<div class="contact-chip">
<img src=
"https://media.w3wiki.net/wp-content/cdn-uploads/gfg_200x200-min.png"
alt="Avatar"
class="avatar">
<span class="name">Md Saiyad Ali</span>
<span class="close-btn">×</span>
</div>
<div class="contact-chip">
<img src=
"https://media.w3wiki.net/wp-content/cdn-uploads/gfg_200x200-min.png"
alt="Avatar"
class="avatar">
<span class="name">Sameer Vohra</span>
<span class="close-btn">×</span>
</div>
<div class="contact-chip">
<img src=
"https://media.w3wiki.net/wp-content/cdn-uploads/gfg_200x200-min.png"
alt="Avatar"
class="avatar">
<span class="name">Mahima Singh</span>
<span class="close-btn">×</span>
</div>
<div class="contact-chip">
<img src=
"https://media.w3wiki.net/wp-content/cdn-uploads/gfg_200x200-min.png"
alt="Avatar"
class="avatar">
<span class="name">Abhinav Gupta</span>
<span class="close-btn">×</span>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
let closeButtons =
document.querySelectorAll('.contact-chip .close-btn');
closeButtons.forEach(function (closeButton) {
closeButton.addEventListener('click', function () {
let contactChip = this.parentElement;
contactChip.style.display = 'none';
});
});
});
</script>
</body>
</html>
Output:
Output
Contact Us