Skip to main content

Template styling using CSS

We use Cascading Style Sheets (CSS) for designing the style of documents.

Your CSS code will be inserted into a <style> tag in the document head.

warning

Please only include CSS styles into the CSS code section of the template. Don't include a <style> tag.

The document's <body class="main"> tag will have a .main class applied to it.

Page Setup​

We use paged.js for rendering. Thus, you have access to paged.js`s polyfills and media queries.

We recommend setting up the page by using a snippet similar to the following.

@media print {
    @page {
        size: A4 portrait;
        margin: 50mm 17mm 35mm 20mm;
        overflow: visible;

        @top-right {
            content: element(headerIdentifier);
        }

        @bottom-left {
            content: element(footerIdentifier);
        }

        @left-middle {
            content: element(foldlinesIdentifier);
        }
    }
}

This allows you to set up the page size, document margins and page sections such as headers and footers.

Fonts​

Available fonts for use in your templates are:

  • Arial
  • Open Sans
  • Merriweather
  • Poppins
  • Kodchasan

Requesting fonts​

Flagship tag

Teams on the Flagship tier may request additional fonts.

Last updated on