Team Member

{
  "$bloktastic": {
    "version": "1.0.0"
  },
  "name": "team_member",
  "display_name": "Team Member",
  "is_root": false,
  "is_nestable": true,
  "schema": {
    "name": {
      "type": "text",
      "pos": 0,
      "display_name": "Name",
      "description": "Team member full name",
      "required": true
    },
    "role": {
      "type": "text",
      "pos": 1,
      "display_name": "Role",
      "description": "Job title or function",
      "required": true
    },
    "bio": {
      "type": "textarea",
      "pos": 2,
      "display_name": "Bio",
      "description": "Short biography text"
    },
    "avatar": {
      "type": "asset",
      "pos": 3,
      "display_name": "Avatar",
      "description": "Profile image"
    },
    "linkedin": {
      "type": "multilink",
      "pos": 4,
      "display_name": "LinkedIn Link",
      "description": "LinkedIn profile URL"
    },
    "x_link": {
      "type": "multilink",
      "pos": 5,
      "display_name": "X/Twitter Link",
      "description": "X/Twitter profile URL"
    }
  },
  "preview_field": "name"
}

# Team Member

## Purpose
Profile card for a team member with role, avatar, and optional social links.

## Storyblok Schema Fields
- `name` (text, required): Team member full name
- `role` (text, required): Job title or function
- `bio` (textarea): Short biography text
- `avatar` (asset): Profile image
- `linkedin` (multilink): LinkedIn profile URL
- `x_link` (multilink): X/Twitter profile URL

## Visual Requirements
- Design for responsive marketing pages (mobile, tablet, desktop).
- Keep spacing and hierarchy clear for conversion-focused sections.
- Support optional content gracefully without visual gaps.

## Accessibility
- Use semantic sectioning and heading structure.
- Ensure interactive elements are keyboard reachable with visible focus states.
- Maintain WCAG-compliant contrast in all supported styles.

## Example Props Structure
```typescript
interface TeamMemberProps {
  // Map Storyblok fields to your frontend props here
}
```

## Edge Cases
- Missing optional media or links.
- Extremely long text content.
- Empty collections in nested blok fields.

# @bloktastic/team-member

Profile card for a team member with role, avatar, and optional social links.

## Installation

```bash
bloktastic add @bloktastic/team-member
```

## Fields

| Field | Type | Required | Description |
|---|---|---|---|
| name | text | Yes | Team member full name |
| role | text | Yes | Job title or function |
| bio | textarea | No | Short biography text |
| avatar | asset | No | Profile image |
| linkedin | multilink | No | LinkedIn profile URL |
| x_link | multilink | No | X/Twitter profile URL |

## Notes
- Category: `content`
- Tags: `team`, `profile`, `member`, `about`