# Erfolgs-Toast (C 044)

Kategorie: Cards  
Tags: toast, notification, success, light, icon  
Seite: https://designforai.dev/de/snippet/card-044

## Prompt

Baue einen 340px Erfolgs-Toast: weiß, 1px #e5e7eb Rahmen mit 4px grünem #16a34a linken Rahmen, 12px Radius, Schatten 0 10px 30px -10px rgba(0,0,0,.2). Flex-Zeile: ein 24px Kreis in #dcfce7 mit grünem Häkchen-SVG, dann ein 14px fetter Titel "Changes saved" über einer 13px #6b7280 Nachricht, dann ein "×" Schließen-Button in #9ca3af, der beim Hover dunkler wird.

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