Embed the 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.
<script src="https://yutai.com/sdk/v1/yutai-sdk-web.min.js"></script>
<yutai-credential-card
tier="Holder"
status="minted"
tenure-days="145"
tenure-next-tier="Steward"
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.
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.
tier- Required. The tier the card carries, one of Holder, Steward or Patron.
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.
--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 for the wrapper that carries each refusal to your page.