A profile card built with pure HTML and CSS that displays user information such as name, role, avatar, and actions in a clean, structured layout without relying on JavaScript or external libraries.
Usage
This component is ideal for interfaces where user identity and details need to be presented clearly, such as team sections, author bios, user dashboards, profile previews, or community pages.
Implementation
The profile layout is created using CSS flexbox or grid, spacing control, and visual hierarchy, allowing content like images, text, and actions to align cleanly while remaining lightweight and easy to customize.
HTML
<div class="ss-card">
<img src="https://via.placeholder.com" alt="Profile">
<h3>Zara</h3>
<p>UI Designer</p>
</div>CSS
.ss-card{
--bg: #f5f5f5;
--text: #111;
--border: rgba(0,0,0,.08);
padding:16px;
max-width:180px;
text-align:center;
border-radius:14px;
background:var(--bg);
color:var(--text);
border:1px solid var(--border);
}
.ss-card img{
width:56px;
height:56px;
border-radius:50%;
margin-bottom:6px;
object-fit:cover;
}
@media (prefers-color-scheme: dark){
.ss-card{
--bg: #161616;
--text: #f1f1f1;
--border: rgba(255,255,255,.1);
}
}Notes
- Built with pure HTML and CSS
- No JavaScript required
- Designed for user identity and information display
- Supports avatars, text, and action buttons
- Easy to customize layout and styling
- Works in modern browsers
Preview styles shown. Production customization recommended.
Browse More UI Components
Explore hundreds of reusable HTML & CSS UI components built for modern web projects.
Discover buttons, cards, loaders, animations, layouts, and more all with live previews and clean, copy-paste code.