Music chords

Render guitar, ukulele, banjo, and other fretboard chord diagrams directly in your cards with the <fret-board> and <string-note> tags. The number of strings is configurable, so the same syntax works across instruments.

Guitar

<fret-board frets="4" strings="6" chord="C">
  <string-note string="2" fret="1" finger="1"></string-note>
  <string-note string="4" fret="2" finger="2"></string-note>
  <string-note string="5" fret="3" finger="3"></string-note>
</fret-board>

Ukulele

<fret-board frets="4" strings="4" chord="C">
  <string-note string="1" fret="3" finger="3"></string-note>
</fret-board>

Banjo

<fret-board frets="4" strings="5" chord="C">
  <string-note string="1" fret="1" finger="1"></string-note>
  <string-note string="3" fret="2" finger="2"></string-note>
</fret-board>

Attributes

frets — how many frets the diagram shows (typically 4–5).
strings — instrument-dependent: 6 for guitar, 4 for ukulele, 5 for banjo.
chord — the chord label rendered above the diagram.
<string-note>: string (1-indexed from the high side), fret, and optional finger for the fingering hint.

The custom elements pass through the card sanitizer — see Custom HTML for the broader story on what's allowed on a card.