User Bio Card With Social Links

<!DOCTYPE html>
<title>My Example</title>

<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>