> ## Documentation Index
> Fetch the complete documentation index at: https://docs.smashandclash.in/llms.txt
> Use this file to discover all available pages before exploring further.

# Cards and art

> Show a card as the game prints it, or build your own card from the character art, values and colours.

Every character comes two ways:

| Field | What it is | Size |
| - | - | - |
| `image` | The finished card face, values printed on it | 563×768 |
| `art` | The character alone, on transparency | 800×800 |

Use `image` to show a card as it is. Use `art` to build your own card around it.

<div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, minmax(0, 1fr))', gap: '16px', alignItems: 'end', margin: '16px 0' }}>
  <div style={{ textAlign: 'center' }}><img src="https://www.smashandclash.in/Cards-webp/01_Pengu.webp" alt="Pengu's finished card face" /><div style={{ fontSize: '12px', marginTop: '4px' }}><code>image</code></div></div>
  <div style={{ textAlign: 'center' }}><img src="https://www.smashandclash.in/Characters-webp/01_Pengu.webp" alt="Pengu alone, on transparency" /><div style={{ fontSize: '12px', marginTop: '4px' }}><code>art</code></div></div>
  <div style={{ textAlign: 'center' }}><img src="https://www.smashandclash.in/Card_Back_v2.png" alt="The card back" /><div style={{ fontSize: '12px', marginTop: '4px' }}><code>kit.card.back</code></div></div>
</div>

```ts theme={null}
const cards = await sc.cards();
const pengu = cards.find((c) => c.id === 1)!;
// { name: 'Pengu', top: 5, right: 4, bottom: 3, left: 2,
//   color: 'pink', colorHex: '#fc41a3', image, art, versus, animation }
```

Effect cards (ids 101–105) have their `image` only.

## Build your own card

A card is 825 wide by 1125 tall (`kit.card.aspect`). The game's card has:

<Frame>
  <img className="block dark:hidden" src="https://mintcdn.com/smashandclash/kMKdSC3YTmWelykg/images/diagrams/art-anatomy-light.webp?fit=max&auto=format&n=kMKdSC3YTmWelykg&q=85&s=cfb0ad828625eda7b2906a816791d94d" alt="Pengu's finished card face beside the same card built from its parts: a pink frame in colorHex, the art in the middle, and four value badges: top red 5, right yellow 4, bottom blue 3, left green 2" width="1600" height="731" data-path="images/diagrams/art-anatomy-light.webp" />

  <img className="hidden dark:block" src="https://mintcdn.com/smashandclash/kMKdSC3YTmWelykg/images/diagrams/art-anatomy-dark.webp?fit=max&auto=format&n=kMKdSC3YTmWelykg&q=85&s=3906ac88c71ddf956d64055f79a2babe" alt="Pengu's finished card face beside the same card built from its parts: a pink frame in colorHex, the art in the middle, and four value badges: top red 5, right yellow 4, bottom blue 3, left green 2" width="1600" height="731" data-path="images/diagrams/art-anatomy-dark.webp" />
</Frame>

* **the frame**, in the card's colour: `colorHex`. Power tiles boost cards of their colour.
* **the art**, centred: `art`.
* **four value badges**, one per side, each in its own colour (`kit.card.sides`):

| Side | Badge | Hex |
| - | - | - |
| `top` | <span style={{ display: 'inline-block', width: '14px', height: '14px', borderRadius: '4px', background: '#FD5656', verticalAlign: 'middle' }} /> red | `#FD5656` |
| `right` | <span style={{ display: 'inline-block', width: '14px', height: '14px', borderRadius: '4px', background: '#FFDE59', verticalAlign: 'middle' }} /> yellow | `#FFDE59` |
| `bottom` | <span style={{ display: 'inline-block', width: '14px', height: '14px', borderRadius: '4px', background: '#5271FF', verticalAlign: 'middle' }} /> blue | `#5271FF` |
| `left` | <span style={{ display: 'inline-block', width: '14px', height: '14px', borderRadius: '4px', background: '#7ED957', verticalAlign: 'middle' }} /> green | `#7ED957` |

Values are 1 to 7, printed in Luckiest Guy (`kit.fonts.display`). `kit.card.template` is the game's card as an SVG, and `kit.card.back` is the back every face-down card shows.

```html theme={null}
<div class="card" style="--frame: #fc41a3">
  <img src="https://www.smashandclash.in/Characters-webp/01_Pengu.webp" alt="Pengu" />
  <b class="top">5</b><b class="right">4</b><b class="bottom">3</b><b class="left">2</b>
</div>
```

Values are printed from the owner's side. Seat B's cards are turned round on the board, so its `top` faces row 1: see [Reading sides](/play/moves#reading-sides), or the SDK's `boardSides(card, seat)`.

## Frame colours

`kit.colors` holds every frame colour:

| Colour | Hex |
| - | - |
| <span style={{ display: 'inline-block', width: '14px', height: '14px', borderRadius: '4px', background: '#ce3a3d', verticalAlign: 'middle' }} /> red | `#ce3a3d` |
| <span style={{ display: 'inline-block', width: '14px', height: '14px', borderRadius: '4px', background: '#eca441', verticalAlign: 'middle' }} /> orange | `#eca441` |
| <span style={{ display: 'inline-block', width: '14px', height: '14px', borderRadius: '4px', background: '#56c841', verticalAlign: 'middle' }} /> green | `#56c841` |
| <span style={{ display: 'inline-block', width: '14px', height: '14px', borderRadius: '4px', background: '#3493da', verticalAlign: 'middle' }} /> blue | `#3493da` |
| <span style={{ display: 'inline-block', width: '14px', height: '14px', borderRadius: '4px', background: '#b241ec', verticalAlign: 'middle' }} /> purple | `#b241ec` |
| <span style={{ display: 'inline-block', width: '14px', height: '14px', borderRadius: '4px', background: '#fc41a3', verticalAlign: 'middle' }} /> pink | `#fc41a3` |
| <span style={{ display: 'inline-block', width: '14px', height: '14px', borderRadius: '4px', background: '#8a8f9c', verticalAlign: 'middle' }} /> gray | `#8a8f9c` |

## VS art

`versus.right` and `versus.left` are the poses the game shows on its VS screen before a match, one facing each way, so the two champions can face each other.

<div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, minmax(0, 1fr))', gap: '16px', margin: '16px 0' }}>
  <div style={{ textAlign: 'center' }}><img src="https://www.smashandclash.in/vs/1.webp" alt="Pengu's VS pose, facing right" /><div style={{ fontSize: '12px', marginTop: '4px' }}><code>versus.right</code></div></div>
  <div style={{ textAlign: 'center' }}><img src="https://www.smashandclash.in/vs/left/1.webp" alt="Pengu's VS pose, facing left" /><div style={{ fontSize: '12px', marginTop: '4px' }}><code>versus.left</code></div></div>
</div>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.