Design for AIAsistente por pasos
Asistente por pasos: tarjeta en CSS. Copia las reglas, o el prompt que reproduce el resultado.
- 1Account
- 2Billing
- 3Review
Add a payment method
Step 2 of 3. You can skip this and add it later.
CSS
.card-047 {
width: 340px;
padding: 22px 24px;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 16px;
font-family: system-ui,sans-serif;
color: #0f172a
}
.card-047 ol {
display: flex;
margin: 0 0 20px;
padding: 0;
list-style: none
}
.card-047 li {
position: relative;
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
font-size: 12px;
color: #94a3b8
}
.card-047 li:not(:last-child)::after {
content: "";
position: absolute;
left: calc(50% + 16px);
right: calc(-50% + 16px);
top: 13px;
height: 2px;
background: #e2e8f0
}
.card-047 li i {
width: 28px;
height: 28px;
display: grid;
place-items: center;
border-radius: 50%;
border: 2px solid #e2e8f0;
background: #fff;
font-style: normal;
font-weight: 700;
font-size: 12px;
color: #94a3b8
}
.card-047__done i {
background: #0f172a;
border-color: #0f172a;
color: #fff
}
.card-047 li.card-047__done:not(:last-child)::after {
background: #0f172a
}
.card-047__now {
color: #0f172a;
font-weight: 600
}
.card-047__now i {
border-color: #0f172a;
color: #0f172a
}
.card-047 h3 {
margin: 0 0 4px;
font-size: 17px
}
.card-047 p {
margin: 0;
font-size: 13px;
color: #64748b
}
HTML
<article class="card-047">
<ol>
<li class="card-047__done"><i>1</i><span>Account</span></li>
<li class="card-047__now"><i>2</i><span>Billing</span></li>
<li><i>3</i><span>Review</span></li>
</ol>
<h3>Add a payment method</h3>
<p>Step 2 of 3. You can skip this and add it later.</p>
</article>Prompt
Crea una tarjeta de asistente por pasos de 340px: blanca, borde 1px #e2e8f0, radio 16px. Arriba: tres pasos equiespaciados en fila, cada uno un círculo numerado de 28px sobre una etiqueta 12px, unidos por líneas conectoras 2px #e2e8f0. El paso completado va relleno #0f172a con número blanco y conector oscuro; el paso actual tiene un anillo #0f172a y etiqueta oscura en negrita; los pasos siguientes son gris #94a3b8. Debajo: un título 17px y una línea de ayuda 13px #64748b.