loading

v33.0.2

select option

PrintKit Guidelines

The basics for how to style a Carta PDF

The basics

To create the exact visuals for a new PDF, it is highly recommended to use the ink PDF Prototyper (only available in demo environments). The tool includes its own docs, instructions for use, and example PDF layouts and visuals.

Prince is what we use to create our PDFs. It converts HTML and CSS in Django templates to PDF.

Our print kit is located in carta-web/static/lib/eshares/css/print/pdf_kit.scss

  • Every time you make CSS changes, you'll need to run ./manage.py collectstatic and type yes when prompted
  • Note: Normal classes from Carta will not work

Get Started

Create a new prince file and add this to your body.prince:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>{{ file_name }}</title>
<link rel="stylesheet" href="static_files/lib/eshares/css/pdf_kit.css" charset="utf-8" />
{% stylesheet 'pdf_kit' %}
</head>
<body>
// your code here
</body>
</html>

Styling

Basic styling for PDFs will create a page that looks like this:

Page with tables
Cover page

Cover page

  • Use a class='page' for the page div
  • Use a class='title' for the page title
  • Use a class='subtitle' for the subtitle
<div class="page page__cover">
<StaticImage style="width: 150px" src="{{ image_src }}" alt="img alt" />
<h1 class="title">{{ title }}</h1>
<h2 class="subtitle">{{ subtitle }}</h2>
<h4>For the period {{ begin_date }} - {{ end_date }}</h4>
</div>

Other pages

For page headers and footers, see the Settings tab in the prototype tool for options.

Tables

Most tables will not need any extra classes. Use the html tags table, thead, tbody, tr, th, and td to build one

  • If you need specific sizes for table cells, use the col\_\_x classes on the <td>
  • For numeric cells, add class='text-right' on the <td>

For table titles, use a h3 along side a <table> like this:

<h3>Capital account summary</h3>
<table>
<thead>
<tr>
<th>Table header</th>
</tr>
</thead>
<tbody>
<tr>
<td>Table cell</td>
</tr>
</tbody>
</table>

Questions?

Reach out on the #ink channel on Slack if you have questions regarding PDFs :)

Is this page helpful?