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.

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="...".

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.

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.