# Credential card

The credential card is the one card Yutai's holder app shows: the tier its holder carries, the tenure picture behind it and the verification status of the credential, drawn inside your page from the tokens you set.

## The script

Yutai serves the SDK's script at the address below: the script loads once, then the element is written with its facts as attributes.

The script is served today.

Embed code

```
<script src="https://yutai.com/sdk/v1/yutai-sdk-web.min.js"></script>

<yutai-credential-card
  tier="Tier 1"
  status="minted"
  tenure-days="145"
  tenure-next-tier="Tier 2"
  tenure-progress="62.5"
  tenure-progress-decimals="1"
></yutai-credential-card>
```

## The sample

The sample renders the same card from the same element the embed above writes, so the card is live here now, drawn by the served script the script section names.

Sample figures: a simulated holder, not a real credential.

## The attributes

The card's facts arrive as attributes. The three tenure attributes come as one set: pass all three, or none of them. A Patron card is at the top tier, so it takes tenure-days alone and shows "Top tier reached" with no progress bar.

| Attribute | What to pass |

| --- | --- |

| `tier` | Required. The tier the card carries, one of Tier 1, Tier 2 or Tier 3. |

| `status` | Required. The verification status the card shows: minted or revoked. |

| `tenure-days` | With the tenure set, or alone on a Patron card: the days the credential has been held, a number of days of 0 or more, like "145". |

| `tenure-next-tier` | With the tenure set: the tier the tenure is moving toward, one of the tiers above the card's own tier. Not given on a Patron card, the top tier. |

| `tenure-progress` | With the tenure set: the progress toward the next tier, a percentage of 0 through 100, like "62.5". Not given on a Patron card, the top tier. |

| `tenure-progress-decimals` | Optional. The scale the percentage shows: a whole number of digits, 0 or more, up to the scale the card draws. Not given on a Patron card. |

## The tokens

Set the tokens you want on the element itself, the way the member template does: a value the element carries beats the card's own binding.

| Token | What it changes |

| --- | --- |

| `--accent` | The primary action colour. |

| `--accent-foreground` | The text colour that sits on the primary action colour. |

| `--focus` | The colour focus rings wear. |

| `--link` | The colour a link wears. |

| `--radius` | The corners the card and its tenure track round with, 0 to 0.75rem. |

| `--yutai-font-sans` | The font stack the card's text renders in. |

| `--background` | The page background around the card, from the approved neutral list. |

Every other token stays Yutai's own: the card's brand colours, its words and its text stay Yutai-controlled, so the card stays accessible on every member's pages.

## The refusals

The card never paints input it cannot draw. A refusal happens before anything renders, so the card keeps its last good paint, and it reaches your page as one yutai-error event, its detail carrying the card's tag and one plain sentence: a card with no tier, a tier the card does not draw, a card with no status, a status the card does not show, a partial tenure set, a days figure that is not a plain decimal or sits below zero, a progress that is not a plain decimal or is not a percentage of 0 through 100, a next tier that is not a tier or sits at or below the card's own tier, decimals that are not a whole number of digits or are more digits than the card draws, or a top-tier card handed anything but tenure-days.

For a status the card does not show, the sentence is:

> The status attribute "gold" is not a status the card shows. Set status to minted and revoked.

Read [the React page's onError note](/docs/react#props-heading) for the wrapper that carries each refusal to your page.