nuxt-x-cards
Team Card
Team member portrait card with role, bio, and social links.
Team Card
The XCardTeam component renders a team member profile card with a warm-filtered portrait photo, name, role, optional bio, and social icon links. The portrait renders at aspect-square and applies the warm filter preset by default.
Components
<XCardTeam />
<XCardTeam
name="Dr. Sarah Chen"
role="Chief Science Officer"
bio="Former Stanford sleep lab researcher with 15 years studying circadian biology."
image-url="/images/team/sarah.jpg"
:socials="[
{ icon: 'i-simple-icons-linkedin', to: 'https://linkedin.com/in/sarahchen', label: 'LinkedIn' },
{ icon: 'i-simple-icons-x', to: 'https://x.com/sarahchen', label: 'X' }
]"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
name | string | required | Person's full name |
role | string | required | Job title or role |
imageUrl | string | required | Portrait photo URL |
bio | string | — | Short biography, line-clamped to 2 lines |
imageAlt | string | — | Alt text for the portrait |
socials | Array<{ icon: string; to: string; label?: string }> | — | Social link buttons; icon is a UIcon name, label sets aria-label |
filter | 'cinematic' | 'moody' | 'golden' | 'cool' | 'dramatic' | 'warm' | 'clean' | 'product' | 'none' | 'warm' | CSS filter applied to the portrait image. |
loading | 'eager' | 'lazy' | 'lazy' | Native <img> loading hint for the portrait. |
AI Context
component: XCardTeam
package: "@xenterprises/nuxt-x-cards"
category: ContentCards
use-when: >
Use XCardTeam on about/team pages for team member profile cards.
notes:
- Applies filter-x-warm to portrait images automatically