Postcard Design Template – Running Shoes

This is the free postcard Design Template – Running Shoes. We have created this template for you to use it for your next Direct Mail marketing campaign. This A5 postcard template is perfect for brands of fast-moving consumer goods that want to send promotional product campaigns with personalised offers to their target audience. 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 – Running Shoes

Postcard Design Template - Running Shoes

<link href="https://fonts.googleapis.com/css2?family=Vollkorn:[email protected];600" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Nanum+Brush+Script" 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/running-shoe.jpg);
      background-size: 216mm 154mm;
      background-repeat: no-repeat;
}
    
    .first-name {
      left: 13mm;
      top: 25mm;
      width: 190mm;
      height: 28mm;
      font-family: 'Vollkorn', serif;
      font-size: 48pt;
      font-weight: 600;
      text-align: left;
      line-height: 0.5;
      color: #000000;
      position: absolute;
    }

    .promo-text {
      left: 13mm;
      top: 38mm;
      width: 90mm;
      height: 65mm;        
      font-family: 'Vollkorn', serif;
      font-size: 21pt;
      font-weight: 400;
      text-align: left;
      line-height: 1.3;
      color: #000000;
      position: absolute;
      }

    .discount-value {
      font-family: 'Vollkorn', serif;
      font-weight: 600;
      color: #ec008c;
      }
      
    .call-to-action {
      left: 15mm;
      top: 110mm;
      width: 50mm;
      height: 25mm; 
      font-family: 'Nanum Brush Script', cursive;
      font-size: 18pt;
      text-align: center;
      color: #ec008c;  
      line-height: 1.0;
      transform: rotate(21deg);
      -webkit-transform: rotate(21deg);
      -webkit-backface-visibility: hidden;
      position: absolute;
    }      
      
    .arrow {
      left: 48mm;
      top: 98mm;
      width: 40mm;
      height: 15mm;        
      position: absolute;
      }      

    .box-wincode {
      left: 91mm;
      top: 116mm;
      width: 70mm;
      height: 10mm; 
      background-color: #ec008c;
      border-radius: 2mm;
      padding-top: 2mm;
      font-family: 'Open Sans', monospace;
      font-size: 12pt;
      text-align: center;
      font-weight: 400;
      color: #ffffff; 
      position: absolute;
    }

</style>

<div class="first-name">{{first_name}},</div>
<div class="promo-text">don’t miss out on your<br>
new running shoes with<br>
our <span class="discount-value">{{deal}}</span> discount<br>
offer.</div>

<div class="call-to-action">Scratch here<br>
for your personal<br>
promotion code</div>

<div class="arrow"><img src="https://assets.postana.com/example/curved-arrow-black.svg" width="100%"></div>

<div class="box-wincode">{{discount_code}}</div>