Embed the 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 Tier 3 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 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 Tier 3 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 Tier 3 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 Tier 3 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 Tier 3 card.

The parts

A part is a named piece inside the card that a page's own ::part rule can reach. The list is closed: a part name not in this table matches nothing.

yutai-credential-card::part(card) { background: teal; }

card

The card's own surface.

card-tier

The level chip in the card header.

The tokens

Set the tokens you want on the element itself, the way the member template does: a value the element carries beats its 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 element rounds with, 0 to 0.75rem.

--yutai-font-sans

The font stack the element's text renders in.

--background

The page background around the element, from the approved neutral list.

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 tier the card does not draw, such as an outdated tier name, the sentence is:

The tier attribute "Holder" is not a tier the card draws. Set tier to Tier 1, Tier 2 and Tier 3.

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.