# Feature Tabs

> Render a tabbed feature showcase powered by Alpine.js.

Canonical HTML: https://press.varavel.com/docs/shortcodes/feature-tabs/
Markdown: https://press.varavel.com/docs/shortcodes/feature-tabs/index.md

`feature_tabs` renders a compact product tour where visitors can switch between related feature panels.

## When to Use

Use it when several ideas share the same visual space: workflows, personas, product modules, or before/after narratives.

## Usage

```markdown
{{/* feature_tabs(
title="Explore the workflow",
tab_1_label="Build",
tab_1_title="Compose pages",
tab_1_desc="Use shortcodes directly in Markdown."
) */}}
```

## Live Example

{{ feature_tabs(
container="md",
title="Explore the workflow",
tab_1_label="Build",
tab_1_icon="zap",
tab_1_title="Compose pages",
tab_1_desc="Use shortcodes directly in Markdown.",
tab_1_bullet_1="Local parameters",
tab_1_bullet_2="Responsive sections",
tab_2_label="Publish",
tab_2_icon="rocket",
tab_2_title="Ship static output",
tab_2_desc="Build with Zola and deploy the generated site anywhere."
) }}

## Parameters

| Parameter        | Description                                                 |
| ---------------- | ----------------------------------------------------------- |
| `container`      | Inner content width for the tabbed section.                 |
| `eyebrow`        | Small uppercase label above the heading.                    |
| `title`          | Section heading.                                            |
| `description`    | Supporting copy below the heading.                          |
| `tab_N_label`    | Button label for tab `N`. Supports `tab_1` through `tab_4`. |
| `tab_N_icon`     | Optional icon for tab `N`.                                  |
| `tab_N_title`    | Panel heading for tab `N`.                                  |
| `tab_N_desc`     | Panel description for tab `N`.                              |
| `tab_N_meta`     | Small metadata line above the panel title.                  |
| `tab_N_bullet_1` | First bullet for tab `N`.                                   |
| `tab_N_bullet_2` | Second bullet for tab `N`.                                  |
| `tab_N_bullet_3` | Third bullet for tab `N`.                                   |
| `bg`             | Full-width section background token.                        |
| `class`          | Additional CSS classes on the outer section.                |