Content Cards
Team
Team member portrait card with role, bio, and social links.
Content Cards
Four components covering the most common social-proof and people content patterns: products with color variants, team member profiles, aggregated review scores, and editorial testimonials.
Components
<XCardTeam />
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 uses the filter-x-warm preset automatically. Social links use ghost icon buttons.
<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 | — | Person's full name (required) |
role | string | — | Job title or role (required) |
bio | string | — | Short biography, line-clamped to 2 lines |
imageUrl | string | — | Portrait photo URL (required) |
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 |
AI Context
category: ContentCards
package: "@xenterprises/nuxt-x-cards"
components:
- XCardTeam
use-when: >
Use XCardTeam on about/team pages for team member profile cards.
notes:
- XCardTeam applies filter-x-warm to portrait images automatically