TextBlock

<Stack Gap="2" Grow>
    @foreach (var size in Enum.GetValues<TextSize>())
    {
        <Row Gap="4" Align="Align.Baseline">
            <TextBlock As="span" Size="TextSize.Xs" Color="Color.Muted" Width="3.Rem" TabularNums>@size</TextBlock>
            <TextBlock As="span" Size="size" Truncate>Invoice paid</TextBlock>
        </Row>
    }
</Stack>

<Stack Gap="4" Grow>
    <Row Gap="6" Wrap>
        @foreach (var weight in Enum.GetValues<FontWeight>())
        {
            <TextBlock As="span" Weight="weight">@weight</TextBlock>
        }
    </Row>
    <Row Gap="6" Wrap>
        <TextBlock As="span" Family="FontFamily.Body">Body</TextBlock>
        <TextBlock As="span" Family="FontFamily.Heading">Heading</TextBlock>
        <TextBlock As="span" Family="FontFamily.Mono">Mono</TextBlock>
        <TextBlock As="span" Italic>Italic</TextBlock>
        <TextBlock As="span" Decoration="TextDecoration.Underline">Underline</TextBlock>
        <TextBlock As="span" Decoration="TextDecoration.LineThrough" Color="Color.Muted">$49 a month</TextBlock>
    </Row>
</Stack>

@* Four levels of emphasis, and accent text tuned for 4.5:1 contrast on any surface. *@
<Stack Gap="4" Grow>
    <Stack Gap="1">
        <TextBlock>Deploy finished in 42 seconds</TextBlock>
        <TextBlock Color="Color.Muted">main · 3f9a2c7 by Ada Lovelace</TextBlock>
        <TextBlock Color="Color.Subtle">Started 2 minutes ago</TextBlock>
        <TextBlock Color="Color.Disabled">Rollback unavailable</TextBlock>
    </Stack>
    <Row Gap="6" Wrap>
        <TextBlock As="span" Color="Color.PrimaryText" Weight="FontWeight.Medium">Beta</TextBlock>
        <TextBlock As="span" Color="Color.SuccessText" Weight="FontWeight.Medium">Healthy</TextBlock>
        <TextBlock As="span" Color="Color.WarningText" Weight="FontWeight.Medium">Degraded</TextBlock>
        <TextBlock As="span" Color="Color.DangerText" Weight="FontWeight.Medium">Payment failed</TextBlock>
        <TextBlock As="span" Color="Color.InfoText" Weight="FontWeight.Medium">Scheduled</TextBlock>
    </Row>
</Stack>

<Stack Gap="4" MaxWidth="24.Rem" Grow>
    <TextBlock Weight="FontWeight.Medium" Truncate>Migrate the billing service to the new payments API before the March release</TextBlock>
    <TextBlock LineClamp="2" Color="Color.Muted">
        The current integration uses an API version that will be retired at the end of the quarter. Move
        webhooks first, then charges and refunds, and keep the old endpoint running until every region
        has switched over.
    </TextBlock>
</Stack>

<Row Gap="8">
    <Stack Align="Align.End">
        <TextBlock Size="TextSize.Sm" Color="Color.Muted">Default</TextBlock>
        <TextBlock>$1,111.11</TextBlock>
        <TextBlock>$8,808.80</TextBlock>
        <TextBlock>$420.17</TextBlock>
    </Stack>
    <Stack Align="Align.End">
        <TextBlock Size="TextSize.Sm" Color="Color.Muted">TabularNums</TextBlock>
        <TextBlock TabularNums>$1,111.11</TextBlock>
        <TextBlock TabularNums>$8,808.80</TextBlock>
        <TextBlock TabularNums>$420.17</TextBlock>
    </Stack>
</Row>