Design for AIMini citação com logo
Mini citação com logo: um card em CSS. Copie as regras, ou o prompt que o reconstrói.
The scale settles in half a second. Our old one took five.
CSS
.card-094 {
width: 260px;
margin: 0;
padding: 20px 22px;
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 14px;
font-family: system-ui,sans-serif;
color: #0f172a;
transition: background .2s,border-color .2s,box-shadow .2s
}
.card-094:hover {
background: #fff;
border-color: #cbd5e1;
box-shadow: 0 6px 18px rgba(15,23,42,.06)
}
.card-094__logo {
display: inline-block;
padding: 4px 10px;
border-radius: 6px;
background: #0f172a;
color: #fff;
font-size: 12px;
font-weight: 800;
letter-spacing: .06em;
text-transform: uppercase
}
.card-094 blockquote {
margin: 12px 0 8px;
font-size: 16px;
font-weight: 500;
line-height: 1.4
}
.card-094 figcaption {
font-size: 12px;
color: #64748b
}
HTML
<figure class="card-094">
<span class="card-094__logo">Northwind</span>
<blockquote>The scale settles in half a second. Our old one took five.</blockquote>
<figcaption>Dana Ruiz, VP Product</figcaption>
</figure>Prompt
Crie um mini depoimento de 260px: fundo #f8fafc, borda de 1px #e2e8f0, raio de 14px, padding 20px 22px; no hover fica branco com borda #cbd5e1 e uma sombra tênue. No topo um pequeno chip de marca preto "NORTHWIND" (caixa alta 12px peso 800 branco sobre #0f172a, raio de 6px), depois uma citação de uma linha em 16px peso medium, depois uma atribuição 12px #64748b.