Flowbird GO - ANPR 1.36 User Guide

HTML Section

<div class="container">
   <div class="box box1">
       <div id="logoIcon" class="logo center">
           <img class="flow-logo" src="/qrCodeTemplate/image/3e4d4095-feb9-4547-9159-0b4ee7c253ba"></img>
       </div>
   </div>
   <div class="box box2">
       <div id="headerContent" class="header">
           {{HEADER}}
       </div>
   </div>
   <div id="customMessage" class="box box5">
       <div class="center text-msg">
           {{Custom Message}}
       </div>
   </div>
   <div class="box box6">
       <div id="discount" class="center text-msg discount">
           {{Discount}}
       </div>
   </div>
   <div class="box box7">
       <div id="expirationDate" class="center text-msg">
           Expires: {{Expiration Date}}
       </div>
   </div>
   <div class="box box8">
       <div id="referenceNumber" class="center text-msg">
           {{Reference Number}}
       </div>
   </div>
   <div class="box box9">
       <div id="footerContent" class="center text-msg">
           {{FOOTER}}
       </div>
   </div>
   <div class="box box4">
       {{QR Code}}
   </div>
</div>

CSS section

body, html {
  height: 100%;
  margin: 0;
  padding: 0;
}
 
.container {
  break-before: always;
  position: relative;
  width: 5.6cm;
  height: 3.9cm;
  border: 2px dotted #000;
  border-radius: 5px;
}
 
.box {
  position: absolute;
}
 
.box1 {
  top: 0%;
  left: 0%;
  width: 20%;
  height: 38%;
}
 
.box2 {
  top: 0%;
  left: 20%;
  width: 40%;
  height: 40%;
  text-align: center;
  align-items: center;
  display: flex;
}
 
.box4 {
  top: 0%;
  left: 60%;
  width: 40%;
  height: 100%;
  display: flex;
  justify-content: left;
  align-items: center;
}
 
.box5 {
  top: 40%;
  left: 0%;
  width: 60%;
  height: 60%;
}
 
.box6 {
  top: 60%;
  left: 0%;
  width: 60%;
  height: 70%;
}
 
.box7 {
  top: 70%;
  left: 0%;
  width: 60%;
  height: 78%;
}
 
.box8 {
  top: 78%;
  left: 0%;
  width: 60%;
  height: 86%;
}
 
.box9 {
  top: 86%;
  left: 0%;
  width: 60%;
  height: 94%;
}
 
.qr-code {
  max-width: 95%;
  max-height: 95%;
}
 
 
 
.center {
  display: flex;
  justify-content: center;
  align-items: center;
}
 
.logo img {
  max-width: 100%;
  max-height: 100%;
}
 
.header {
  font-family: Calibri;
  font-size: 3.2mm;
  text-align: left;
  text-transform: uppercase;
  font-weight: bold;
}
 
.logo {
  height: 100%;
  width: 100%;
}
 
.text-msg {
  font-family: Calibri;
  font-size: 2.5mm;
}
 
.discount {
  font-weight: bold;
  font-size: 3.2mm;
}