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 does not serve the SDK's script yet, so nothing loads at the address below today. The embed is the shape a venue copies when the script ships: the script loads once, then the element is written with its facts as attributes.
Planned embed, not loadable yet.
<script src="https://yutai.com/sdk/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. When the script is served, the address in the script section is the one your page loads.
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 Holder, Steward or Patron. 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 tenant 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 in every venue.