# Brutalista com sombra dura (C 032)

Categoria: Cards  
Tags: brutalist, neo-brutalist, hard-shadow, thick-border, light  
Página: https://designforai.dev/pt/snippet/card-032

## Prompt

Construa um card neobrutalista: 280px, fundo amarelo chapado #fef08a, borda sólida preta de 3px, sem raio, sombra dura deslocada 8px 8px 0 #000 (sem blur). No hover o card se desloca 4px para a direita e para baixo enquanto a sombra encolhe para 4px 4px, parecendo pressionado. Título preto 22px peso 900, texto 14px, e um botão branco em caixa alta com borda preta de 3px e sua própria sombra dura de 4px que inverte para preto com texto amarelo no hover.

## HTML

```html
<article class="card-032">
  <h3>No gradients allowed</h3>
  <p>Thick black lines, flat yellow, and a shadow that does not blur.</p>
  <button>Read it</button>
</article>
```

## CSS

```css
.card-032 {
  width: 280px;
  padding: 22px;
  background: #fef08a;
  border: 3px solid #000;
  border-radius: 0;
  box-shadow: 8px 8px 0 #000;
  font-family: system-ui,sans-serif;
  color: #000;
  transition: transform .12s,box-shadow .12s
}
.card-032:hover {
  transform: translate(4px,4px);
  box-shadow: 4px 4px 0 #000
}
.card-032 h3 {
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -.01em
}
.card-032 p {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.5
}
.card-032 button {
  padding: 10px 18px;
  border: 3px solid #000;
  background: #fff;
  font-weight: 800;
  font-size: 13px;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 4px 4px 0 #000;
  transition: background .12s,color .12s,box-shadow .12s
}
.card-032 button:hover {
  background: #000;
  color: #fef08a;
  box-shadow: 2px 2px 0 #000
}
.card-032 :is(a,button,input,select,textarea):focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
```