# Soft shadow footer (C 004)

Category: Cards  
Tags: content, basic, footer, light, soft-shadow  
Page: https://designforai.dev/snippet/card-004

## Prompt

Build a 300px white card with 16px radius and a soft shadow 0 10px 40px -12px rgba(15,23,42,.18). Top: 150px image placeholder with 120deg gradient #d9f99d to #4ade80. Body padding 18px 20px 12px: 17px title #0f172a, 14px text #475569. Footer row separated by a 1px #f1f5f9 top border, 12px text in #64748b, two spans spaced apart with flex space-between ("5 min read" and "Product").

## HTML

```html
<article class="card-004">
  <div class="card-004__img"></div>
  <div class="card-004__body">
    <h3>Onboarding without the tour</h3>
    <p>Show the product, not the tooltips.</p>
  </div>
  <footer class="card-004__foot"><span>5 min read</span><span>Product</span></footer>
</article>
```

## CSS

```css
.card-004 {
  width: 300px;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  font-family: system-ui,sans-serif;
  color: #0f172a;
  box-shadow: 0 10px 40px -12px rgba(15,23,42,.18)
}
.card-004__img {
  height: 150px;
  background: linear-gradient(120deg,#d9f99d,#4ade80)
}
.card-004__body {
  padding: 18px 20px 12px
}
.card-004 h3 {
  margin: 0 0 6px;
  font-size: 17px
}
.card-004 p {
  margin: 0;
  font-size: 14px;
  color: #475569
}
.card-004__foot {
  display: flex;
  justify-content: space-between;
  padding: 12px 20px;
  border-top: 1px solid #f1f5f9;
  font-size: 12px;
  color: #64748b
}
```