# 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

```html
<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

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

## Banjo

```html
<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](/resources/custom-html) for the broader story on what's allowed on a card.