Bio Card
A copy-paste profile headers component in pure HTML & CSS. Zero dependencies, framework-agnostic, MIT-licensed.
Profile HeadersHTMLCSSany framework
JS
Jordan Sky
Designer & developer crafting calm, useful interfaces.
Copy into your project
HTML
<div class="nuda-bio-card">
<div class="nuda-bio-card__avatar">JS</div>
<div class="nuda-bio-card__body">
<div class="nuda-bio-card__name">Jordan Sky</div>
<div class="nuda-bio-card__bio">
Designer & developer crafting calm, useful interfaces.
</div>
</div>
</div>CSS
/* Bio Card
Avatar with name and short bio.
Customize: --bio-bg, --bio-accent */
.nuda-bio-card {
--bio-bg: #0c0c10;
--bio-accent: linear-gradient(135deg, #e4ff54, #6ee7b7);
display: flex;
gap: 14px;
align-items: center;
padding: 16px;
background: var(--bio-bg);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 14px;
max-width: 340px;
color: #fafafa;
font-family: system-ui, sans-serif;
}
.nuda-bio-card__avatar {
width: 52px;
height: 52px;
border-radius: 50%;
display: grid;
place-items: center;
font-weight: 600;
font-size: 0.95rem;
color: #09090b;
background: var(--bio-accent);
flex-shrink: 0;
}
.nuda-bio-card__body {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.nuda-bio-card__name {
font-size: 0.95rem;
font-weight: 600;
letter-spacing: -0.01em;
}
.nuda-bio-card__bio {
font-size: 0.8rem;
color: #a0a0a8;
line-height: 1.45;
}How to use Bio Card
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.