A digital services project by FlexionVariant Callout
feedbackCustom
Prominent callout announcing which LLM variant will run a task, with affordances to change the selection and see benchmarks.
Custom component — no upstream reference.
Variants
Extraction Variant Callout
<aside class="flex-variant-callout l-stack" aria-label="Extraction model: Claude Sonnet 4">
<div class="flex-variant-callout__header"><span class="flex-variant-callout__task-label">Extraction model</span></div>
<div class="flex-variant-callout__body l-stack"><span class="flex-variant-callout__variant-name">Claude Sonnet 4</span><span class="flex-variant-callout__variant-description">Balanced quality and speed</span></div>
<p class="flex-variant-callout__evaluation-summary">3 variants evaluated on 3 government PDF fixtures</p>
<div class="flex-variant-callout__actions l-cluster"><a class="flex-button" data-variant="outline" data-size="small" href="/settings/variants?task=extraction">Change model</a><a class="flex-button" data-variant="unstyled" data-size="small" href="/catalog/experiments/pdf-field-extraction">See benchmarks →</a></div>
</aside>Contract
Documented variants
- ExtractionVariantCallout — Callout card showing the active extraction model variant with its name, description, evaluation summary, and action links.
Behavior promises
- ○ Callout exposes the task label and variant name to screen readers via the aside aria-label
- ○ "Change model" and "See benchmarks" links navigate to the settings and catalog pages respectively
Source CSS
/* flex-variant-callout — bordered, accent-tinted card that announces which
LLM variant is configured for a task and offers quick links to change the
selection or see the evaluation benchmarks. */
.flex-variant-callout {
background-color: color-mix(
in srgb,
var(--flex-color-accent) 4%,
var(--flex-color-surface)
);
border: 1px solid
color-mix(in srgb, var(--flex-color-accent) 30%, var(--flex-color-border));
border-radius: var(--flex-radius-md);
padding: var(--flex-space-lg);
color: var(--flex-color-text);
--stack-space: var(--flex-space-md);
}
.flex-variant-callout__task-label {
display: block;
font-size: var(--flex-text-sm);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--flex-color-text-muted);
}
.flex-variant-callout__body {
--stack-space: var(--flex-space-2xs);
}
.flex-variant-callout__variant-name {
display: block;
font-size: var(--flex-text-uswds);
font-weight: 600;
color: var(--flex-color-text);
line-height: 1.3;
}
.flex-variant-callout__variant-description {
display: block;
color: var(--flex-color-text-muted);
}
.flex-variant-callout__evaluation-summary {
margin: 0;
font-size: var(--flex-text-sm);
color: var(--flex-color-text-muted);
}
.flex-variant-callout__actions {
--cluster-space: var(--flex-space-sm);
}