← All elements
<div class="pb"><div class="bn"></div><div class="ph"></div><b>Priya Nair</b><span>@priya.codes</span><ul><li><b>1.2k</b>Followers</li><li><b>348</b>Following</li><li><b>96</b>Posts</li></ul></div>About this card
A social profile header with a gradient banner, an overlapping avatar ring and follower counts.
How it works
A gradient banner sits above the content, and the avatar uses a negative top margin to overlap it with a white ring. The stats row is a flex list separated by a top border.
Ways to customise it
- Replace the banner gradient with an image.
- Edit the names and counts.
- Add a follow button below the stats.
Good to know
Keep overlapping text contrast in mind if you use a photo banner. Counts should be real text, as here.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.