Design for AIMídia à esquerda
Mídia à esquerda: um card em CSS. Copie as regras, ou o prompt que o reconstrói.
CSS
.card-006 {
display: flex;
width: 460px;
background: #fff;
border: 1px solid #e4e4e7;
border-radius: 14px;
overflow: hidden;
font-family: system-ui,sans-serif;
color: #18181b;
transition: box-shadow .2s
}
.card-006:hover {
box-shadow: 0 8px 24px rgba(0,0,0,.1)
}
.card-006__img {
flex: 0 0 150px;
background: linear-gradient(145deg,#fde68a,#f59e0b)
}
.card-006__body {
padding: 18px 20px
}
.card-006 h3 {
margin: 0 0 6px;
font-size: 17px
}
.card-006 p {
margin: 0 0 12px;
font-size: 14px;
color: #52525b
}
.card-006 a {
font-size: 13px;
font-weight: 600;
color: #b45309;
text-decoration: none
}
.card-006 :is(a,button,input,select,textarea):focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
HTML
<article class="card-006">
<div class="card-006__img"></div>
<div class="card-006__body">
<h3>Typography audit checklist</h3>
<p>Twelve checks before you ship a type scale.</p>
<a href="#">Open checklist</a>
</div>
</article>Prompt
Construa um card horizontal de 460px como uma linha flex: fundo branco, borda de 1px #e4e4e7, raio de 14px. À esquerda uma coluna de imagem fixa de 150px de largura preenchida com um gradiente de 145deg #fde68a para #f59e0b. Corpo à direita com padding 18px 20px: título 17px #18181b, texto 14px #52525b, depois um link 13px semibold em #b45309. No hover adicione sombra 0 8px 24px rgba(0,0,0,.1).