# Map pin address (C 099)

Category: Cards  
Tags: location, map, pin, svg, address, light  
Page: https://designforai.dev/snippet/card-099

## Prompt

Build a 300px location card: white, 1px #e5e7eb border, 16px radius. Top a 150px fake map: #f3f4f6 with a 28px grid of 1px #e5e7eb lines (two repeating linear-gradients) and a tilted 10px yellow #fde68a "road" band, plus a centered red #ef4444 map-pin SVG with a white dot and a drop shadow that bounces 6px up on hover. Body: 16px place name, 13px #6b7280 address, and a blue "Get directions" link.

## HTML

```html
<article class="card-099">
  <div class="card-099__map">
    <svg viewBox="0 0 24 24" width="34" height="34" fill="#ef4444" stroke="#fff" stroke-width="1.2"><path d="M12 22s7-7.1 7-12a7 7 0 1 0-14 0c0 4.9 7 12 7 12z"/><circle cx="12" cy="10" r="2.5" fill="#fff"/></svg>
  </div>
  <div class="card-099__body"><h3>Studio Nord</h3><p>Torstraße 140, 10119 Berlin</p><a href="#">Get directions</a></div>
</article>
```

## CSS

```css
.card-099 {
  width: 300px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  overflow: hidden;
  font-family: system-ui,sans-serif;
  color: #111827
}
.card-099__map {
  position: relative;
  height: 150px;
  background: linear-gradient(#e5e7eb 1px,transparent 1px) 0 0/28px 28px,linear-gradient(90deg,#e5e7eb 1px,transparent 1px) 0 0/28px 28px,#f3f4f6
}
.card-099__map::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 64px;
  height: 10px;
  background: #fde68a;
  transform: rotate(-8deg)
}
.card-099__map svg {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-90%);
  filter: drop-shadow(0 4px 6px rgba(0,0,0,.25));
  transition: transform .25s
}
.card-099:hover svg {
  transform: translate(-50%,-90%) translateY(-6px)
}
.card-099__body {
  padding: 16px 18px 18px
}
.card-099 h3 {
  margin: 0 0 2px;
  font-size: 16px
}
.card-099 p {
  margin: 0 0 10px;
  font-size: 13px;
  color: #6b7280
}
.card-099 a {
  font-size: 13px;
  font-weight: 600;
  color: #2563eb;
  text-decoration: none
}
.card-099 a:hover {
  text-decoration: underline
}
.card-099 :is(a,button,input,select,textarea):focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
```