Skip to main content

component

TuxCallout

Pulled-aside editorial accent — a fact, finding, or quote that interrupts body flow. The leading rule on the left adopts the page's style signature. Use sparingly — ≤2 callouts per article; each one breaks reading flow.

Interactive Component Playground

TuxCallout Workbench

Presets:
Properties Inspector4 configurable knobs
Callout Kindkind
Border Variantvariant
Custom Eyebrow Overrideeyebrow
Callout Body Contentcontent
Dynamic Component Syntax
<tux-callout kind="stat" variant="default">
  Compliance gains held steady through the 36-month follow-up window — suggesting the treatments work via persistent infrastructure cues.
</tux-callout>

canonical

Default · in body context

Roadway departure crashes account for more than half of rural fatalities, and the persistent geographic distribution of these events points to enduring infrastructure conditions rather than transient driver behavior.

TTI's twelve-county before/after study began in 2020, with reconstruction work staggered across three field seasons. 

<TuxCallout kind="stat">
  <p>
    Compliance gains held steady through the 36-month follow-up window —
    suggesting the treatments work via persistent infrastructure cues rather
    than a novelty effect.
  </p>
</TuxCallout>

three kinds

fact / stat / quote

Eyebrow defaults: fact → "Worth noting", stat → "Key finding", quote → "Voice". Override with eyebrow="...". 

<TuxCallout kind="fact">
  <p>The Texas Triangle's monitored corridors carry an average 2.1M vehicles per day.</p>
</TuxCallout>
<TuxCallout kind="stat">
  <p>Treated intersections showed a 37% reduction in stop-line non-compliance.</p>
</TuxCallout>
<TuxCallout kind="quote">
  <p>"What surprised us was the durability of the effect." — Dr. R. Hassan</p>
</TuxCallout>

style variants

Per-variant left rule

Default = soft-faded maroon hairline. Bold = three stacked bars, decreasing in length and opacity. Elegant = 8px diagonal maroon hash with vertical fade mask. 

<TuxCallout variant="default" kind="fact">
  <p>Default style — soft-faded maroon hairline.</p>
</TuxCallout>
<TuxCallout variant="bold" kind="fact">
  <p>Bold style — three stacked maroon bars.</p>
</TuxCallout>
<TuxCallout variant="elegant" kind="fact">
  <p>Elegant style — 8px diagonal hash with vertical fade mask.</p>
</TuxCallout>

props

Props reference

  • kind — "fact" | "stat" | "quote". Defaults to "fact". Sets the eyebrow label.
  • eyebrow — custom eyebrow string. Overrides kind's default mapping.
  • variant — "default" | "bold" | "elegant". Determines the left-rule signature.
  • Default slot — the callout body. <p> tags inside get appropriate spacing.