# Toast de éxito (C 044)

Categoría: Tarjetas  
Etiquetas: toast, notification, success, light, icon  
Página: https://designforai.dev/es/snippet/card-044

## Prompt

Construye un toast de éxito de 340px: blanco, borde 1px #e5e7eb con un borde izquierdo verde #16a34a de 4px, radio 12px, sombra 0 10px 30px -10px rgba(0,0,0,.2). Fila flex: un círculo de 24px en #dcfce7 con un SVG de verificación verde, luego un título 14px bold "Changes saved" sobre un mensaje 13px #6b7280, luego un botón de cierre "×" en #9ca3af que se oscurece en hover.

## HTML

```html
<div class="card-044" role="status">
  <span class="card-044__icon"><svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="3"><path d="M5 13l4 4L19 7"/></svg></span>
  <div class="card-044__text"><b>Changes saved</b><span>Your draft was synced 2 seconds ago.</span></div>
  <button aria-label="Close">×</button>
</div>
```

## CSS

```css
.card-044 {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 340px;
  padding: 14px 12px 14px 16px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-left: 4px solid #16a34a;
  border-radius: 12px;
  box-shadow: 0 10px 30px -10px rgba(0,0,0,.2);
  font-family: system-ui,sans-serif;
  color: #111827
}
.card-044__icon {
  flex: none;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #dcfce7;
  color: #16a34a
}
.card-044__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1
}
.card-044 b {
  font-size: 14px
}
.card-044__text span {
  font-size: 13px;
  color: #6b7280
}
.card-044 button {
  border: 0;
  background: none;
  font-size: 20px;
  line-height: 1;
  color: #9ca3af;
  cursor: pointer;
  padding: 0 4px
}
.card-044 button:hover {
  color: #111827
}
.card-044 :is(a,button,input,select,textarea):focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
```