# Gestrichelter Gutscheincode (C 076)

Kategorie: Cards  
Tags: coupon, discount, dashed, promo, light  
Seite: https://designforai.dev/de/snippet/card-076

## Prompt

Erstelle eine 340px Gutschein-Card: weiß mit 2px grünem #16a34a Rahmen und 14px Radius. Links eine gefüllte grüne 100px Spalte mit einem 30px extra-bold "25%" über einem 12px Versalien "off" in Weiß. Rechter Body: 16px Titel, 12px #4d7c0f Notiz und ein Promo-Code "LAUNCH25" in einer gestrichelten 2px grünen Box auf #f0fdf4 mit weiter Laufweite, die beim Hover zu gefülltem Grün mit weißem Text invertiert (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
}
```