Rpg-cards

What it does

This project generates cards for spells, items, or monsters for RPG games. The generator is web-based and runs in your browser, there is no need to install any software. The cards are packed on an A4 page such that you can print it double sided and get cards with a front and back. Here's an example of what you can create:

You can define the content of the cards yourself using simple JSON data. The above example was generated from the data shown below. Don't worry if you don't want to edit the raw data - there is a simple user interface for creating the cards.

{
    "count": 1,
    "color": "dimgray",
    "title": "Full Plate",
    "icon": "custom-armor-heavy",
    "contents": [
        "subtitle | Heavy armor (1500gp)",
        "rule",
        "property | AC | 18",
        "property | Strength required | 15",
        "property | Stealth | Disadvantage",
        "rule",
        "fill-2",
        "description | Heavy | Your speed is reduced by 10 feet.",
        "description | Stealth | You have disadvantage on Stealth.",
        "fill-3"
    ]
}

Live demo

Try it out yourself. Press "Load sample cards" in the menu, then press "Generate cards".

Documentation

Card JSON data

• count The number of times this card is repeated. Useful for consumable items that you hand out multiple times.
• color Name of the card color. You can use all CSS color names. Additional custom colors are defined in css/custom-colors.css.
• icon Name of the card icon. You can use all icons from game-icons.net. For example, the file name of this dagger is "plain-dagger.png", so you would use "plain-dagger" as the icon name. Additional custom icon names are defined in css/custom-icons.css.
• back_icon Optional. Name of the big icon on the card back. If not specified, the icon from the "icon" property is used.
• title The title of the card.
• contents An array of strings, specifying all card elements, in top to bottom order (see below).

Card elements

Each card element is a string of the following format:

"element | param1 | param2"

• subtitle Slightly larger italic text. Param1: the subtitle text.
• rule A horizontal rule.
• property A property line. The property description is indented if it spans more than one line. Param1: the property name (in bold). Param2: the property description.
• description Same as property, but text is not indented.
• text A simple paragraph of text. Param1: the text.
• subsection A subsection header, with a horizontal rule below the subsection name. Param1: the subsection name
• fill-1 A dynamically resized empty element that takes up 1 unit of unused space on the card. You can use this to vertically center text by adding one of these before and after the text you want to center.
• fill-2 Same as fill-1, but takes up 2 units of unused space - these elements will therefore be larger than any fill-1 element.

FAQ

Can I change the layout of the cards?

You'll need to edit the CSS and Javascript files to change the layout at this point. I might add some customization options later on.