Templates

One of the main aspects of a deck is its template. The template defines the look of the cards in a deck.

Editing the template of a deck

To edit a deck’s template, follow these steps:

1. Go to your project.
2. Click on the Edit Template button of the deck you want to edit.

Choosing a starting template

If your deck does not have a template yet, you will be prompted to choose a starting template. You can either select one of the predefined templates or start from scratch with a blank template.

1. Select the desired starting template from the dropdown menu.
2. Click the Continue button to apply the chosen template to your deck.

Editing the template

On the template editor page:

• On the left side, you will see a code editor where you can edit the HTML and CSS of the template.
• On the right side, there is a preview panel that shows how the cards will look with the current template.

Changes you make in the editor are reflected in the preview panel in real time.

Template syntax

The template of a deck can be edited using HTML  and CSS . You can use any HTML elements and CSS styles to create the desired layout for your cards.

Adding template parameters

To add dynamic content to your template, you can use template parameters. Template parameters will be replaced with actual data from the deck’s data table when the cards are generated.

To add parameters to your template, use the following syntax:

{{ parameter_name }}

Where parameter_name is the name of the column in the deck’s data table that you want to use.

Escaping and using raw parameter values

By default, template parameters are HTML-escaped to ensure that special characters are displayed correctly (for example, <). Example:

<!-- Displays the parameter value literally, escaping any HTML -->
{{ parameter_name }}

If you want to render the raw value of a parameter (for example, when the parameter contains HTML), use the raw filter. Example:

<!-- Renders the parameter value as raw HTML, so <b>3</b> will appear bold -->
{{ parameter_name | raw }}

Using fonts

You can use custom fonts in your templates by including the font-family CSS property in your styles:

<div style="font-family: Inter;">My text</div>

The following fonts are available by default:

• Inter
• Arial
• Times New Roman
• Courier New
• Merriweather
• Google Sans Code
• Barriecito
• Pacifico
• Pinyon Script
• UnifrakturMaguntia
• Alfa Slab One
• Michroma
• Audiowide
• Condiment
• Shadows Into Light

Editing example data

To see how your template looks with actual data, you can add example data to your template. This data will only be used for preview purposes and will not affect the actual data in your deck. To open the example data editor, click on the Edit Example Data button located at the top of the template editor page. Here, you can add or modify the example data for each parameter used in your template. After making changes, click the Save button to update the preview with the new example data.

Data types

When adding example data, you can use different data types depending on the parameter’s intended use:

• Text: You can enter plain text for text-based parameters.
• Color: For color parameters, you can use a color picker to choose a color of your choice. The selected color will be represented as a hexadecimal color code (e.g., #3B82F6).
• Image: For image parameters, you can upload an image. In this case, you can use the following syntax in your template to display the image:

<img src="{{ parameter_name }}" />

Deck-level parameters

Deck-level parameters apply to all cards in this deck. These global parameters are shared across every card generated from this template and cannot be modified separately for individual cards.

If you want to make a parameter a deck-level parameter, you can use the switch located under each parameter name in the example data editor.

Deck-level parameters are useful if you want

• an image (e.g. a logo or a background) to be the same on all cards in the deck
• to reuse the same text multiple times in the same template (e.g. color codes, symbols, or icons)

Advanced template features

Forge of Cards uses the LiquidJS  templating engine, which is a powerful and flexible templating language capable of handling complex logic and data manipulation that is not detailed in this documentation. For more advanced template features and usage, refer to the LiquidJS  documentation.