Skip to content

Ability Cards

Ability Cards are a headless, system-agnostic card component for displaying ability-style data. Each card shows a label, a value, and an optional sublabel. No frontmatter integration or modifier calculation is performed — you supply the exact values to display.

System-Agnostic Components

System-agnostic component support is limited but will continue to improve in future releases. Join the discussion on GitHub to share feedback and ideas.

When to use Ability Cards vs. D&D 5e Ability Scores

The D&D 5e Ability Scores block integrates with frontmatter, automatically calculates modifiers from raw scores, and supports proficiency and bonuses for saving throws. Use it when you want full D&D 5e ability score mechanics.

Ability Cards display whatever values you provide with no calculations or frontmatter dependency. Use them when you want full control over what is shown, or when working outside D&D 5e.

AGI

14

+2

Evasion 14

STR

12

+1

Threshold 5

FIN

16

+3

Attack +5

INS

10

+0

Reaction 12

PRE

14

+2

Influence 14

KNO

12

+1

Recall 13

Example

This example shows Dagger Heart traits, but Ability Cards work with any TTRPG system.

yaml
```ability-cards
items:
  - label: Agility
    label_short: AGI
    header_value: 14
    value: '+2'
    sublabel: Evasion 14
  - label: Strength
    label_short: STR
    header_value: 12
    value: '+1'
    sublabel: Threshold 5
  - label: Finesse
    label_short: FIN
    header_value: 16
    value: '+3'
    sublabel: Attack +5
  - label: Instinct
    label_short: INS
    header_value: 10
    value: '+0'
    sublabel: Reaction 12
  - label: Presence
    label_short: PRE
    header_value: 14
    value: '+2'
    sublabel: Influence 14
  - label: Knowledge
    label_short: KNO
    header_value: 12
    value: '+1'
    sublabel: Recall 13
```

Configuration

PropertyTypeDefaultDescription
itemsArrayRequiredList of ability card items to display

Item Object

PropertyTypeDefaultDescription
labelStringThe main label for the card
label_shortStringOptional abbreviated label displayed in the card header
header_valueNumberOptional value displayed in the header next to the label
valueString/NumberThe primary value to display (large, centered)
sublabelStringOptional additional text below the value