# IngredientExplorer

> Interactive ingredient breakdown for supplements and skincare

Canonical URL: https://fa7e86e3d553:3005/islands/engagement/ingredient-explorer

> Interactive ingredient breakdown for supplements, skincare, food. Builds trust through transparency.

## Preview

**Category**: Engagement

## Props

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| ingredients | array | yes | - | Array of ingredient objects with name, description, benefit (optional), icon (optional), image (optional), percentage (optional) |
| layout | enum | no | grid | Display layout: 'grid', 'list', or 'editorial' |
| columns | number | no | 2 | Grid columns (1-4). Applies to 'grid' and 'editorial' layouts |
| size | enum | no | sm | Typography scale: 'sm', 'md', or 'lg' |

## Embed Example

```html
<lx-island name="IngredientExplorer">
  <script type="application/json">
{
  "ingredients": [
    {
      "name": "example-name",
      "description": "example-description"
    }
  ]
}
  </script>
</lx-island>
```

## Usage Patterns

**List layout** (vertical stacked cards):

```html
<lx-island name="IngredientExplorer">
  <script type="application/json">
{
  "ingredients": [
    {
      "name": "example-name",
      "description": "example-description"
    }
  ]
}
  </script>
</lx-island>
```

**Grid layout** (2-3 columns, hover interactions):

```html
<lx-island name="IngredientExplorer">
  <script type="application/json">
{
  "ingredients": [
    {
      "name": "example-name",
      "description": "example-description"
    }
  ]
}
  </script>
</lx-island>
```

## Layouts

- **grid** — Accordion cards in multi-column grid. Click to expand. Best for 4+ ingredients.
- **list** — Vertical stack of accordion cards. Click to expand.
- **editorial** — Large cards with all content visible (no accordion). Supports `image` prop per ingredient. Best for hero ingredients on premium PDPs.

## Tips

- layout:'grid' — multi-column, click reveals benefit (best for 4+ ingredients)
- layout:'list' — vertical stack, click to reveal (best for 2-3 key ingredients)
- layout:'editorial' — all content visible, supports images, larger typography
- `columns` controls grid columns (1-4), applies to grid and editorial layouts
- `size` scales typography: 'sm' (default), 'md' (larger), 'lg' (editorial-scale)
- `image` prop on ingredient shows a photo (only renders in editorial layout)
- percentage prop shows concentration (e.g. "5%") — optional but builds credibility
- icon prop renders emoji/text icon next to ingredient name
- Use for supplements, skincare, food products — builds transparency and trust

## Stylable Parts

Target internal elements via `data-part` selectors in section CSS:

| Part | Description |
|------|-------------|
| `root` | Outermost container |

```css
/* Example: custom styling */
[data-section-id='SECTION'] [data-part='root'] {
  border-radius: 1rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
```

## Related Islands

- Native HTML/CSS tabs — Use for a full ingredient list
- Native `<details>/<summary>` markup — Use for common ingredient questions