# Banner stats profile (C 011)

Category: Cards  
Tags: profile, avatar, banner, stats, light  
Page: https://designforai.dev/snippet/card-011

## Prompt

Create a 280px profile card with an 80px gradient banner (90deg #0ea5e9 to #8b5cf6) and a 68px circular avatar that overlaps the banner by half (negative top margin) with a 4px white border and a warm 135deg gradient #fde68a to #f97316 inside. Centered 17px name and 13px bio in #6b7280. Bottom a three-column stats row separated by a 1px #f3f4f6 top border: 15px bold numbers in #111827 over 12px labels in #6b7280. Card is white, 16px radius, shadow 0 4px 16px rgba(0,0,0,.08).

## HTML

```html
<article class="card-011">
  <div class="card-011__banner"></div>
  <div class="card-011__avatar"></div>
  <h3>Jonas Ekberg</h3>
  <p>Builds dashboards nobody hates.</p>
  <ul><li><strong>128</strong>Posts</li><li><strong>4.2k</strong>Followers</li><li><strong>310</strong>Following</li></ul>
</article>
```

## CSS

```css
.card-011 {
  width: 280px;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  text-align: center;
  font-family: system-ui,sans-serif;
  color: #1f2937;
  box-shadow: 0 4px 16px rgba(0,0,0,.08)
}
.card-011__banner {
  height: 80px;
  background: linear-gradient(90deg,#0ea5e9,#8b5cf6)
}
.card-011__avatar {
  width: 68px;
  height: 68px;
  margin: -34px auto 10px;
  border-radius: 50%;
  border: 4px solid #fff;
  background: linear-gradient(135deg,#fde68a,#f97316)
}
.card-011 h3 {
  margin: 0;
  font-size: 17px
}
.card-011 p {
  margin: 4px 16px 14px;
  font-size: 13px;
  color: #6b7280
}
.card-011 ul {
  display: flex;
  margin: 0;
  padding: 12px 0;
  list-style: none;
  border-top: 1px solid #f3f4f6
}
.card-011 li {
  flex: 1;
  font-size: 12px;
  color: #6b7280
}
.card-011 strong {
  display: block;
  font-size: 15px;
  color: #111827
}
```