# Endereço com pino (C 099)

Categoria: Cards  
Tags: location, map, pin, svg, address, light  
Página: https://designforai.dev/pt/snippet/card-099

## Prompt

Construa um card de localização de 300px: branco, borda de 1px #e5e7eb, raio de 16px. No topo um mapa falso de 150px: #f3f4f6 com uma grade de 28px de linhas de 1px #e5e7eb (dois linear-gradients repetidos) e uma faixa de "estrada" amarela #fde68a de 10px inclinada, mais um SVG de pino de mapa vermelho #ef4444 centralizado com um ponto branco e uma sombra projetada que quica 6px para cima no hover. Corpo: nome do lugar 16px, endereço 13px #6b7280, e um link azul "Get directions".

## 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; }
```