Flowbird GO - ANPR 1.36 User Guide

HTML default code

<div>
  <div class="qr-container">
     <div class="qr-data">
        <div class="qr-header">
           <img src="/qrCodeTemplate/image/3e4d4095-feb9-4547-9159-0b4ee7c253ba" />
           <h2>{{HEADER}}</h2>
        </div>
        <div class="qr-content">
           <h2>{{Custom Message}}</h2>
        </div>
        <div class="qr-footer">
           <h2>{{Discount}}</h2>
           <h4>Expires: {{Expiration Date}}</h4>
           <h4>{{Reference Number}}</h4>
           <h4>{{FOOTER}}</h4>
        </div>
     </div>
     <div class="qr-code">{{QR Code}}</div>
  </div>
</div>

CSS default code

.qr-container {
  width: 800px;
  margin: auto;
}
 
.qr-container .qr-data {
  float: left;
  width: 400px;
}
 
.qr-container .qr-data .qr-header {
  display: flex;
}
 
.qr-container .qr-data .qr-header img {
  width: 180px;
  height: 180px;
}
 
.qr-container .qr-data .qr-header h2 {
  margin: auto;
  font-size: 20px;
}
 
.qr-container .qr-data .qr-content {
  display: flex;
  height: 100px;
}
 
.qr-container .qr-data .qr-content h2 {
  font-weight: 100;
  margin: auto;
}
 
.qr-container .qr-data .qr-footer > h4, h2 {
  text-align: center;
  margin: 2px;
}
 
.qr-container .qr-code {
  float: right;
  width: 400px;
}
 
.qr-container .qr-code img {
  width: 400px;
  height: 400px;
}