Design for AIFoto com tag
Foto com tag: um card em CSS. Copie as regras, ou o prompt que o reconstrói.
Design
Grid systems that actually help
Twelve columns is a habit, not a law. Pick the grid your content needs.
CSS
.card-002 {
width: 300px;
padding: 12px;
background: #fafaf9;
border-radius: 20px;
font-family: system-ui,sans-serif;
color: #1c1917;
box-shadow: 0 1px 2px rgba(0,0,0,.06)
}
.card-002__img {
position: relative;
height: 180px;
border-radius: 14px;
background: linear-gradient(160deg,#fed7aa,#fb923c 70%,#ea580c)
}
.card-002__img span {
position: absolute;
left: 12px;
top: 12px;
padding: 4px 10px;
background: rgba(255,255,255,.85);
border-radius: 999px;
font-size: 12px;
font-weight: 600;
color: #9a3412
}
.card-002 h3 {
margin: 14px 6px 6px;
font-size: 17px
}
.card-002 p {
margin: 0 6px 6px;
font-size: 14px;
line-height: 1.5;
color: #57534e
}
HTML
<article class="card-002">
<div class="card-002__img"><span>Design</span></div>
<h3>Grid systems that actually help</h3>
<p>Twelve columns is a habit, not a law. Pick the grid your content needs.</p>
</article>Prompt
Faça um card de conteúdo de 300px com padding interno de 12px, fundo #fafaf9, raio de 20px e uma sombra tênue 0 1px 2px rgba(0,0,0,.06). O placeholder de imagem é um bloco de 180px com raio de 14px e um gradiente de 160deg #fed7aa para #fb923c para #ea580c, com uma pequena tag em pílula "Design" no canto superior esquerdo (branco a 85% de opacidade, 12px semibold, cor #9a3412). Abaixo: título 17px em #1c1917 e descrição 14px em #57534e, ambos com margem horizontal de 6px.