# Activity & Equipment Components (/developers/web-components-activities)



These components render activity and equipment data from the initialization response. They require no additional API calls — the data is already available after `api.registerComponents()`.

Activity Card [#activity-card]

Renders a single activity with image, name, tagline, description, duration/equipment badges, price, and availability.

```html
<resytech-activity-card activity-id="activity-uuid"></resytech-activity-card>
```

Attributes [#attributes]

| Attribute           | Type      | Default | Description                                    |
| ------------------- | --------- | ------- | ---------------------------------------------- |
| `activity-id`       | `string`  | —       | Activity UUID from the initialization response |
| `show-tagline`      | `boolean` | `true`  | Show the activity tagline                      |
| `show-description`  | `boolean` | `true`  | Show the description (clamped to 3 lines)      |
| `show-price`        | `boolean` | `true`  | Show starting price                            |
| `show-durations`    | `boolean` | `true`  | Show duration range badge                      |
| `show-equipment`    | `boolean` | `true`  | Show equipment count badge                     |
| `show-availability` | `boolean` | `true`  | Show next available date                       |

Events [#events]

| Event             | Detail                                 |
| ----------------- | -------------------------------------- |
| `activity-select` | `{ activity: InitializationActivity }` |

Programmatic Data [#programmatic-data]

You can also set the activity data directly via JavaScript:

```javascript
const card = document.querySelector('resytech-activity-card');
card.activity = myActivityObject;
card.theme = myThemeOverride; // optional
```

CSS Parts [#css-parts]

Style from outside Shadow DOM using `::part()`:

```css
resytech-activity-card::part(card) { border: 2px solid #e2e8f0; }
resytech-activity-card::part(title) { font-size: 22px; }
resytech-activity-card::part(body) { padding: 24px; }
```

***

Activity List [#activity-list]

Renders a responsive grid of activity cards. Each card fires `activity-select` which bubbles up.

```html
<resytech-activity-list></resytech-activity-list>
```

With an optional title:

```html
<resytech-activity-list show-title="true" title-text="Our Experiences"></resytech-activity-list>
```

Attributes [#attributes-1]

| Attribute    | Type      | Default                    | Description                      |
| ------------ | --------- | -------------------------- | -------------------------------- |
| `show-title` | `boolean` | `false`                    | Show a heading above the grid    |
| `title-text` | `string`  | `Activities`               | Heading text                     |
| `empty-text` | `string`  | `No activities available.` | Message when no activities exist |

CSS Custom Properties [#css-custom-properties]

| Property                    | Description                    | Default |
| --------------------------- | ------------------------------ | ------- |
| `--resytech-card-min-width` | Minimum card width in the grid | `320px` |
| `--resytech-grid-gap`       | Gap between cards              | `24px`  |

***

Equipment Card [#equipment-card]

Renders a single equipment option with image, name, description, capacity badge, and selection state.

Equipment cards are typically created by the Equipment List, but you can also use them standalone:

```javascript
const card = document.createElement('resytech-equipment-card');
card.equipment = activity.equipment[0];
card.selected = true;
document.body.appendChild(card);
```

Attributes [#attributes-2]

| Attribute  | Type      | Default | Description                                |
| ---------- | --------- | ------- | ------------------------------------------ |
| `selected` | `boolean` | `false` | Show as selected (blue border + checkmark) |

Events [#events-1]

| Event              | Detail                     |
| ------------------ | -------------------------- |
| `equipment-select` | `{ equipment: Equipment }` |

***

Equipment List [#equipment-list]

Renders a grid of equipment cards for a given activity. Set the activity via `activity-id` attribute or the `activity` property.

```html
<resytech-equipment-list activity-id="activity-uuid" show-title="true"></resytech-equipment-list>
```

Attributes [#attributes-3]

| Attribute     | Type      | Default                 | Description                          |
| ------------- | --------- | ----------------------- | ------------------------------------ |
| `activity-id` | `string`  | —                       | Activity UUID to load equipment from |
| `selected`    | `string`  | —                       | Equipment UUID to show as selected   |
| `show-title`  | `boolean` | `false`                 | Show heading                         |
| `title-text`  | `string`  | `Choose Your Equipment` | Heading text                         |

Programmatic Data [#programmatic-data-1]

```javascript
const list = document.querySelector('resytech-equipment-list');
list.activity = selectedActivity;      // set activity data directly
list.selectedUuid = 'equipment-uuid';  // highlight a selection
```

***

Wiring Activity → Equipment Selection [#wiring-activity--equipment-selection]

A typical pattern is to listen for activity selection and update the equipment list:

```javascript
document.addEventListener('activity-select', (e) => {
  const equipmentList = document.querySelector('resytech-equipment-list');
  equipmentList.activity = e.detail.activity;
});

document.addEventListener('equipment-select', (e) => {
  const equipmentList = document.querySelector('resytech-equipment-list');
  equipmentList.selectedUuid = e.detail.equipment.uuid;

  // Continue to duration selection...
});
```