Skip to content

Instantly share code, notes, and snippets.

@av-jok

av-jok/README.md

Forked from hubgit/README.md
Created May 12, 2025 09:45
Show Gist options
  • Save av-jok/beab0cf6abc0e88e2a3d3df30c60c959 to your computer and use it in GitHub Desktop.
Save av-jok/beab0cf6abc0e88e2a3d3df30c60c959 to your computer and use it in GitHub Desktop.
Download ZIP
A5 printed card with HTML + CSS
Raw
README.md
  1. Clone this Gist.
  2. For card sizes other than A5, edit the size value in @page, and the height and width properties of body.
  3. Add contents to each face. The simplest approach is to add an image called front.png of the same dimensions as the card.
  4. Generate a PDF from the HTML + CSS. If using Prince, it's as simple as prince index.html card.pdf.
  5. Take the PDF to a printer, and ask them to print as many copies as you need.
Raw
card.css
@page {
/* dimensions for the whole page */
size: A5;
margin: 0;
}
html {
/* off-white, so body edge is visible in browser */
background: #eee;
}
body {
/* A5 dimensions */
height: 210mm;
width: 148.5mm;
margin: 0;
}
/* fill half the height with each face */
.face {
height: 50%;
width: 100%;
position: relative;
}
/* the back face */
.face-back {
background: #f6f6f6;
}
/* the front face */
.face-front {
background: #fff;
}
/* an image that fills the whole of the front face */
.face-front img {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
}
Raw
index.html
<!doctype html>
<meta charset="utf-8">
<link rel="stylesheet" href="card.css">
<body>
<div class="face face-back"></div>
<div class="face face-front"><img src="front.png"></div>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment