Complete Markdown extraction of the public OTTO component Storybook at https://www.otto.de/assets-storybook/ (Storybook 10.6.0, web components oc-*), fetched 28.09.2026.
Folders mirror the Storybook sidebar. Generated by github.com › README; raw build files in github.com › README; design tokens in OTTO design tokens.
Rules for generation
- Use only components marked Stable below, and only their latest version (tag with the highest
-vN). - Not Ready For Use components, CSS-only (deprecated) components, older component versions and attributes/slots marked Deprecated in an API table are NOT allowed for generation.
- Style with semantic design tokens (
--oc-semantic-*) and the Fragments utility classes; base tokens (--oc-base-*) only as references, never in production code (see Use design tokens). storybook/components.jsonholds the same table plus the full API per tag in machine-readable form.
Components
| Component | Group | Version | Tag | Status | Docs |
|---|---|---|---|---|---|
| Block | CSS-only Components | v1 | - | Deprecated, NOT allowed for generation | Block (deprecated) |
| Link | CSS-only Components | v1 | - | Deprecated, NOT allowed for generation | Link (deprecated) |
| Row | CSS-only Components | v1 | - | Deprecated, NOT allowed for generation | Row (deprecated) |
| Accordion | Components | v1 | <oc-accordion-v1> |
Stable, allowed for generation | Accordion |
| Action Signifier | Components | v1 | <oc-action-signifier-v1> |
Stable, allowed for generation | Action Signifier |
| Auth Field | Components | v1 | <oc-auth-field-v1> |
Stable, allowed for generation | Auth Field |
| Badge | Components | v2 | <oc-badge-v2> |
Stable, allowed for generation | Badge |
| Badge | Components | v1 | <oc-badge-v1> |
Deprecated, NOT allowed for generation | Badge |
| Banner | Components | v1 | <oc-banner-v1> |
Stable, allowed for generation | Banner |
| Block | Components | v2 | <oc-block-v2> |
Stable, allowed for generation | Block |
| Button | Components | v1 | <oc-button-v1> |
Stable, allowed for generation | Button |
| Card | Components | v3 | <oc-card-v3> |
Stable, allowed for generation | Card |
| Card | Components | v2 | <oc-card-v2> |
Deprecated, NOT allowed for generation | Card |
| Carousel | Components | v1 | <oc-carousel-v1> |
Stable, allowed for generation | Carousel |
| Chat Bubble | Components | v1 | <oc-chat-bubble-v1> |
Stable, allowed for generation | Chat Bubble |
| Checkbox | Components | v2 | <oc-checkbox-v2> |
Stable, allowed for generation | Checkbox |
| Checkbox | Components | v1 | <oc-checkbox-v1> |
Deprecated, NOT allowed for generation | Checkbox |
| Chip | Components | v3 | <oc-chip-v3> |
Stable, allowed for generation | Chip |
| Chip | Components | v2 | <oc-chip-v2> |
Deprecated, NOT allowed for generation | Chip |
| Cinema | Components | v1 | <oc-cinema-v1> |
Stable, allowed for generation | Cinema |
| Divider | Components | v1 | <oc-divider-v1> |
Stable, allowed for generation | Divider |
| Dropdown | Components | v1 | <oc-dropdown-v1> |
Stable, allowed for generation | Dropdown |
| Expander | Components | v1 | <oc-expander-v1> |
Stable, allowed for generation | Expander |
| Floating Focus | Components | v1 | <oc-floating-focus-v1> |
Stable, allowed for generation | Floating Focus |
| Focused Dialog | Components | v1 | <oc-focused-dialog-v1> |
Stable, allowed for generation | Focused Dialog |
| Form Group | Components | v1 | <oc-form-group-v1> |
Stable, allowed for generation | Form Group |
| Icon | Components | v1 | <oc-icon-v1> |
Stable, allowed for generation | Icon |
| Icon Button | Components | v3 | <oc-icon-button-v3> |
Stable, allowed for generation | Icon Button |
| Icon Button | Components | v2 | <oc-icon-button-v2> |
Deprecated, NOT allowed for generation | Icon Button |
| Icon Button | Components | v1 | <oc-icon-button-v1> |
Deprecated, NOT allowed for generation | Icon Button |
| Interactive Overlay | Components | v2 | <oc-interactive-overlay-v2> |
Stable, allowed for generation | Interactive Overlay |
| Interactive Overlay | Components | v1 | <oc-interactive-overlay-v1> |
Deprecated, NOT allowed for generation | Interactive Overlay |
| Link | Components | v2 | <oc-link-v2> |
Stable, allowed for generation | Link |
| Logo | Components | v1 | <oc-logo-v1> |
Stable, allowed for generation | Logo |
| Media Object Card | Components | v2 | <oc-media-object-card-v2> |
Stable, allowed for generation | Media Object Card |
| Media Object Card | Components | v1 | <oc-media-object-card-v1> |
Deprecated, NOT allowed for generation | Media Object Card |
| Paper Card | Components | v1 | <oc-paper-card-v1> |
Stable, allowed for generation | Paper Card |
| Popover | Components | v1 | <oc-popover-v1> |
Stable, allowed for generation | Popover |
| Progress Bar | Components | v1 | <oc-progress-bar-v1> |
Stable, allowed for generation | Progress Bar |
| Promo Card | Components | v2 | <oc-promo-card-v2> |
Stable, allowed for generation | Promo Card |
| Promo Card | Components | v1 | <oc-promo-card-v1> |
Deprecated, NOT allowed for generation | Promo Card |
| Radio Button | Components | v2 | <oc-radio-button-v2> |
Stable, allowed for generation | Radio Button |
| Radio Button | Components | v1 | <oc-radio-button-v1> |
Deprecated, NOT allowed for generation | Radio Button |
| Row | Components | v2 | <oc-row-v2> |
Stable, allowed for generation | Row |
| Search Field | Components | v1 | <oc-search-field-v1> |
Stable, allowed for generation | Search Field |
| Selection Signifier | Components | v1 | <oc-selection-signifier-v1> |
Stable, allowed for generation | Selection Signifier |
| Selection Tile | Components | v2 | <oc-selection-tile-v2> |
Stable, allowed for generation | Selection Tile |
| Selection Tile | Components | v1 | <oc-selection-tile-v1> |
Deprecated, NOT allowed for generation | Selection Tile |
| Sheet | Components | v1 | <oc-sheet-v1> |
Stable, allowed for generation | Sheet |
| Skeleton | Components | v1 | <oc-skeleton-v1> |
Stable, allowed for generation | Skeleton |
| Skip Link | Components | v1 | <oc-skip-link-v1> |
Stable, allowed for generation | Skip Link |
| Snackbar | Components | v1 | <oc-snackbar-v1> |
Stable, allowed for generation | Snackbar |
| Spinner | Components | v1 | <oc-spinner-v1> |
Stable, allowed for generation | Spinner |
| Switch | Components | v3 | <oc-switch-v3> |
Stable, allowed for generation | Switch |
| Switch | Components | v2 | <oc-switch-v2> |
Deprecated, NOT allowed for generation | Switch |
| Tab Bar | Components | v1 | <oc-tab-bar-v1> |
Stable, allowed for generation | Tab Bar |
| Tag | Components | v1 | <oc-tag-v1> |
Stable, allowed for generation | Tag |
| Text Area | Components | v1 | <oc-text-area-v1> |
Stable, allowed for generation | Text Area |
| Text Field | Components | v1 | <oc-text-field-v1> |
Stable, allowed for generation | Text Field |
| Toggletip | Components | v1 | <oc-toggletip-v1> |
Stable, allowed for generation | Toggletip |
| Tooltip | Components | v2 | <oc-tooltip-v2> |
Stable, allowed for generation | Tooltip |
| Tooltip | Components | v1 | <oc-tooltip-v1> |
Deprecated, NOT allowed for generation | Tooltip |
| Async fragment | Not Ready For Use | v1 | <oc-async-fragment-v1> |
Not Ready For Use, NOT allowed for generation | Async fragment (Not Ready For Use) |
| Back to top button | Not Ready For Use | v1 | <oc-back-to-top-button-v1> |
Not Ready For Use, NOT allowed for generation | Back to top button (Not Ready For Use) |
Counts: deprecated: 16, not-ready: 2, stable: 46
Documentation pages
| Page | Folder | Live |
|---|---|---|
| Getting Started/Introduction | Introduction | getting-started-introduction--overview |
| Getting Started/IDE support | IDE support | getting-started-ide-support--overview |
| Getting Started/Include components | Include components | getting-started-include-components--overview |
| Getting Started/About components | About components | getting-started-about-components--overview |
| Development/Use design tokens | Use design tokens | development-use-design-tokens--overview |
| Development/Theming | Theming | development-theming--overview |
| Development/Accessibility | Accessibility | development-accessibility--overview |
| Development/Events | Events | development-events--overview |
| Development/Siteframes | Siteframes | development-siteframes--overview |
| Development/Visibility tracking | Visibility tracking | development-visibility-tracking--overview |
| Development/Testing utilities | Testing utilities | development-testing-utilities--overview |
| Development/Best Practices | Best Practices | development-best-practices--overview |
| Development/Interactive component slots | Interactive component slots | development-interactive-component-slots--overview |
| Development/Interactive elements and Shadow DOM | Interactive elements and Shadow DOM | development-interactive-elements-and-shadow-dom--overview |
| Development/SEO/Headline structure | Headline structure | development-seo-headline-structure--overview |
| Development/SEO/Optimization techniques | Optimization techniques | development-seo-optimization-techniques--overview |
| Development/SEO/Optimization techniques (Deprecated) | Optimization techniques (Deprecated) | development-seo-optimization-techniques-deprecated--overview |
| Development/Working with slots | Working with slots | development-working-with-slots--overview |
| Fragments/Design tokens overview | Design tokens overview | fragments-design-tokens-overview--overview |
| Fragments/Border radius | Border radius | fragments-border-radius--overview |
| Fragments/Color | Color | fragments-color--overview |
| Fragments/Layout and spacing/Breakpoints | Breakpoints | fragments-layout-and-spacing-breakpoints--overview |
| Fragments/Layout and spacing/Gap | Gap | fragments-layout-and-spacing-gap--overview |
| Fragments/Layout and spacing/Grid | Grid | fragments-layout-and-spacing-grid--overview |
| Fragments/Layout and spacing/Spacing | Spacing | fragments-layout-and-spacing-spacing--overview |
| Fragments/List | List | fragments-list--overview |
| Fragments/Shadow | Shadow | fragments-shadow--overview |
| Fragments/Typography | Typography | fragments-typography--overview |
| Fragments/Typography/Copy | Copy | fragments-typography-copy--overview |
| Fragments/Typography/Headlines | Headlines | fragments-typography-headlines--overview |
| Fragments/Typography/Display | Display | fragments-typography-display--overview |
| Fragments/Visually Hidden | Visually Hidden | fragments-visually-hidden--overview |
| Legal/Notice | Notice | legal-notice--overview |
| Tests/Chromatic | Chromatic | tests-chromatic--accordion-v-1 |
| Tests/Form | Form | tests-form--simple-form-submit |
| Tests/Interactive | Interactive | tests-interactive--deprecated-links |
Index coverage: 1173 entries (300 docs pages, 873 stories) in 87 folders.