Postcard Design Template – SkyGetaway

This is the free postcard Design Template – SkyGetaway. We have created this template for you to use it for your next Direct Mail marketing campaign. This A5 postcard template is perfect for sending promotional sales campaigns with personalised offers from premium brands to customers. To get a head start copy the HTML-code below into the template editor on our marketing automation and customise the design to your liking.

See the Design Guidelines – Postcard A5 and HTML Guidelines – Basic for some best practices around designing your postcard.

Preview Postcard Design Template – SkyGetaway

Postcard Design Template - SkyGetaway

<link href="https://fonts.googleapis.com/css2?family=Oswald:[email protected]" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,[email protected],400;0,700;1,400;1,700" rel="stylesheet">

<style>
    .postcard {
      background-image: url(https://assets.postana.com/example/landscape_image-01.jpg);
      background-size: 216mm 154mm;
      background-repeat: no-repeat;
}
    
    .first-name {
      left: 15mm;
      top: 7mm;
      width: 190mm;
      height: 28mm;
      font-family: 'Oswald', sans-serif;
      text-shadow: 5px 5px 20px #000000;
      font-size: 60pt;
      font-weight: 600;
      text-transform: uppercase;
      text-align: left;
      line-height: 1.0;
      color: #FFFFFF;
      position: absolute;
    }

    .promo-text {
      left: 10mm;
      top: 32mm;
      width: 135mm;
      height: 45mm;
      font-family: 'Oswald', sans-serif;
      text-shadow: 5px 5px 10px #000000;
      font-size: 24pt;
      font-weight: 600;
      text-align: center;
      line-height: 1.5;
      color: #FFFFFF;
      position: absolute;
      }

    .discount-value {
      font-family: 'Oswald', sans-serif;
      text-shadow: 5px 5px 20px #000000;
      font-size: 40pt;
      line-height: 1.0;
      font-weight: 600;
      }

    .qr-code-box {
      left: 21mm;
      top: 64.5mm;
      width: 23mm;
      height: 23mm;
      border-radius: 1.5mm;
      background-color: #ffffff;
      box-shadow: 5px 5px 20px #000000;
      position: absolute;
      } 

    .qr-code {
      left: 22.5mm;
      top: 66mm;
      width: 20mm;
      height: 20mm;
      position: absolute;
      } 

    .company-logo {
      left: 135mm;        
      top: 130mm;
      width: 70mm;
      height: 10mm;
      font-family: 'Open Sans', monospace;
      color: rgba(255, 255, 255, 0.4);
      text-shadow: 5px 5px 10px #000000;
      font-weight: 700;
      text-align: right;
      font-size: 32pt;
      position: absolute;
    }
    
    .logo-italic {
      font-family: 'Open Sans', monospace;
      font-weight: 400;
      font-style: italic;
    }    

</style>

<div class="first-name">{{first_name}}</div>

<div class="promo-text">
    SCAN THE QR-CODE<br>
    AND GET <span class="discount-value">&nbsp;{{deal}}</span> OFF<br>
    YOUR GETAWAY!</div>
    
<div class="qr-code-box"></div>

<div class="qr-code"><img src="http://api.qrserver.com/v1/create-qr-code/?color=000000&amp;bgcolor=FFFFFF&amp;data=http%3A%2F%2Fwww.postana.com%2F%7B%7B{{first_name}}%7D%7D%2Fdiscount-promotion&amp;qzone=1&amp;margin=0&amp;size=350x350&amp;ecc=L" alt="qr code" width="100%"></div>

<div class="company-logo">
    <p><span class="logo-italic">#</span>sky<span class="logo-italic">getaway</span></p>
</div>