User Bio Card with Social Links

A stylish and comprehensive card for showcasing a user profile with a background header, avatar, and short biography.

This layout is ideal for author boxes at the end of blog posts, speaker profiles for an event, or any place you need to provide more personal detail than a simple team member card.

Get Source Code Preview

About this Component

This profile card uses a layered header effect to create a modern and visually appealing design. A background image provides personality, while the main user avatar overlaps the header to create a sense of depth. Below, there is ample space for a name, a username or handle, a descriptive bio, and a row of social media icons.

Features

Layered Header Design: The user avatar is pulled up to overlap the header image using a negative margin, a simple but effective technique for creating visual depth.
Dedicated Bio Section: Includes a multi-line paragraph perfect for a short biography or description.
Customizable Header: The header can feature a background image to add a unique visual identity to each user's card.
SVG Icons: Includes clean, inline SVG icons for social media links, requiring no external font libraries.

Code Breakdown

HTML Structure

The card is built inside an article tag with the class .ub-card. The structure is split into two parts: a header element containing the background image, and a main div containing all the profile details. The order of elements is straightforward and semantic, progressing from the avatar to the name, handle, bio, and social links.

CSS Styling

The layout is achieved with the .ub-card-profile container. It's styled with a negative top margin (margin-top: -60px;) which pulls the entire content block upwards, causing the avatar to overlap the header area. It's also given position: relative to ensure its contents appear correctly stacked on top. The circular avatar has a white border which helps it stand out clearly from the header image behind it. The rest of the card is styled with basic typography and a display: flex container for the social icons.

Code

Here is the complete code. You can easily customize the card by changing the header and avatar images, editing the text content, and updating the social media links.

<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-bio {
    display: flex;
    justify-content: center;
    padding: 2rem;
}

/* === User Bio Card Styles === */
.ub-card {
    --ub-card-radius: 16px;
    --ub-card-shadow: 0 8px 16px rgba(0,0,0,0.1);

background-color: #ffffff;
    border-radius: var(--ub-card-radius);
    box-shadow: var(--ub-card-shadow);
    max-width: 380px;
    width: 100%;
    text-align: center;
    overflow: hidden; /* Important for containing the header image */
}

/* Header with background image */
.ub-card-header {
    background-color: #4a5568; /* Fallback */
    height: 120px;
}

.ub-card-header-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Profile details container */
.ub-card-profile {
    padding: 0 1.5rem 1.5rem;
    margin-top: -60px; /* Pulls the avatar up over the header */
    position: relative;
}

.ub-card-avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 4px solid #ffffff;
    object-fit: cover;
    margin: 0 auto;
    background-color: #fff;
}

.ub-card-name {
    font-size: 1.5rem;
    font-weight: 700;
    margin-top: 1rem;
    margin-bottom: 0.25rem;
}

.ub-card-handle {
    font-size: 0.95rem;
    color: #6b7280;
    margin: 0 0 1rem;
}

.ub-card-bio {
    font-size: 1rem;
    line-height: 1.6;
    color: #374151;
    margin: 0 0 1.5rem;
}

/* Social links section */
.ub-card-socials {
    display: flex;
    justify-content: center;
    gap: 1rem;
}

.ub-card-social-link {
    color: #9ca3af;
    transition: color 0.2s ease;
    padding: 0.5rem;
}

.ub-card-social-link:hover,
.ub-card-social-link:focus {
    color: #4f46e5;
}

.ub-card-social-link svg {
    width: 20px;
    height: 20px;
}
</style>

<div class="demo-container-bio">
    <article class="ub-card">
        <header class="ub-card-header">
            
            <img class="ub-card-header-img" src="https://picsum.photos/id/1060/400/200" alt="Abstract blue background pattern.">
        </header>
        <div class="ub-card-profile">
            
            <img class="ub-card-avatar" src="https://picsum.photos/id/338/120/120" alt="Profile photo of Aurora Chen.">
            <h2 class="ub-card-name">Aurora Chen</h2>
            <p class="ub-card-handle">@auroracreates</p>
            <p class="ub-card-bio">Digital artist &amp; front-end developer based in Neo-Kyoto. Passionate about creating beautiful, intuitive interfaces. Fueled by coffee and a love for cyberpunk aesthetics.</p>
            <div class="ub-card-socials">
                <a href="#" class="ub-card-social-link" aria-label="Website">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.125" stroke="currentColor" fill="none"><path d="M14.974,20.895A9.322,9.322,0,1,1,21.322,12.056a13.965,13.965,0,0,1-.274,2.25 M14.197,19.162A17.625,17.625,0,0,1,12,21.262 M12,2.625A12.802,12.802,0,0,1,16.339,11.25a12.776,12.776,0,0,1,.034,1.819 M12,2.625A12.784,12.784,0,0,0,7.616,12.172c0,6.075,2.73,7.875,4.372,9.09 M3.889,7.462L20.156,7.462 M12,2.621L12,21.262 M4.144,17.055L13.89,17.055 M2.678,12.172L21.322,11.944 M20.089,21.375L21.75,19.71l-3-3,1.706-1.091a.142.142,0,0,0-.045-.262L14.678,14.014a.146.146,0,0,0-.172.172L15.75,20.028a.146.146,0,0,0,.266.049L17.089,18.375Z"/></svg>
                </a>
                <a href="#" class="ub-card-social-link" aria-label="X (formerly Twitter)">
                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z"/></svg>
                </a>
                 <a href="#" class="ub-card-social-link" aria-label="Dribbble">   
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 24C5.385 24 0 18.615 0 12S5.385 0 12 0s12 5.385 12 12-5.385 12-12 12zm10.12-10.358c-.35-.11-3.17-.953-6.384-.438 1.34 3.684 1.887 6.684 1.992 7.308 2.3-1.555 3.936-4.02 4.395-6.87zm-6.115 7.808c-.153-.9-.75-4.032-2.19-7.77l-.066.02c-5.79 2.015-7.86 6.025-8.04 6.4 1.73 1.358 3.92 2.166 6.29 2.166 1.42 0 2.77-.29 4-.814zm-11.62-2.58c.232-.4 3.045-5.055 8.332-6.765.135-.045.27-.084.405-.12-.26-.585-.54-1.167-.832-1.74C7.17 11.775 2.206 11.71 1.756 11.7l-.004.312c0 2.633.998 5.037 2.634 6.855zm-2.42-8.955c.46.008 4.683.026 9.477-1.248-1.698-3.018-3.53-5.558-3.8-5.928-2.868 1.35-5.01 3.99-5.676 7.17zM9.6 2.052c.282.38 2.145 2.914 3.822 6 3.645-1.365 5.19-3.44 5.373-3.702-1.81-1.61-4.19-2.586-6.795-2.586-.825 0-1.63.1-2.4.285zm10.335 3.483c-.218.29-1.935 2.493-5.724 4.04.24.49.47.985.68 1.486.08.18.15.36.22.53 3.41-.43 6.8.26 7.14.33-.02-2.42-.88-4.64-2.31-6.38z"/></svg>
                </a>
            </div>
        </div>
    </article>
</div>

View Output