Postcard templates

reading time 10 minutes

To get started with postcards, you've reached the right page. You can design postcards with HTML or by using Inkit's template builder which has features for fonts, colors, and image uploads.
If you're looking for Inkit's Send API visit Send Guide.


This article provides a guide for designing postcards. When designing postcards it is extremely important to properly format HTML files and use proper CSS rules.

General Layout

The HTML design for a postcard with 6x9 inches size:



HTML examples (will be updated soon)

You can find the actual HTML examples with different size by clicking on this link.
Just copy raw HTML, customize text and CSS and give it a try!


Important notes

  • keep all of the text within the Safe Zone to be sure that it will not be cropped;
  • anything in the purple right bottom area will not be printed. It's used for the postage and address information;
  • extra spacing for postcards is used to ensure content such as the background-image is printed to the edge. That's why the HTML sizing is bigger and you'll need to add 0.25in to the dimensions.
    Meaning a 4in x 6in postcard should be designed as a 6.25in x 9.25in postcard in HTML. If you ignore this note, it could result in unprinted borders or unexpected white edges;
  • postcard sizes could be 4x6, 6x9, 6x11. Do not forget to include an extra .25in padding for outer wrapper to exclude unexpected printed results described above e.g. 4.25x6.25, 6.25x9.25, 6.25x11.25.

HTML Assets

  • For any linked assets, you must use a performant file hosting provider with no rate limits such as Amazon S3;
  • Use inline styles or an internal stylesheet, do not link to external stylesheets;
  • Link to images that are 100DPI and sized at the final desired size on the physical mailing. For example, for a photo that is desired to be 1in x 1in on the final postcard, the image asset should be sized at 1in x 1in at 100DPI (which equates to 100px by 100px);
  • The sum of all linked assets should not exceed 5MB in file size;
  • Use -webkit prefixes for CSS properties;



Because different browsers have varying user-agent styles, the HTML you see in your browser will not always look identical to what is produced through the API. It is strongly recommended that you test all HTML before sending.


We're always happy to help with code or other questions you might have.
Search our documentation, check the help center, or connect with our sales team.
Ask questions to our support team ([email protected]) if you run into any technical roadblock or the links above are not helpful.

Did this page help you?