Banner + Avatar
A copy-paste profile headers component in pure HTML & CSS. Zero dependencies, framework-agnostic, MIT-licensed.
Profile HeadersHTMLCSSany framework
Copy into your project
HTML
<div class="nuda-banner-avatar">
<div class="nuda-banner-avatar__cover"></div>
<div class="nuda-banner-avatar__row">
<div class="nuda-banner-avatar__avatar">AM</div>
<div class="nuda-banner-avatar__meta">
<div class="nuda-banner-avatar__name">Avery Moss</div>
<div class="nuda-banner-avatar__handle">@averymoss</div>
</div>
</div>
</div>CSS
/* Banner + Avatar
Cover gradient banner with an overlapping circular avatar.
Customize: --cover, --avatar */
.nuda-banner-avatar {
--cover: linear-gradient(135deg, #9d6dff 0%, #62b6ff 50%, #6ee7b7 100%);
--avatar: linear-gradient(135deg, #e4ff54, #ffb45e);
width: 100%;
max-width: 360px;
background: #0c0c10;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 14px;
overflow: hidden;
color: #fafafa;
font-family: system-ui, sans-serif;
}
.nuda-banner-avatar__cover {
height: 80px;
background: var(--cover);
}
.nuda-banner-avatar__row {
display: flex;
align-items: flex-end;
gap: 12px;
padding: 0 16px 16px;
margin-top: -26px;
}
.nuda-banner-avatar__avatar {
width: 56px;
height: 56px;
border-radius: 50%;
display: grid;
place-items: center;
font-weight: 600;
color: #09090b;
background: var(--avatar);
border: 3px solid #0c0c10;
flex-shrink: 0;
}
.nuda-banner-avatar__meta { padding-bottom: 4px; }
.nuda-banner-avatar__name {
font-size: 0.95rem;
font-weight: 600;
}
.nuda-banner-avatar__handle {
font-size: 0.78rem;
color: #a0a0a8;
}How to use Banner + Avatar
Paste the HTML where you need it and the CSS into a global stylesheet (or a <style> tag). Every class is prefixed nuda- so it never collides with Tailwind or your own styles. Tweak the CSS custom properties to match your design system.
Works in React, Vue, Svelte, Astro, Next.js, Nuxt, Laravel Blade, Django, Rails — or a single .html file. No npm install, no build step.