Home Whiteboard Practice Code Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

How to create contact chips with CSS?

CSS Web Development Front End Technology

Contact chips are compact UI elements that display a person's profile image alongside their name in a pill-shaped container. They are commonly used to show team members, contacts, or support staff in a clean, organized manner on web pages.

Syntax

.chip {
    display: inline-block;
    padding: 0 25px;
    height: 50px;
    border-radius: 25px;
    /* other styling properties */
}

HTML Structure

First, create the HTML structure for contact chips. Each chip contains a profile image and the person's name −

<div class="chip">
   <img src="profile-image.jpg" alt="Person Name">
   Person Name
</div>

Example: Basic Contact Chips

The following example demonstrates how to create contact chips with CSS styling −

<!DOCTYPE html>
<html>
<head>
<style>
    body {
        font-family: Arial, sans-serif;
        margin: 20px;
        background-color: #f5f5f5;
    }
    
    .chip {
        display: inline-block;
        padding: 0 25px;
        height: 50px;
        font-size: 16px;
        font-weight: bold;
        line-height: 50px;
        border-radius: 25px;
        background-color: #007bff;
        color: white;
        margin: 5px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    }
    
    .chip img {
        float: left;
        margin: 0 10px 0 -25px;
        height: 50px;
        width: 50px;
        border-radius: 50%;
        object-fit: cover;
    }
</style>
</head>
<body>
    <h2>Team Members</h2>
    <div class="chip">
        <img src="https://cdn.pixabay.com/photo/2016/08/08/09/17/avatar-1577909__340.png" alt="James">
        James Anderson
    </div>
    <div class="chip">
        <img src="https://cdn.pixabay.com/photo/2014/03/24/17/19/teacher-295387__340.png" alt="Britney">
        Britney Smith
    </div>
    <div class="chip">
        <img src="https://cdn.pixabay.com/photo/2017/02/16/23/10/smile-2072907__340.jpg" alt="Sarah">
        Sarah Johnson
    </div>
</body>
</html>

Three blue pill-shaped contact chips appear horizontally, each containing a circular profile image on the left and white text with the person's name. The chips have subtle shadows and are evenly spaced.

Key CSS Properties

Property Purpose
display: inline-block Allows chips to sit side by side
border-radius: 25px Creates the pill shape
float: left Positions image to the left of text
border-radius: 50% Makes the profile image circular

Conclusion

Contact chips provide an elegant way to display team members or contacts with minimal space usage. The combination of border-radius, proper padding, and image positioning creates professional-looking contact elements that enhance user interface design.

Updated on: 2026-03-15T14:50:31+05:30

1K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements