@fundamental-styles/mcp 0.41.7-rc.8 → 0.41.7

package/data/components/dynamic-page.md

@@ -0,0 +1,973 @@
+---
+component: fd-dynamic-page
+title: Dev/Facets
+category: Dev
+selector: fd-dynamic-page
+cssFile: dynamic-page.css
+sourcePath: packages/styles/stories/Dev/facets/facets.stories.js
+tags: []
+dependencies: ["avatar","bar","breadcrumb","button","dynamic-page","facet","form-label","icon","link","margins","object-number","object-status","paddings","popover","rating-indicator","tabs","text","title","toolbar"]
+relatedComponents: ["avatar","bar","breadcrumb","button","dynamic-page","facet","form-label","icon","link","margins","object-number","object-status","paddings","popover","rating-indicator","tabs","text","title","toolbar"]
+stability: experimental
+generatedAt: 2026-06-09T18:29:01.657Z
+---
+
+# Dev/Facets
+
+> **🧪 EXPERIMENTAL**: This component is experimental and its API may change.
+
+Facets can be used as a standalone component or linked to another component. Facets are usually a part of the *Object Page* header content.
+        Each facet adapts its size to the content and makes optimal use of the space without truncating the texts. If the facets do not all fit on one line, those on the right wrap to the line below.
+
+## Dependencies
+
+This component depends on the following CSS files:
+
+- `avatar.css`
+- `bar.css`
+- `breadcrumb.css`
+- `button.css`
+- `dynamic-page.css`
+- `facet.css`
+- `form-label.css`
+- `icon.css`
+- `link.css`
+- `margins.css`
+- `object-number.css`
+- `object-status.css`
+- `paddings.css`
+- `popover.css`
+- `rating-indicator.css`
+- `tabs.css`
+- `text.css`
+- `title.css`
+- `toolbar.css`
+
+## Installation
+
+```bash
+npm install fundamental-styles
+```
+
+```html
+<!-- Include theme -->
+<link href="node_modules/fundamental-styles/dist/theming/sap_horizon.css" rel="stylesheet">
+
+<!-- Include component CSS -->
+<link href="node_modules/fundamental-styles/dist/dynamic-page.css" rel="stylesheet">
+
+<!-- Include dependencies -->
+<link href="node_modules/fundamental-styles/dist/avatar.css" rel="stylesheet">
+<link href="node_modules/fundamental-styles/dist/bar.css" rel="stylesheet">
+<link href="node_modules/fundamental-styles/dist/breadcrumb.css" rel="stylesheet">
+<link href="node_modules/fundamental-styles/dist/button.css" rel="stylesheet">
+<link href="node_modules/fundamental-styles/dist/dynamic-page.css" rel="stylesheet">
+<link href="node_modules/fundamental-styles/dist/facet.css" rel="stylesheet">
+<link href="node_modules/fundamental-styles/dist/form-label.css" rel="stylesheet">
+<link href="node_modules/fundamental-styles/dist/icon.css" rel="stylesheet">
+<link href="node_modules/fundamental-styles/dist/link.css" rel="stylesheet">
+<link href="node_modules/fundamental-styles/dist/margins.css" rel="stylesheet">
+<link href="node_modules/fundamental-styles/dist/object-number.css" rel="stylesheet">
+<link href="node_modules/fundamental-styles/dist/object-status.css" rel="stylesheet">
+<link href="node_modules/fundamental-styles/dist/paddings.css" rel="stylesheet">
+<link href="node_modules/fundamental-styles/dist/popover.css" rel="stylesheet">
+<link href="node_modules/fundamental-styles/dist/rating-indicator.css" rel="stylesheet">
+<link href="node_modules/fundamental-styles/dist/tabs.css" rel="stylesheet">
+<link href="node_modules/fundamental-styles/dist/text.css" rel="stylesheet">
+<link href="node_modules/fundamental-styles/dist/title.css" rel="stylesheet">
+<link href="node_modules/fundamental-styles/dist/toolbar.css" rel="stylesheet">
+```
+
+## Basic Usage
+
+```html
+<div class="fd-facet-group" role="group">
+    <div class="fd-facet fd-facet--image fd-margin-end--md">
+        <span class="fd-avatar fd-avatar--l" aria-label="Avatar">
+            <i class="fd-avatar__icon sap-icon--money-bills" role="presentation"></i>
+        </span>
+    </div>
+    <div class="fd-facet fd-facet--form fd-margin-end--md fd-margin-bottom--sm" role="group" aria-labelledby="formFacetTitle1">
+        <div role="heading" aria-level="3" class="fd-title fd-margin-bottom--sm" id="formFacetTitle1">Technical Data</div>
+        <div class="fd-facet__container fd-margin-bottom--tiny">
+            <label class="fd-form-label" for="form-value-05">Base unit:</label>
+            <div class="fd-text" id="form-value-05">Each</div>
+        </div>
+        <div class="fd-facet__container fd-margin-bottom--tiny">
+            <label class="fd-form-label" for="form-value-06">Length:</label>
+            <div class="fd-text" id="form-value-06">23.24 Centimeter</div>
+        </div>
+        <div class="fd-facet__container fd-margin-bottom--tiny">
+            <label class="fd-form-label" for="form-value-07">Width:</label>
+            <div class="fd-text" id="form-value-07">86.1 Centimeter</div>
+        </div>
+        <div class="fd-facet__container">
+            <label class="fd-form-label" for="form-value-08">Height:</label>
+            <div class="fd-text" id="form-value-08">20.8 Centimeter</div>
+        </div>
+    </div>
+    <div class="fd-facet fd-facet--key-value fd-margin-end--md fd-margin-bottom--sm" role="group" aria-labelledby="kvFacetTitle1">
+        <h1 class="fd-title fd-title--h5 fd-margin-bottom--sm" id="kvFacetTitle1">Status</h1>
+        <span class="fd-object-status fd-object-status--positive fd-object-status--large fd-facet__object-status">
+            <span class="fd-object-status__text fd-facet__object-status-text">Delivery</span>
+        </span>
+    </div>
+    <div class="fd-facet fd-facet--key-value fd-margin-end--md fd-margin-bottom--sm" role="group" aria-labelledby="kvFacetTitle2">
+        <div role="heading" aria-level="3" class="fd-title fd-margin-bottom--sm" id="kvFacetTitle2">Delivery Time</div>
+        <span class="fd-object-status fd-object-status--large fd-object-status--critical fd-facet__object-status">
+            <i class="fd-object-status__icon sap-icon--shipping-status fd-padding--none fd-margin-end--tiny" role="presentation"></i>
+            <span class="fd-object-status__text fd-facet__object-status-text">12 days</span>
+        </span>
+    </div>
+    <div class="fd-facet fd-facet--key-value fd-margin-end--md fd-margin-bottom--sm" role="group" aria-labelledby="kvFacetTitle3">
+        <div role="heading" aria-level="3" class="fd-title fd-margin-bottom--sm" id="kvFacetTitle3">Assembly Option </div>
+        <span class="fd-object-status fd-object-status--negative fd-object-status--large fd-facet__object-status">
+            <span class="fd-object-status__text fd-facet__object-status-text">To be selected</span>
+        </span>
+    </div>
+    <div class="fd-facet fd-facet--key-value fd-margin-end--md fd-margin-bottom--sm" role="group" aria-labelledby="kvFacetTitle4">
+        <h1 class="fd-title fd-title--h5 fd-margin-bottom--sm" id="kvFacetTitle4">Pricing </h1>
+        <span class="fd-object-number fd-object-number--large fd-object-number--informative">
+            <span class="fd-object-number__text">579</span><span class="fd-object-number__unit">EUR</span>
+        </span>
+    </div>
+
+    <div class="fd-facet fd-facet--rating-indicator fd-margin-end--md fd-margin-bottom--sm" role="group" aria-labelledby="ratingFacetTitle1">
+        <h1 class="fd-title fd-title--h5 fd-margin-bottom--sm" id="ratingFacetTitle1">Average User Rating</h1>
+        <h2 class="fd-form-label">6 reviews</h2>
+        <div class="fd-rating-indicator fd-facet__container">
+            <div class="fd-rating-indicator__container fd-facet__rating-container" aria-label="Star Rating (out of 5)">
+                <input aria-label="1 star" type="radio" class="fd-rating-indicator__input" id="rating-max-value-5-1" name="rating-max-value-5" value="1">
+                <label class="fd-rating-indicator__label" for="rating-max-value-5-1"></label>
+
+                <input aria-label="2 star" type="radio" class="fd-rating-indicator__input" id="rating-max-value-5-2" name="rating-max-value-5" value="2" checked>
+                <label class="fd-rating-indicator__label" for="rating-max-value-5-2"></label>
+
+                <input aria-label="3 star" type="radio" class="fd-rating-indicator__input" id="rating-max-value-5-3" name="rating-max-value-5" value="3">
+                <label class="fd-rating-indicator__label" for="rating-max-value-5-3"></label>
+
+                <input aria-label="4 star" type="radio" class="fd-rating-indicator__input" id="rating-max-value-5-4" name="rating-max-value-5" value="4">
+                <label class="fd-rating-indicator__label" for="rating-max-value-5-4"></label>
+
+                <input aria-label="5 star" type="radio" class="fd-rating-indicator__input" id="rating-max-value-5-5" name="rating-max-value-5" value="5">
+                <label class="fd-rating-indicator__label" for="rating-max-value-5-5"></label>
+            </div>
+            <span class="fd-rating-indicator__dynamic-text fd-facet__rating-dynamic-text fd-margin-top--tiny">(2 of 5)</span>
+        </div>
+    </div>
+</div>
+```
+
+## Modifiers
+
+| Class | Description |
+|-------|-------------|
+| `fd-dynamic-page--sm` | Style variant |
+| `fd-dynamic-page--xl` | Style variant |
+
+## BEM Elements
+
+This component uses the following BEM elements:
+
+- `fd-dynamic-page__breadcrumb`
+- `fd-dynamic-page__breadcrumb-container`
+- `fd-dynamic-page__breadcrumb-title-container`
+- `fd-dynamic-page__collapse-button`
+- `fd-dynamic-page__collapsible-header`
+- `fd-dynamic-page__collapsible-header-container`
+- `fd-dynamic-page__collapsible-header-visibility-container`
+- `fd-dynamic-page__collapsible-header-visibility-container--button-group`
+- `fd-dynamic-page__collapsible-header-visibility-container--left-gradient`
+- `fd-dynamic-page__collapsible-header-visibility-container--no-shadow`
+- `fd-dynamic-page__collapsible-header-visibility-container--right-gradient`
+- `fd-dynamic-page__content`
+- `fd-dynamic-page__header`
+- `fd-dynamic-page__main-container`
+- `fd-dynamic-page__pin-button`
+- `fd-dynamic-page__subtitle`
+- `fd-dynamic-page__tabs`
+- `fd-dynamic-page__tabs--add-shadow`
+- `fd-dynamic-page__tabs--overflow`
+- `fd-dynamic-page__title`
+- `fd-dynamic-page__title-area`
+- `fd-dynamic-page__title-area--collapsed`
+- `fd-dynamic-page__title-container`
+- `fd-dynamic-page__title-subtitle-container`
+- `fd-dynamic-page__toolbar`
+- `fd-dynamic-page__toolbar--actions`
+- `fd-dynamic-page__toolbar-container`
+
+## Related Components
+
+This component works with or depends on:
+
+- `avatar`
+- `bar`
+- `breadcrumb`
+- `button`
+- `dynamic-page`
+- `facet`
+- `form-label`
+- `icon`
+- `link`
+- `margins`
+- `object-number`
+- `object-status`
+- `paddings`
+- `popover`
+- `rating-indicator`
+- `tabs`
+- `text`
+- `title`
+- `toolbar`
+
+## Design Tokens
+
+Key CSS variables used by this component:
+
+- `--actions`
+- `--add-shadow`
+- `--button-group`
+- `--collapsed`
+- `--content`
+- `--fdButtonBackgroundColor`
+- `--fdDynamicPage_Button_Group_Background`
+- `--fdDynamicPage_Button_Left_Gradient`
+- `--fdDynamicPage_Button_Pin_Background`
+- `--fdDynamicPage_Button_Right_Gradient`
+- `--fdDynamicPage_Content_List_Background`
+- `--fdDynamicPage_Content_Transparent_Background`
+- `--fdDynamicPage_Hover_Border_Bottom`
+- `--fdDynamicPage_Subtitle_Color`
+- `--fdDynamicPage_Title_Collapsed_Font_Size`
+
+*...and 5 more*
+
+## Examples
+
+### Combination of facets
+
+Facet types(image, form, and key-value) used together.
+
+```html
+<div class="fd-facet-group" role="group">
+    <div class="fd-facet fd-facet--image fd-margin-end--md">
+        <span class="fd-avatar fd-avatar--l" aria-label="Avatar">
+            <i class="fd-avatar__icon sap-icon--money-bills" role="presentation"></i>
+        </span>
+    </div>
+    <div class="fd-facet fd-facet--form fd-margin-end--md fd-margin-bottom--sm" role="group" aria-labelledby="formFacetTitle1">
+        <div role="heading" aria-level="3" class="fd-title fd-margin-bottom--sm" id="formFacetTitle1">Technical Data</div>
+        <div class="fd-facet__container fd-margin-bottom--tiny">
+            <label class="fd-form-label" for="form-value-05">Base unit:</label>
+            <div class="fd-text" id="form-value-05">Each</div>
+        </div>
+        <div class="fd-facet__container fd-margin-bottom--tiny">
+            <label class="fd-form-label" for="form-value-06">Length:</label>
+            <div class="fd-text" id="form-value-06">23.24 Centimeter</div>
+        </div>
+        <div class="fd-facet__container fd-margin-bottom--tiny">
+            <label class="fd-form-label" for="form-value-07">Width:</label>
+            <div class="fd-text" id="form-value-07">86.1 Centimeter</div>
+        </div>
+        <div class="fd-facet__container">
+            <label class="fd-form-label" for="form-value-08">Height:</label>
+            <div class="fd-text" id="form-value-08">20.8 Centimeter</div>
+        </div>
+    </div>
+    <div class="fd-facet fd-facet--key-value fd-margin-end--md fd-margin-bottom--sm" role="group" aria-labelledby="kvFacetTitle1">
+        <h1 class="fd-title fd-title--h5 fd-margin-bottom--sm" id="kvFacetTitle1">Status</h1>
+        <span class="fd-object-status fd-object-status--positive fd-object-status--large fd-facet__object-status">
+            <span class="fd-object-status__text fd-facet__object-status-text">Delivery</span>
+        </span>
+    </div>
+    <div class="fd-facet fd-facet--key-value fd-margin-end--md fd-margin-bottom--sm" role="group" aria-labelledby="kvFacetTitle2">
+        <div role="heading" aria-level="3" class="fd-title fd-margin-bottom--sm" id="kvFacetTitle2">Delivery Time</div>
+        <span class="fd-object-status fd-object-status--large fd-object-status--critical fd-facet__object-status">
+            <i class="fd-object-status__icon sap-icon--shipping-status fd-padding--none fd-margin-end--tiny" role="presentation"></i>
+            <span class="fd-object-status__text fd-facet__object-status-text">12 days</span>
+        </span>
+    </div>
+    <div class="fd-facet fd-facet--key-value fd-margin-end--md fd-margin-bottom--sm" role="group" aria-labelledby="kvFacetTitle3">
+        <div role="heading" aria-level="3" class="fd-title fd-margin-bottom--sm" id="kvFacetTitle3">Assembly Option </div>
+        <span class="fd-object-status fd-object-status--negative fd-object-status--large fd-facet__object-status">
+            <span class="fd-object-status__text fd-facet__object-status-text">To be selected</span>
+        </span>
+    </div>
+    <div class="fd-facet fd-facet--key-value fd-margin-end--md fd-margin-bottom--sm" role="group" aria-labelledby="kvFacetTitle4">
+        <h1 class="fd-title fd-title--h5 fd-margin-bottom--sm" id="kvFacetTitle4">Pricing </h1>
+        <span class="fd-object-number fd-object-number--large fd-object-number--informative">
+            <span class="fd-object-number__text">579</span><span class="fd-object-number__unit">EUR</span>
+        </span>
+    </div>
+
+    <div class="fd-facet fd-facet--rating-indicator fd-margin-end--md fd-margin-bottom--sm" role="group" aria-labelledby="ratingFacetTitle1">
+        <h1 class="fd-title fd-title--h5 fd-margin-bottom--sm" id="ratingFacetTitle1">Average User Rating</h1>
+        <h2 class="fd-form-label">6 reviews</h2>
+        <div class="fd-rating-indicator fd-facet__container">
+            <div class="fd-rating-indicator__container fd-facet__rating-container" aria-label="Star Rating (out of 5)">
+                <input aria-label="1 star" type="radio" class="fd-rating-indicator__input" id="rating-max-value-5-1" name="rating-max-value-5" value="1">
+                <label class="fd-rating-indicator__label" for="rating-max-value-5-1"></label>
+
+                <input aria-label="2 star" type="radio" class="fd-rating-indicator__input" id="rating-max-value-5-2" name="rating-max-value-5" value="2" checked>
+                <label class="fd-rating-indicator__label" for="rating-max-value-5-2"></label>
+
+                <input aria-label="3 star" type="radio" class="fd-rating-indicator__input" id="rating-max-value-5-3" name="rating-max-value-5" value="3">
+                <label class="fd-rating-indicator__label" for="rating-max-value-5-3"></label>
+
+                <input aria-label="4 star" type="radio" class="fd-rating-indicator__input" id="rating-max-value-5-4" name="rating-max-value-5" value="4">
+                <label class="fd-rating-indicator__label" for="rating-max-value-5-4"></label>
+
+                <input aria-label="5 star" type="radio" class="fd-rating-indicator__input" id="rating-max-value-5-5" name="rating-max-value-5" value="5">
+                <label class="fd-rating-indicator__label" for="rating-max-value-5-5"></label>
+            </div>
+            <span class="fd-rating-indicator__dynamic-text fd-facet__rating-dynamic-text fd-margin-top--tiny">(2 of 5)</span>
+        </div>
+    </div>
+</div>
+```
+
+### Key-Value Facet
+
+Key-Value facet is used to highlight important data or KPIs. It consists of a mandatory title
+        and a text or number in a larger font size(**Object Status** or **Object Number**). The value can also have an icon to its left.
+
+```html
+<div class="fd-facet fd-facet--key-value fd-margin-end--md fd-margin-bottom--sm" role="group" aria-labelledby="kvFacetTitle5">
+    <div role="heading" aria-level="3" class="fd-title fd-margin-bottom--sm" id="kvFacetTitle5"> Status </div>
+    <span class="fd-object-status fd-object-status--positive fd-object-status--large fd-facet__object-status">
+        <span class="fd-object-status__text fd-facet__object-status-text">Delivery</span>
+    </span>
+</div>
+<div class="fd-facet fd-facet--key-value fd-margin-end--md fd-margin-bottom--sm" role="group" aria-labelledby="kvFacetTitle6">
+    <div role="heading" aria-level="3" class="fd-title fd-margin-bottom--sm" id="kvFacetTitle6"> Delivery Time </div>
+    <span class="fd-object-status fd-object-status--negative fd-object-status--large fd-facet__object-status">
+        <span class="fd-object-status__text fd-facet__object-status-text">12 days</span>
+    </span>
+</div>
+<div class="fd-facet fd-facet--key-value fd-margin-end--md fd-margin-bottom--sm" role="group" aria-labelledby="kvFacetTitle7">
+    <h1 class="fd-title fd-title--h5 fd-margin-bottom--sm" id="kvFacetTitle7"> Assembly Option </h1>
+    <span class="fd-object-status fd-object-status--critical fd-object-status--large fd-facet__object-status">
+        <span class="fd-object-status__text fd-facet__object-status-text">To be selected</span>
+    </span>
+</div>
+<div class="fd-facet fd-facet--key-value fd-margin-end--md fd-margin-bottom--sm" role="group" aria-labelledby="kvFacetTitle8">
+    <h1 class="fd-title fd-title--h5 fd-margin-bottom--sm" id="kvFacetTitle8"> Pricing </h1>
+    <span class="fd-object-number fd-object-number--large ">
+        <span class="fd-object-number__text">-2,000.00</span><span class="fd-object-number__unit">EUR</span>
+    </span>
+</div>
+```
+
+### FormFacet
+
+Form facet is used to display datasets. It consists of an optional title and label-value pair.
+        Note that the labels can be icons, but need to have a text for accessibility purposes.
+
+```html
+<div class="fd-facet fd-facet--form fd-margin-end--md fd-margin-bottom--sm" role="group" aria-labelledby="formFacetTitle2">
+    <div role="heading" aria-level="3" class="fd-title fd-margin-bottom--sm" id="formFacetTitle2"> Technical Data </div>
+    <div class="fd-facet__container fd-margin-bottom--tiny">
+        <label class="fd-form-label" for="form-value-01">Base unit:</label>
+        <div class="fd-text" id="form-value-01">Each</div>
+    </div>
+    <div class="fd-facet__container fd-margin-bottom--tiny">
+        <label class="fd-form-label" for="form-value-02">Length:</label>
+        <div class="fd-text" id="form-value-02">23.24 Centimeter</div>
+    </div>
+    <div class="fd-facet__container fd-margin-bottom--tiny">
+        <label class="fd-form-label" for="form-value-03">Width:</label>
+        <div class="fd-text" id="form-value-03">86.1 Centimeter</div>
+    </div>
+    <div class="fd-facet__container">
+        <label class="fd-form-label" for="form-value-04">Height:</label>
+        <div class="fd-text" id="form-value-04">20.8 Centimeter</div>
+    </div>
+</div>
+```
+
+### Form Facet with Link
+
+Text in a form facet can also hold a link by using the Link component.
+
+```html
+<div class="fd-facet fd-facet--form fd-margin-end--md fd-margin-bottom--sm" role="group" aria-labelledby="formFacetTitle3">
+    <h1 class="fd-title fd-title--h5 fd-margin-bottom--sm" id="formFacetTitle3">Contact Information</h1>
+    <div class="fd-facet__container fd-margin-bottom--tiny">
+        <i class="sap-icon--add-employee" role="presentation"></i>
+        <div class="fd-text">
+            <a href="#" class="fd-link fd-margin-begin--tiny" tabindex="0"><span class="fd-link__content">John Miller</span></a>
+        </div>
+    </div>
+    <div class="fd-facet__container fd-margin-bottom--tiny">
+        <i class="sap-icon--outgoing-call" role="presentation"></i>
+        <div class="fd-text">
+            <a href="#" class="fd-link fd-margin-begin--tiny" tabindex="0"><span class="fd-link__content">+1 234 5678</span></a>
+        </div>
+    </div>
+    <div class="fd-facet__container fd-margin-bottom--tiny">
+        <i class="sap-icon--email" role="presentation"></i>
+        <div class="fd-text">
+            <a href="#" class="fd-link fd-margin-begin--tiny" tabindex="0"><span class="fd-link__content">john.miller@company.com</span></a>
+        </div>
+    </div>
+    <div class="fd-facet__container">
+        <label class="fd-form-label" for="form-value-09">Height:</label>
+        <div class="fd-text" id="form-value-09">20.8 Centimeter</div>
+    </div>
+</div>
+```
+
+### Rating Indicator Facet
+
+The Rating Indicator Facet displays a **Rating Indicator**. It consists of a mandatory title, optional supplementary texts
+        like a subtitle or a dynamic text, and the rating indicator.
+
+```html
+<div class="fd-facet fd-facet--rating-indicator fd-margin-end--md fd-margin-bottom--sm" role="group" aria-labelledby="ratingFacetTitle2">
+    <h1 class="fd-title fd-title--h5 fd-margin-bottom--sm" id="ratingFacetTitle2">Average User Rating</h1>
+    <h2 class="fd-form-label">6 reviews</h2>
+    <div class="fd-rating-indicator fd-facet__container">
+        <div class="fd-rating-indicator__container fd-facet__rating-container" aria-label="Star Rating (out of 5)">
+            <input aria-label="1 star" type="radio" class="fd-rating-indicator__input" id="1-rating-max-value-5-1" name="1-rating-max-value-5" value="1">
+            <label class="fd-rating-indicator__label" for="1-rating-max-value-5-1"></label>
+
+            <input aria-label="2 star" type="radio" class="fd-rating-indicator__input" id="1-rating-max-value-5-2" name="1-rating-max-value-5" value="2">
+            <label class="fd-rating-indicator__label" for="1-rating-max-value-5-2"></label>
+
+            <input aria-label="3 star" type="radio" class="fd-rating-indicator__input" id="1-rating-max-value-5-3" name="1-rating-max-value-5" value="3">
+            <label class="fd-rating-indicator__label" for="1-rating-max-value-5-3"></label>
+
+            <input aria-label="4 star" type="radio" class="fd-rating-indicator__input" id="1-rating-max-value-5-4" name="1-rating-max-value-5" value="4" checked>
+            <label class="fd-rating-indicator__label" for="1-rating-max-value-5-4"></label>
+
+            <input aria-label="5 star" type="radio" class="fd-rating-indicator__input" id="1-rating-max-value-5-5" name="1-rating-max-value-5" value="5">
+            <label class="fd-rating-indicator__label" for="1-rating-max-value-5-5"></label>
+        </div>
+        <span class="fd-rating-indicator__dynamic-text fd-facet__rating-dynamic-text fd-margin-top--tiny">(4 of 5)</span>
+    </div>
+</div>
+```
+
+### Image/Avatar Facet
+
+Counter added to a tab
+
+```html
+<div class="fd-facet fd-facet--image fd-margin-end--md">
+    <span class="fd-avatar fd-avatar--l" aria-label="Avatar">
+        <i class="fd-avatar__icon sap-icon--money-bills" role="presentation"></i>
+    </span>
+</div>
+```
+
+### Facets in Object Page
+
+All facet types used together in the context of a dynamic page. To have the image from the image facet appear next to the title, add the class
+        \
+
+```html
+<section class="fd-dynamic-page fd-dynamic-page--xl" aria-label="Dynamic Page Desktop Example">
+    <header class="fd-dynamic-page__header">
+        <div class="fd-dynamic-page__title-area" tabindex="0" aria-hidden="false" id="mainContainer">
+            <div class="fd-dynamic-page__main-container">
+                <div class="fd-dynamic-page__breadcrumb-title-container">
+                    <nav aria-label="Breadcrumbs">
+                        <ul class="fd-dynamic-page__breadcrumb fd-breadcrumb">
+                            <li class="fd-breadcrumb__item"><a class="fd-link" tabindex="0" href="#"><span class="fd-link__content">Men</span></a></li>
+                            <li class="fd-breadcrumb__item"><a class="fd-link" tabindex="0" href="#"><span class="fd-link__content">Shoes</span></a></li>
+                            <li class="fd-breadcrumb__item"><a aria-current="page" class="fd-link" tabindex="0" href="#"><span class="fd-link__content">Running Shoes</span></a></li>
+                        </ul>
+                    </nav>
+                    <div class="fd-dynamic-page__title-container">
+                        <h1 class="fd-title fd-dynamic-page__title" title="Balenciaga Triple S Trainers"> Balenciaga Triple S Trainers </h1>
+                        <div class="fd-dynamic-page__toolbar-container">
+                            <div role="toolbar" aria-label="Product actions" class="fd-dynamic-page__toolbar fd-toolbar fd-toolbar--clear fd-toolbar--transparent">
+                                <button class="fd-button fd-button--positive">Accept</button>
+                                <button class="fd-button fd-button--reject">Reject</button>
+                                <span class="fd-toolbar__separator"></span>
+                            </div>
+                            <div role="toolbar" aria-label="Navigation actions" class="fd-dynamic-page__toolbar fd-dynamic-page__toolbar--actions fd-toolbar fd-toolbar--clear fd-toolbar--transparent">
+                                <button class="fd-button fd-button--transparent" aria-label="Resize">
+                                    <i class="sap-icon--resize"></i>
+                                </button>
+                                <button class="fd-button fd-button--transparent" aria-label="Exit fullscreen">
+                                    <i class="sap-icon--exitfullscreen"></i>
+                                </button>
+                                <button class="fd-button fd-button--transparent" aria-label="Close">
+                                    <i class="sap-icon--decline"></i>
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="fd-dynamic-page__subtitle"> Oversized multimaterial sneakers with quilted effect </div>
+        </div>
+        <div class="fd-dynamic-page__title-area fd-dynamic-page__title-area--collapsed" tabindex="0" aria-hidden="true" id="mainImageContainer">
+            <div class="fd-dynamic-page__main-container">
+                <div class="fd-dynamic-page__breadcrumb-title-container">
+                    <nav aria-label="Breadcrumbs">
+                        <ul class="fd-dynamic-page__breadcrumb fd-breadcrumb">
+                            <li class="fd-breadcrumb__item"><a class="fd-link" tabindex="0" href="#"><span class="fd-link__content">Men</span></a></li>
+                            <li class="fd-breadcrumb__item"><a class="fd-link" tabindex="0" href="#"><span class="fd-link__content">Shoes</span></a></li>
+                            <li class="fd-breadcrumb__item"><a aria-current="page" class="fd-link" tabindex="0" href="#"><span class="fd-link__content">Running Shoes</span></a></li>
+                        </ul>
+                    </nav>
+                    <div class="fd-dynamic-page__title-container">
+                        <div class="fd-facet fd-facet--image fd-facet--image-header-title fd-margin-end--sm">
+                            <span class="fd-avatar fd-avatar--s" aria-label="Avatar">
+                                <i class="fd-avatar__icon sap-icon--money-bills" role="presentation"></i>
+                            </span>
+                        </div>
+                        <div class="fd-dynamic-page__title-subtitle-container">
+                            <h1 class="fd-title fd-dynamic-page__title" title="Balenciaga Triple S Trainers"> Balenciaga Triple S Trainers </h1>
+                            <div class="fd-dynamic-page__subtitle"> Oversized multimaterial sneakers with quilted effect </div>
+                        </div>
+                        <div class="fd-dynamic-page__toolbar-container">
+                            <div role="toolbar" aria-label="Product actions" class="fd-dynamic-page__toolbar fd-toolbar fd-toolbar--clear fd-toolbar--transparent">
+                                <button class="fd-button fd-button--positive">Accept</button>
+                                <button class="fd-button fd-button--reject">Reject</button>
+                                <span class="fd-toolbar__separator"></span>
+                            </div>
+                            <div role="toolbar" aria-label="Navigation actions" class="fd-dynamic-page__toolbar fd-dynamic-page__toolbar--actions fd-toolbar fd-toolbar--clear fd-toolbar--transparent">
+                                <button class="fd-button fd-button--transparent" aria-label="Resize">
+                                    <i class="sap-icon--resize"></i>
+                                </button>
+                                <button class="fd-button fd-button--transparent" aria-label="Exit fullscreen">
+                                    <i class="sap-icon--exitfullscreen"></i>
+                                </button>
+                                <button class="fd-button fd-button--transparent" aria-label="Close">
+                                    <i class="sap-icon--decline"></i>
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="fd-dynamic-page__collapsible-header-container">
+            <div class="fd-dynamic-page__collapsible-header" role="region" id="fddplhvx6" aria-hidden="false" aria-label="Dynamic Page Desktop Header" >
+                <div class="fd-facet-group">
+                    <div class="fd-facet fd-facet--image fd-margin-end--md">
+                        <span class="fd-avatar fd-avatar--l" aria-label="Avatar">
+                            <i class="fd-avatar__icon sap-icon--money-bills" role="presentation"></i>
+                        </span>
+                    </div>
+                    <div class="fd-facet fd-facet--form fd-margin-end--md fd-margin-bottom--sm" role="group" aria-labelledby="formFacetTitle4">
+                        <div role="heading" aria-level="3" class="fd-title fd-margin-bottom--sm" id="formFacetTitle4">Technical Data</div>
+                        <div class="fd-facet__container fd-margin-bottom--tiny">
+                            <label class="fd-form-label" for="form-value-10">Base unit:</label>
+                            <div class="fd-text" id="form-value-10">Each</div>
+                        </div>
+                        <div class="fd-facet__container fd-margin-bottom--tiny">
+                            <label class="fd-form-label" for="form-value-11">Length:</label>
+                            <div class="fd-text" id="form-value-11">23.24 Centimeter</div>
+                        </div>
+                        <div class="fd-facet__container fd-margin-bottom--tiny">
+                            <label class="fd-form-label" for="form-value-12">Width:</label>
+                            <div class="fd-text" id="form-value-12">86.1 Centimeter</div>
+                        </div>
+                        <div class="fd-facet__container">
+                            <label class="fd-form-label" for="form-value-13">Height:</label>
+                            <div class="fd-text" id="form-value-13">20.8 Centimeter</div>
+                        </div>
+                    </div>
+                    <div class="fd-facet fd-facet--key-value fd-margin-end--md fd-margin-bottom--sm" role="group" aria-labelledby="kvFacetTitle9">
+                        <h1 class="fd-title fd-title--h5 fd-margin-bottom--sm" id="kvFacetTitle9">Status</h1>
+                        <span class="fd-object-status fd-object-status--positive fd-object-status--large fd-facet__object-status">
+                            <span class="fd-object-status__text fd-facet__object-status-text">Delivery</span>
+                        </span>
+                    </div>
+                    <div class="fd-facet fd-facet--key-value fd-margin-end--md fd-margin-bottom--sm" role="group" aria-labelledby="kvFacetTitle10">
+                        <div role="heading" aria-level="3" class="fd-title fd-margin-bottom--sm" id="kvFacetTitle10">Delivery Time</div>
+                        <span class="fd-object-status fd-object-status--large fd-object-status--critical fd-facet__object-status">
+                            <i class="fd-object-status__icon sap-icon--shipping-status fd-padding--none fd-margin-end--tiny" role="presentation"></i>
+                            <span class="fd-object-status__text fd-facet__object-status-text">12 days</span>
+                        </span>
+                    </div>
+                    <div class="fd-facet fd-facet--key-value fd-margin-end--md fd-margin-bottom--sm" role="group" aria-labelledby="kvFacetTitle11">
+                        <h1 class="fd-title fd-title--h5 fd-margin-bottom--sm" id="kvFacetTitle11">Assembly Option </h1>
+                        <span class="fd-object-status fd-object-status--negative fd-object-status--large fd-facet__object-status">
+                            <span class="fd-object-status__text fd-facet__object-status-text">To be selected</span>
+                        </span>
+                    </div>
+                    <div class="fd-facet fd-facet--key-value fd-margin-end--md fd-margin-bottom--sm" role="group" aria-labelledby="kvFacetTitle12">
+                        <h1 class="fd-title fd-title--h5 fd-margin-bottom--sm" id="kvFacetTitle12">Pricing </h1>
+                        <span class="fd-object-number fd-object-number--large fd-object-number--informative">
+                            <span class="fd-object-number__text">579</span><span class="fd-object-number__unit">EUR</span>
+                        </span>
+                    </div>
+
+                    <div class="fd-facet fd-facet--rating-indicator fd-margin-end--md  fd-margin-bottom--sm" role="group" aria-labelledby="ratingFacetTitle3">
+                        <h1 class="fd-title fd-title--h5 fd-margin-bottom--sm" id="ratingFacetTitle3">Average User Rating</h1>
+                        <h2 class="fd-form-label">6 reviews</h2>
+                        <div class="fd-rating-indicator fd-facet__container">
+                            <div class="fd-rating-indicator__container fd-facet__rating-container" aria-label="Star Rating (out of 5)">
+                                <input aria-label="1 star" type="radio" class="fd-rating-indicator__input" id="2-rating-max-value-5-1" name="2-rating-max-value-5" value="1">
+                                <label class="fd-rating-indicator__label" for="2-rating-max-value-5-1"></label>
+
+                                <input aria-label="2 star" type="radio" class="fd-rating-indicator__input" id="2-rating-max-value-5-2" name="2-rating-max-value-5" value="2" checked>
+                                <label class="fd-rating-indicator__label" for="2-rating-max-value-5-2"></label>
+
+                                <input aria-label="3 star" type="radio" class="fd-rating-indicator__input" id="2-rating-max-value-5-3" name="2-rating-max-value-5" value="3">
+                                <label class="fd-rating-indicator__label" for="2-rating-max-value-5-3"></label>
+
+                                <input aria-label="4 star" type="radio" class="fd-rating-indicator__input" id="2-rating-max-value-5-4" name="2-rating-max-value-5" value="4">
+                                <label class="fd-rating-indicator__label" for="2-rating-max-value-5-4"></label>
+
+                                <input aria-label="5 star" type="radio" class="fd-rating-indicator__input" id="2-rating-max-value-5-5" name="2-rating-max-value-5" value="5">
+                                <label class="fd-rating-indicator__label" for="2-rating-max-value-5-5"></label>
+                            </div>
+                            <span class="fd-rating-indicator__dynamic-text fd-facet__rating-dynamic-text fd-margin-top--tiny">(2 of 5)</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="fd-dynamic-page__collapsible-header-visibility-container fd-dynamic-page__collapsible-header-visibility-container--no-shadow">
+
+                <div role="toolbar" aria-label="Header actions" class="fd-dynamic-page__collapsible-header-visibility-container--button-group">
+                    <button class="fd-dynamic-page__collapse-button fd-button"
+                        aria-label="Collapse"
+                        aria-expanded="true"
+                        aria-hidden="false"
+                        id="expandBtn"
+                        aria-haspopup="true"
+                        onclick="
+                        toggleElAttrs('fddplhvx6', ['aria-hidden']);
+                        toggleElAttrs('expandBtn', ['aria-expanded']);
+                        toggleElAttrs('expandBtn', ['aria-hidden']);
+                        toggleElAttrs('collapseBtn', ['aria-expanded']);
+                        toggleElAttrs('collapseBtn', ['aria-hidden']);
+                        toggleElAttrs('mainContainer', ['aria-hidden']);
+                        toggleElAttrs('mainImageContainer', ['aria-hidden']);
+                        "
+                        >
+                        <i class="sap-icon--slim-arrow-up"></i>
+                    </button>
+                    <button class="fd-dynamic-page__collapse-button fd-button"
+                        aria-label="Collapse"
+                        aria-expanded="false"
+                        aria-hidden="true"
+                        id="collapseBtn"
+                        aria-haspopup="true"
+                        onclick="
+                        toggleElAttrs('fddplhvx6', ['aria-hidden']);
+                        toggleElAttrs('collapseBtn', ['aria-expanded']);
+                        toggleElAttrs('collapseBtn', ['aria-hidden']);
+                        toggleElAttrs('expandBtn', ['aria-expanded']);
+                        toggleElAttrs('expandBtn', ['aria-hidden']);
+                        toggleElAttrs('mainContainer', ['aria-hidden']);
+                        toggleElAttrs('mainImageContainer', ['aria-hidden']);
+                        "
+                        >
+                        <i class="sap-icon--slim-arrow-down"></i>
+                    </button>
+                    <button class="fd-dynamic-page__pin-button fd-button"
+                        aria-label="Pin this">
+                        <i class="sap-icon--pushpin-off"></i>
+                    </button>
+                </div>
+
+            </div>
+        </div>
+        <div class="fd-dynamic-page__tabs--overflow">
+            <ul class="fd-tabs fd-tabs--l fd-dynamic-page__tabs fd-dynamic-page__tabs--add-shadow" role="tablist">
+                <li role="tab" class="fd-tabs__item">
+                    <a class="fd-tabs__link" aria-controls="fuCwV557" href="#fuCwV557">
+                        <span class="fd-tabs__tag">
+                            Link
+                        </span>
+                    </a>
+                </li>
+                <li role="tab" class="fd-tabs__item" aria-selected="true">
+                    <a class="fd-tabs__link" aria-controls="AiWfz155" href="#AiWfz155">
+                        <span class="fd-tabs__tag">
+                            Selected
+                        </span>
+                    </a>
+                </li>
+            </ul>
+        </div>
+    </header>
+    <div class="fd-dynamic-page__content">
+        <div class="fd-tabs__panel" aria-expanded="false" id="fuCwV557" role="tabpanel">
+            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum illo voluptatem, unde voluptate aliquam
+            eum tempore aliquid dolorem cumque ullam perspiciatis omnis et asperiores dolores, consequatur, suscipit sint animi amet?
+            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum illo voluptatem, unde voluptate aliquam eum tempore aliquid
+            dolorem cumque ullam perspiciatis omnis et asperiores dolores, consequatur, suscipit sint animi amet?
+        </div>
+        <div class="fd-tabs__panel" aria-expanded="true" id="AiWfz155" role="tabpanel" >
+            Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti
+            in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit.
+            Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti
+            in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit.
+            Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti
+            in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit.
+            Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti
+            in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit.
+            Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti
+            in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit.
+            Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti
+            in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit.
+            Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti
+            in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit.
+            Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti
+            in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit.
+            Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti
+            in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit.
+            Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti
+            in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit.
+        </div>
+    </div>
+    <footer class="fd-bar fd-bar--floating-footer">
+        <div role="toolbar" aria-label="Finalizing actions" class="fd-bar__right">
+            <div class="fd-bar__element">
+                <button aria-label="button" class="fd-button fd-button--emphasized">Save</button>
+            </div>
+            <div class="fd-bar__element">
+                <button aria-label="button" class="fd-button fd-button--transparent">Cancel</button>
+            </div>
+        </div>
+    </footer>
+</section>
+```
+
+### Facets in Object Page Mobile
+
+```html
+<div class="mobile-container">
+    <section class="fd-dynamic-page fd-dynamic-page--sm" aria-label="Dynamic Page Mobile Example">
+        <header class="fd-dynamic-page__header">
+            <div class="fd-dynamic-page__title-area" tabindex="0" aria-hidden="false" id="mainContainerMobile">
+                <div class="fd-dynamic-page__main-container">
+                    <div class="fd-dynamic-page__breadcrumb-title-container">
+                        <div class="fd-dynamic-page__breadcrumb-container">
+                            <nav aria-label="Breadcrumbs">
+                                <ul class="fd-breadcrumb">
+                                    <li class="fd-breadcrumb__item"><a class="fd-link" href="#"><span class="fd-link__content">Men</span></a></li>
+                                    <li class="fd-breadcrumb__item"><a class="fd-link" href="#"><span class="fd-link__content">Shoes</span></a></li>
+                                    <li class="fd-breadcrumb__item"><a aria-current="page" class="fd-link" href="#"><span class="fd-link__content">Running Shoes</span></a></li>
+                                </ul>
+                            </nav>
+                            <div role="toolbar" aria-label="Close action" class="fd-dynamic-page__toolbar fd-dynamic-page__toolbar--actions fd-toolbar fd-toolbar--clear fd-toolbar--transparent">
+                                <button class="fd-button fd-button--transparent" aria-label="Close">
+                                    <i class="sap-icon--decline"></i>
+                                </button>
+                            </div>
+                        </div>
+                        <div class="fd-dynamic-page__title-container">
+                            <h1 class="fd-title fd-dynamic-page__title" title="Balenciaga Triple S Trainers"> Balenciaga Triple S Trainers </h1>
+                            <div role="toolbar" aria-label="Product actions" class="fd-dynamic-page__toolbar fd-toolbar fd-toolbar--clear fd-toolbar--transparent">
+                                <div class="fd-popover">
+                                    <div class="fd-popover__control">
+                                        <button
+                                            id="maisodusakdnsmb"
+                                            onclick="
+                                            toggleElAttrs('wgxzK85901', ['aria-hidden']);
+                                            toggleElAttrs('maisodusakdnsmb', ['aria-expanded']);
+                                            "
+                                            class="fd-button fd-button--transparent"
+                                            aria-controls="wgxzK85901"
+                                            aria-haspopup="true"
+                                            aria-expanded="true"
+                                            aria-label="Header actions">
+                                            <i class="sap-icon--overflow"></i>
+                                        </button>
+                                    </div>
+                                    <div class="fd-popover__body fd-popover__body--right fd-popover__body--no-arrow"
+                                        aria-hidden="false"
+                                        id="wgxzK85901">
+                                        <div class="fd-toolbar__overflow">
+                                            <button class="fd-button fd-button--transparent">Accept</button>
+                                            <button class="fd-button fd-button--transparent">Reject</button>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="fd-dynamic-page__subtitle"> Expanded header in mobile </div>
+            </div>
+            <div class="fd-dynamic-page__title-area fd-dynamic-page__title-area--collapsed" tabindex="0" aria-hidden="true" id="mainImageContainerMobile">
+                <div class="fd-dynamic-page__main-container">
+                    <div class="fd-dynamic-page__breadcrumb-title-container">
+                        <div class="fd-dynamic-page__breadcrumb-container">
+                            <nav aria-label="Breadcrumbs">
+                                <ul class="fd-breadcrumb">
+                                    <li class="fd-breadcrumb__item"><a class="fd-link" href="#"><span class="fd-link__content">Men</span></a></li>
+                                    <li class="fd-breadcrumb__item"><a class="fd-link" href="#"><span class="fd-link__content">Shoes</span></a></li>
+                                    <li class="fd-breadcrumb__item"><a aria-current="page" class="fd-link" href="#"><span class="fd-link__content">Running Shoes</span></a></li>
+                                </ul>
+                            </nav>
+                            <div role="toolbar" aria-label="Close action" class="fd-dynamic-page__toolbar fd-dynamic-page__toolbar--actions fd-toolbar fd-toolbar--clear fd-toolbar--transparent">
+                                <button class="fd-button fd-button--transparent" aria-label="Close">
+                                    <i class="sap-icon--decline"></i>
+                                </button>
+                            </div>
+                        </div>
+                        <div class="fd-dynamic-page__title-container">
+                            <div class="fd-facet fd-facet--image fd-facet--image-header-title fd-margin-end--sm">
+                                <span class="fd-avatar fd-avatar--s" aria-label="Avatar">
+                                    <i class="fd-avatar__icon sap-icon--money-bills" role="presentation"></i>
+                                </span>
+                            </div>
+                            <div class="fd-dynamic-page__title-subtitle-container">
+                                <h1 class="fd-title fd-dynamic-page__title" title="Balenciaga Triple S Trainers"> Balenciaga Triple S Trainers </h1>
+                                <div class="fd-dynamic-page__subtitle"> Collapsed header in mobile </div>
+                            </div>
+                            <div role="toolbar" aria-label="Product actions" class="fd-dynamic-page__toolbar fd-toolbar fd-toolbar--clear fd-toolbar--transparent">
+                                <div class="fd-popover">
+                                    <div class="fd-popover__control">
+                                        <button
+                                            id="maisodusakdnsmag"
+                                            onclick="
+                                            toggleElAttrs('wgxzK85911', ['aria-hidden']);
+                                            toggleElAttrs('maisodusakdnsmag', ['aria-expanded']);
+                                            "
+                                            class="fd-button fd-button--transparent"
+                                            aria-controls="wgxzK85911"
+                                            aria-haspopup="true"
+                                            aria-expanded="true"
+                                            aria-label="Header actions">
+                                            <i class="sap-icon--overflow"></i>
+                                        </button>
+                                    </div>
+                                    <div class="fd-popover__body fd-popover__body--right fd-popover__body--no-arrow"
+                                        aria-hidden="false"
+                                        id="wgxzK85911">
+                                        <div class="fd-toolbar__overflow">
+                                            <button class="fd-button fd-button--transparent">Accept</button>
+                                            <button class="fd-button fd-button--transparent">Reject</button>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="fd-dynamic-page__collapsible-header-container">
+                    <div class="fd-dynamic-page__collapsible-header" role="region" id="fddplhvc7" aria-hidden="false" aria-label="Dynamic Page Mobile Header">
+                        <div class="fd-facet-group">
+                            <div class="fd-facet fd-facet--image fd-margin-end--sm fd-margin-bottom--tiny">
+                                <span class="fd-avatar fd-avatar--l" aria-label="Avatar">
+                                    <i class="fd-avatar__icon sap-icon--camera" role="presentation"></i>
+                                </span>
+                            </div>
+
+                            <div class="fd-facet fd-facet--key-value fd-margin-end--md  fd-margin-bottom--sm" role="group" aria-labelledby="kvFacetTitle13">
+                                <h1 class="fd-title fd-title--h5 fd-margin-bottom--sm" id="kvFacetTitle13">Availablity</h1>
+                                <span class="fd-object-status fd-object-status--positive fd-object-status--large fd-facet__object-status">
+                                    <span class="fd-object-status__text fd-facet__object-status-text">In Stock</span>
+                                </span>
+                            </div>
+                            <div class="fd-facet fd-facet--key-value fd-margin-end--md  fd-margin-bottom--sm" role="group" aria-labelledby="kvFacetTitle14">
+                                <h1 class="fd-title fd-title--h5 fd-margin-bottom--sm" id="kvFacetTitle14">Price </h1>
+                                <span class="fd-object-number fd-object-number--large fd-object-number--informative">
+                                    <span class="fd-object-number__text">750</span><span class="fd-object-number__unit">EUR</span>
+                                </span>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="fd-dynamic-page__collapsible-header-visibility-container fd-dynamic-page__collapsible-header-visibility-container--no-shadow">
+
+                        <div role="toolbar" aria-label="Header actions" class="fd-dynamic-page__collapsible-header-visibility-container--button-group">
+                            <button class="fd-dynamic-page__collapse-button fd-button"
+                                aria-label="Collapse header"
+                                aria-expanded="true"
+                                aria-hidden="false"
+                                id="expandBtnMobile"
+                                aria-haspopup="true"
+                                onclick="
+                                toggleElAttrs('fddplhvc7', ['aria-hidden']);
+                                toggleElAttrs('expandBtnMobile', ['aria-expanded']);
+                                toggleElAttrs('expandBtnMobile', ['aria-hidden']);
+                                toggleElAttrs('collapseBtnMobile', ['aria-expanded']);
+                                toggleElAttrs('collapseBtnMobile', ['aria-hidden']);
+                                toggleElAttrs('mainContainerMobile', ['aria-hidden']);
+                                toggleElAttrs('mainImageContainerMobile', ['aria-hidden']);
+                                "
+                                >
+                                <i class="sap-icon--slim-arrow-up"></i>
+                            </button>
+                            <button class="fd-dynamic-page__collapse-button fd-button"
+                                aria-label="Expand header"
+                                aria-expanded="false"
+                                aria-hidden="true"
+                                id="collapseBtnMobile"
+                                aria-haspopup="true"
+                                onclick="
+                                toggleElAttrs('fddplhvc7', ['aria-hidden']);
+                                toggleElAttrs('collapseBtnMobile', ['aria-expanded']);
+                                toggleElAttrs('collapseBtnMobile', ['aria-hidden']);
+                                toggleElAttrs('expandBtnMobile', ['aria-expanded']);
+                                toggleElAttrs('expandBtnMobile', ['aria-hidden']);
+                                toggleElAttrs('mainContainerMobile', ['aria-hidden']);
+                                toggleElAttrs('mainImageContainerMobile', ['aria-hidden']);
+                                "
+                                >
+                                <i class="sap-icon--slim-arrow-down"></i>
+                            </button>
+                        </div>
+
+                    </div>
+                </div>
+                <div class="fd-dynamic-page__tabs--overflow">
+                    <ul class="fd-tabs fd-dynamic-page__tabs fd-dynamic-page__tabs--add-shadow" role="tablist">
+                        <li class="fd-tabs__item" aria-controls="fuCwV559" role="tab">
+                            <a class="fd-tabs__link" href="#fuCwV559">
+                                <span class="fd-tabs__tag">
+                                    Link
+                                </span>
+                            </a>
+                        </li>
+                        <li class="fd-tabs__item" aria-selected="true" role="tab">
+                            <a class="fd-tabs__link" aria-controls="AiWfz161" href="#AiWfz161">
+                                <span class="fd-tabs__tag">
+                                    Selected
+                                </span>
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+            </header>
+            <div class="fd-dynamic-page__content">
+                <div class="fd-tabs__panel" aria-expanded="false" id="fuCwV559" role="tabpanel">
+                    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum illo voluptatem, unde voluptate aliquam
+                    eum tempore aliquid dolorem cumque ullam perspiciatis omnis et asperiores dolores, consequatur, suscipit sint animi amet?
+                    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum illo voluptatem, unde voluptate aliquam eum tempore aliquid
+                    dolorem cumque ullam perspiciatis omnis et asperiores dolores, consequatur, suscipit sint animi amet?
+                </div>
+                <div class="fd-tabs__panel" aria-expanded="true" id="AiWfz161" role="tabpanel">
+                    Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti
+                    in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit.
+                    Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti
+                    in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit.
+                </div>
+            </div>
+            <footer class="fd-bar fd-bar--floating-footer">
+                <div role="toolbar" aria-label="Finalizing actions" class="fd-bar__right">
+                    <div class="fd-bar__element">
+                        <button aria-label="button" class="fd-button fd-button--emphasized">Save</button>
+                    </div>
+                    <div class="fd-bar__element">
+                        <button aria-label="button" class="fd-button fd-button--transparent">Cancel</button>
+                    </div>
+                </div>
+            </footer>
+        </section>
+```
+
+## Accessibility
+
+- Use semantic HTML elements where appropriate
+- Include proper ARIA attributes for interactive elements
+- Ensure keyboard navigation support
+- Provide adequate color contrast
+
+## Source
+
+This documentation was automatically generated from: `packages/styles/stories/Dev/facets/facets.stories.js`
+
+For the latest updates and interactive examples, see [Storybook](https://sap.github.io/fundamental-styles/).