component

TuxContactCard

Faculty / staff directory card. One person, one card, with portrait + name + credentials + role + affiliation + typed contact rows. Two layouts: vertical (portrait above, default — best for grid directory pages) and horizontal (portrait left, inline-friendly). Compose multiple in a grid for directory pages.

canonical

Vertical · directory grid

<TuxContactCard
  name="Lina Hassan"
  credentials="Ph.D., P.E."
  role="Principal Investigator"
  affiliation="Connected & Automated Vehicles Program"
  tone="maroon"
  :contacts="[
    { type: 'email', value: 'lhassan@tti.tamu.edu' },
    { type: 'phone', value: '(979) 317-2104' },
    { type: 'office', value: 'Building 4202, Room 314' },
  ]"
/>

horizontal

Inline directory

Pass layout="horizontal". Right for inline content and sidebar lists where vertical cards would feel out of place.

contact types

email / phone / web / office / location

Each contact has a type. Email + phone get the right protocol prefix automatically (mailto:, tel:). Office and location render as plain text; web renders as an external link.

props

Props + shape

  • name — display name. Required.
  • credentials, role, affiliation — optional header lines.
  • image — portrait URL. If omitted, renders an initial-based gradient placeholder.
  • initial — character for the placeholder. Defaults to first letter of name.
  • tone — "maroon" | "gold" | "navy". Placeholder gradient color.
  • contacts — array of { type, value, label? }. Types: email | phone | web | office | location.
  • layout — "vertical" | "horizontal". Defaults to "vertical".