Design for AIErfolgs-Toast
Erfolgs-Toast: CSS-Card. Kopiere die Regeln oder den Prompt, der das Ergebnis nachbaut.
Changes savedYour draft was synced 2 seconds ago.
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; }
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>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.