<?xml version="1.0" encoding="UTF-8"?>
<template name="Promo code" category="Commerce" description="A discount offer next to a highlighted code chip." anim="zoom" from="bottom" animMs="450">
  <field id="offer" label="Offer" default="20% OFF TODAY"/>
  <field id="code" label="Code" default="GOLIVE20"/>
  <field id="accent" label="Accent start" type="color" default="#f43f5e"/>
  <field id="accent2" label="Accent end" type="color" default="#f59e0b"/>

  <rect x="110" y="852" h="100" radius="16" fill="linear(90,{accent},{accent2})" shadow="24,rgba(0,0,0,0.4),6" fit="offer" pad="36" min="320"/>
  <text id="offer" x="146" y="852" h="100" valign="middle" size="40" weight="900" color="#ffffff" maxWidth="760">{offer}</text>

  <rect x="110" y="852" h="100" radius="16" fill="rgba(11,13,16,0.95)" stroke="rgba(255,255,255,0.16)" strokeWidth="2" fit="code" pad="34" extra="150" xAfter="offer" gap="76"/>
  <text x="26" y="882" size="18" weight="800" color="rgba(255,255,255,0.6)" letterSpacing="2" uppercase="true" xAfter="offer" gap="110">Use code</text>
  <text id="code" x="26" y="914" size="42" weight="900" font="mono" color="#ffffff" letterSpacing="2" xAfter="offer" gap="110" maxWidth="620">{code}</text>
</template>
