Design for AIDashed coupon code
Dashed coupon code: a CSS card. Copy the rules, or the prompt that rebuilds it.
25%off
Launch week deal
Valid on annual plans until Friday.
LAUNCH25
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
}
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>Prompt
Create a 340px coupon card: white with a 2px green #16a34a border and 14px radius. Left a solid green 100px column with a 30px extra-bold "25%" over an uppercase 12px "off" in white. Right body: 16px title, 12px #4d7c0f note, and a promo code "LAUNCH25" in a dashed 2px green box on #f0fdf4 with wide letter-spacing that inverts to solid green with white text on hover (cursor: copy).