# Cupom com código tracejado (C 076)

Categoria: Cards  
Tags: coupon, discount, dashed, promo, light  
Página: https://designforai.dev/pt/snippet/card-076

## Prompt

Crie um card de cupom de 340px: branco com borda verde de 2px #16a34a e raio de 14px. À esquerda uma coluna verde sólida de 100px com "25%" em 30px extra-bold sobre um "off" em caixa alta 12px, em branco. Corpo à direita: título 16px, nota 12px #4d7c0f, e um código promocional "LAUNCH25" em uma caixa tracejada verde de 2px sobre #f0fdf4 com letter-spacing amplo que inverte para verde sólido com texto branco no hover (cursor: copy).

## HTML

```html
<article class="card-076">
  <div class="card-076__off"><b>25%</b><span>off</span></div>
  <div class="card-076__body">
    <h3>Launch week deal</h3>
    <p>Valid on annual plans until Friday.</p>
    <code>LAUNCH25</code>
  </div>
</article>
```

## CSS

```css
.card-076 {
  display: flex;
  width: 340px;
  background: #fff;
  border: 2px solid #16a34a;
  border-radius: 14px;
  overflow: hidden;
  font-family: system-ui,sans-serif;
  color: #14532d
}
.card-076__off {
  flex: 0 0 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #16a34a;
  color: #fff
}
.card-076__off b {
  font-size: 30px;
  font-weight: 800;
  line-height: 1
}
.card-076__off span {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .1em
}
.card-076__body {
  padding: 16px 18px
}
.card-076 h3 {
  margin: 0 0 2px;
  font-size: 16px
}
.card-076 p {
  margin: 0 0 10px;
  font-size: 12px;
  color: #4d7c0f
}
.card-076 code {
  display: inline-block;
  padding: 6px 12px;
  border: 2px dashed #16a34a;
  border-radius: 8px;
  background: #f0fdf4;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .12em;
  cursor: copy;
  transition: background .15s,color .15s
}
.card-076 code:hover {
  background: #16a34a;
  color: #fff
}
```