Followers/Following Summary Card

Provide a quick, at-a-glance summary of a user's profile with this compact social metrics card.

This component is perfect for profile pages, sidebars, or any "who to follow" suggestion list. It clearly presents key statistics in a clean and organized layout.

Get Source Code Preview

About this Component

This card is designed to be data-forward. After the primary user identification (avatar and name), the most prominent feature is a horizontal row displaying social statistics like post count, followers, and following. A large call-to-action button at the bottom encourages user engagement.

Features

Clear Stats Display: Social metrics are arranged in a clean, easy-to-read row using Flexbox.
Prominent Call-to-Action: Includes a full-width, styled "Follow" button to drive interaction.
Centered Layout: All elements are centered for a balanced and professional appearance.
Self-Contained: The component is a single, self-contained unit that is easy to place anywhere in your layout.

Code Breakdown

HTML Structure

The card is built within an article tag. The main profile info (avatar, name, handle) comes first. The statistics are grouped in a div with the class .ffs-stats-container. Inside, each individual statistic (e.g., "Posts") is its own div containing a strong element for the number and a span for the label. The structure is completed with a button at the end.

CSS Styling

The entire card is centered with text-align: center. The main layout feature is the .ffs-stats-container, which uses display: flex and justify-content: space-around. This distributes the stat items evenly across the available horizontal space, with equal space around each item, creating a balanced row. Typographic hierarchy is established using different font sizes and weights for the numbers and their labels.

Code

Here is the complete code. You can easily adapt it by customizing the profile information, stats, and button text.

<style>
/* This is an optional body style to provide a background for the page */
body {
    background-color: #f3f4f6;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
}

/* Optional: a container to center the card on the page for demonstration */
.demo-container-summary {
    display: flex;
    justify-content: center;
    padding: 2rem;
}

/* === Follower Summary Card Styles === */
.ffs-card {
    --ffs-radius: 16px;
    --ffs-shadow: 0 8px 16px rgba(0,0,0,0.1);
    --ffs-primary-color: #4f46e5;

background-color: #ffffff;
    border-radius: var(--ffs-radius);
    box-shadow: var(--ffs-shadow);
    max-width: 340px;
    width: 100%;
    text-align: center;
    padding: 2rem 1.5rem;
}

.ffs-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto 1rem;
    border: 3px solid var(--ffs-primary-color);
}

.ffs-name {
    font-size: 1.375rem;
    font-weight: 700;
    margin: 0 0 0.25rem;
}

.ffs-handle {
    font-size: 0.95rem;
    color: #6b7280;
    margin: 0 0 1.5rem;
}

/* The container for the stats */
.ffs-stats-container {
    display: flex;
    justify-content: space-around;
    padding: 1rem 0;
    margin-bottom: 1.5rem;
    border-top: 1px solid #e5e7eb;
    border-bottom: 1px solid #e5e7eb;
}

.ffs-stat-item {
    line-height: 1.3;
}

.ffs-stat-number {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
    color: #111827;
}

.ffs-stat-label {
    font-size: 0.8rem;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.ffs-action-btn {
    width: 100%;
    background-color: var(--ffs-primary-color);
    color: #ffffff;
    font-size: 1rem;
    font-weight: 500;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease;
}
.ffs-action-btn:hover {
    background-color: #4338ca;
}
</style>

<div class="demo-container-summary">
    <article class="ffs-card">
        
        <img class="ffs-avatar" src="https://placehold.co/100x100/ec4899/ffffff/png?text=Z" alt="Profile photo of Zane Sterling">
        <h3 class="ffs-name">Zane Sterling</h3>
        <p class="ffs-handle">@zanesterling_dev</p>

<div class="ffs-stats-container">
            <div class="ffs-stat-item">
                <strong class="ffs-stat-number">1,204</strong>
                <span class="ffs-stat-label">Posts</span>
            </div>
            <div class="ffs-stat-item">
                <strong class="ffs-stat-number">42.1K</strong>
                <span class="ffs-stat-label">Followers</span>
            </div>
            <div class="ffs-stat-item">
                <strong class="ffs-stat-number">380</strong>
                <span class="ffs-stat-label">Following</span>
            </div>
        </div>
        
        <button class="ffs-action-btn">Follow</button>
    </article>
</div>

View Output