loading

v32.1.1

select option
Getting started
Components
How to contribute to ink
Support and feedback

Tools

Playroom
Primer
Figma library
Usage

Deprecation

Start here
Deprecation list and dates
Codemods 101

Design Guides

Icons
Colors
Guides
Accessibility
Component patterns
UX Writing

Component Categories

Accessory
Form
Formatter
Hooks
Illustration
Layout
Navigation
Spreadsheet
Table
Typography
Preferences
Github
Version 32.1.1
Guides

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?