# Tagged photo (C 002)

Category: Cards  
Tags: content, basic, image-top, tag, light  
Page: https://designforai.dev/snippet/card-002

## Prompt

Make a 300px content card with 12px inner padding, background #fafaf9, 20px radius and a faint 0 1px 2px rgba(0,0,0,.06) shadow. The image placeholder is a 180px block with 14px radius and a 160deg gradient #fed7aa to #fb923c to #ea580c, with a small pill tag "Design" at top-left (white 85% opacity, 12px semibold, color #9a3412). Below: 17px title in #1c1917 and 14px description in #57534e, both with 6px horizontal margin.

## HTML

```html
<article class="card-002">
  <div class="card-002__img"><span>Design</span></div>
  <h3>Grid systems that actually help</h3>
  <p>Twelve columns is a habit, not a law. Pick the grid your content needs.</p>
</article>
```

## CSS

```css
.card-002 {
  width: 300px;
  padding: 12px;
  background: #fafaf9;
  border-radius: 20px;
  font-family: system-ui,sans-serif;
  color: #1c1917;
  box-shadow: 0 1px 2px rgba(0,0,0,.06)
}
.card-002__img {
  position: relative;
  height: 180px;
  border-radius: 14px;
  background: linear-gradient(160deg,#fed7aa,#fb923c 70%,#ea580c)
}
.card-002__img span {
  position: absolute;
  left: 12px;
  top: 12px;
  padding: 4px 10px;
  background: rgba(255,255,255,.85);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: #9a3412
}
.card-002 h3 {
  margin: 14px 6px 6px;
  font-size: 17px
}
.card-002 p {
  margin: 0 6px 6px;
  font-size: 14px;
  line-height: 1.5;
  color: #57534e
}
```