Skip to main content

component

TuxCard

A static branded block, or pass to and it becomes a NuxtLink with corner-drop choreography — the card shifts +6/-6px on hover and an arrow fades in at the top-right. The 2px maroon border is load-bearing, so we don't wrap UCard.

Interactive Component Playground

TuxCard Workbench

Presets:

research project · 2026

Corridor Safety & Congestion Review

Multimodal analysis of automated safety interventions and incident response along the I-35 corridor.

Properties Inspector5 configurable knobs
Eyebroweyebrow
Card Titletitle
Body Descriptionbody
Link Destination (`to`)to
Padded Inner Surfacepadded
true
Dynamic Component Syntax
<tux-card to="/tokens">
  <p class="eyebrow">research project · 2026</p>
  <h3 class="text-xl font-bold">Corridor Safety & Congestion Review</h3>
  <p class="mt-2 text-sm text-text-secondary">
    Multimodal analysis of automated safety interventions and incident response along the I-35 corridor.
  </p>
</tux-card>

static

Without `to`

project · 2026-04-22

Corridor safety review

Static card — no hover motion. Use for summary blocks inside a page. 

<tux-card>
  <p class="eyebrow">project · 2026-04-22</p>
  <h3 class="text-xl font-bold">Corridor safety review</h3>
  <p class="mt-2 text-sm text-text-secondary">
    Static card — no hover motion. Use for summary blocks inside a page.
  </p>
</tux-card>

linked

With `to`

Hover to see the corner-drop + arrow. The destination (/tokens) works — click to navigate back.

foundations

Browse tokens

Every CSS variable the system exposes.

foundations

Typography

The heading utilities + scale in context. 

<tux-card to="/tokens">
  <p class="eyebrow">foundations</p>
  <h3 class="text-xl font-bold">Browse tokens</h3>
  <p class="mt-2 text-sm text-text-secondary">
    Every CSS variable the system exposes.
  </p>
</tux-card>