diff --git a/packages/styles/src/settings.scss b/packages/styles/src/settings.scss
index ddeeed935a..df20582b90 100644
--- a/packages/styles/src/settings.scss
+++ b/packages/styles/src/settings.scss
@@ -12,6 +12,7 @@ $block: #{$fd-namespace}-settings;
     min-height: var(--fdSettings_Dialog_Content_Min_Height, 42.5rem);
     max-width: var(--fdSettings_Dialog_Content_Max_Width, 60rem);
     max-height: var(--fdSettings_Dialog_Content_Max_Height, 42.5rem);
+    height: var(--fdSettings_Dialog_Content_Height, 42.5rem);
   }
 
   .#{$block}__dialog-body {
@@ -99,10 +100,18 @@ $block: #{$fd-namespace}-settings;
     }
   }
 
-  &--sm {
+  &__container {
+    @include fd-reset();
+    @include fd-flex();
+
+    width: 100%;
+    height: 100%;
+  }
+
+  &:has(.#{$block}__container--sm) {
     --fdSettings_List_Area_Width: 100%;
     --fdSettings_Header_Margin_Top: 0;
-    --fdSettings_List_Nav_Indicator_Content: "\e1ed";
+    --fdSettings_List_Nav_Indicator_Content: '\e1ed';
     --fdSettings_Dialog_Content_Min_Width: 100%;
     --fdSettings_Dialog_Content_Min_Height: 100%;
     --fdSettings_Dialog_Content_Max_Width: 100%;
@@ -110,34 +119,34 @@ $block: #{$fd-namespace}-settings;
     --fdSettings_List_Area_Border: none;
 
     .#{$block}__dialog-content {
-      box-shadow: none;
-      border-radius: 0;
+        box-shadow: none;
+        border-radius: 0;
     }
 
     .#{$block}__dialog-body {
-      border-radius: 0;
+        border-radius: 0;
     }
   }
 
-  &--md {
-    --fdSettings_List_Area_Width: 100%;
-    --fdSettings_Header_Margin_Top: 0;
-    --fdSettings_List_Nav_Indicator_Content: "\e1ed";
-    --fdSettings_Dialog_Content_Min_Width: 80%;
-    --fdSettings_Dialog_Content_Min_Height: 88%;
-    --fdSettings_Dialog_Content_Max_Width: 40rem;
-    --fdSettings_Dialog_Content_Max_Height: 42.5rem;
-    --fdSettings_List_Area_Border: none;
+  &:has(.#{$block}__container--md) {
+      --fdSettings_List_Area_Width: 100%;
+      --fdSettings_Header_Margin_Top: 0;
+      --fdSettings_List_Nav_Indicator_Content: '\e1ed';
+      --fdSettings_Dialog_Content_Min_Width: 80%;
+      --fdSettings_Dialog_Content_Min_Height: 88%;
+      --fdSettings_Dialog_Content_Max_Width: 40rem;
+      --fdSettings_Dialog_Content_Max_Height: 42.5rem;
+      --fdSettings_List_Area_Border: none;
   }
 
-  &--lg,
-  &--xl {
-    --fdSettings_List_Area_Width: 20rem;
-    --fdSettings_Header_Margin_Top: 1rem;
-    --fdSettings_List_Nav_Indicator_Content: none;
-    --fdSettings_Dialog_Content_Min_Width: 60rem;
-    --fdSettings_Dialog_Content_Min_Height: 42.5rem;
-    --fdSettings_Dialog_Content_Max_Width: 60rem;
-    --fdSettings_Dialog_Content_Max_Height: 42.5rem;
+  &:has(.#{$block}__container--lg),
+  &:has(.#{$block}__container--xl) {
+      --fdSettings_List_Area_Width: 20rem;
+      --fdSettings_Header_Margin_Top: 1rem;
+      --fdSettings_List_Nav_Indicator_Content: none;
+      --fdSettings_Dialog_Content_Min_Width: 60rem;
+      --fdSettings_Dialog_Content_Min_Height: 42.5rem;
+      --fdSettings_Dialog_Content_Max_Width: 60rem;
+      --fdSettings_Dialog_Content_Max_Height: 42.5rem;
   }
 }
diff --git a/packages/styles/stories/Components/settings/md.example.html b/packages/styles/stories/Components/settings/md.example.html
index af29cab6ce..cba45e31b4 100644
--- a/packages/styles/stories/Components/settings/md.example.html
+++ b/packages/styles/stories/Components/settings/md.example.html
@@ -1,82 +1,84 @@
 <div style="display: flex; gap: 1rem; max-width: 1200px;">
-    <section class="fd-dialog-docs-static fd-dialog fd-settings fd-settings--md fd-dialog--active">
+    <section class="fd-dialog-docs-static fd-dialog fd-settings fd-dialog--active">
         <div class="fd-dialog__content fd-settings__dialog-content" role="dialog" aria-modal="true" aria-labelledby="dialog-title-1" style="height: 800px;">
             <div class="fd-dialog__body fd-settings__dialog-body" >
-                <div class="fd-settings__list-area">
-                    <div class="fd-bar fd-bar--header fd-bar--header-with-subheader">
-                        <div class="fd-bar__left">
-                            <div class="fd-bar__element">
-                                <h5 class="fd-title fd-title--h5" aria-label="text">Settings</h5>
+                <div class="fd-settings__container fd-settings__container--md">
+                    <div class="fd-settings__list-area">
+                        <div class="fd-bar fd-bar--header fd-bar--header-with-subheader">
+                            <div class="fd-bar__left">
+                                <div class="fd-bar__element">
+                                    <h5 class="fd-title fd-title--h5" aria-label="text">Settings</h5>
+                                </div>
                             </div>
                         </div>
-                    </div>
-                    <div class="fd-bar fd-bar--subheader">
-                        <div class="fd-bar__middle">
-                            <div class="fd-bar__element fd-bar__element--full-width">
-                                <input class="fd-input fd-input-group__input" type="text" placeholder="Search" aria-label="input">
+                        <div class="fd-bar fd-bar--subheader">
+                            <div class="fd-bar__middle">
+                                <div class="fd-bar__element fd-bar__element--full-width">
+                                    <input class="fd-input fd-input-group__input" type="text" placeholder="Search" aria-label="input">
+                                </div>
                             </div>
                         </div>
-                    </div>
-                    <div class="fd-settings__list-container">
-                        <ul class="fd-list fd-list--navigation fd-list--navigation-indication fd-list--no-border fd-settings__list" role="list">
-                            <li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
-                                <a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
-                                    <i role="presentation" class="fd-list__icon sap-icon--globe"></i>
-                                    <span class="fd-list__title">Settings Item</span>
-                                </a>
-                            </li>
-                            <li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
-                                <a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
-                                    <i role="presentation" class="fd-list__icon sap-icon--globe"></i>
-                                    <span class="fd-list__title">Settings Item</span>
-                                </a>
-                            </li> 
-                            <li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
-                                <a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
-                                    <i role="presentation" class="fd-list__icon sap-icon--globe"></i>
-                                    <span class="fd-list__title">Settings Item</span>
-                                </a>
-                            </li>
-                            <li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
-                                <a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
-                                    <i role="presentation" class="fd-list__icon sap-icon--globe"></i>
-                                  <span class="fd-list__title">Settings Item</span>
-                                </a>
-                            </li>
-                            <li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
-                                <a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
-                                    <i role="presentation" class="fd-list__icon sap-icon--globe"></i>
-                                    <span class="fd-list__title">Settings Item</span>
-                                </a>
-                            </li>
-                            <li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
-                                <a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
-                                    <i role="presentation" class="fd-list__icon sap-icon--globe"></i>
-                                    <span class="fd-list__title">Settings Item</span>
-                                </a>
-                            </li>
-                            <li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
-                                <a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
-                                    <i role="presentation" class="fd-list__icon sap-icon--globe"></i>
-                                    <span class="fd-list__title">Settings Item</span>
-                                </a>
-                            </li>
-                            <li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
-                                <a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
-                                    <i role="presentation" class="fd-list__icon sap-icon--globe"></i>
-                                    <span class="fd-list__title">Settings Item</span>
-                                </a>
-                            </li>
-                        </ul>
-    
-                        <ul class="fd-list fd-list--navigation fd-list--navigation-indication fd-list--no-border fd-settings__list fd-settings__list--footer" role="list">
-                            <li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
-                                <a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
-                                    <i role="presentation" class="fd-list__icon sap-icon--globe"></i>
-                                    <span class="fd-list__title">Fixed Settings Item</span>
-                                </a>
-                            </li>
-                        </ul>
+                        <div class="fd-settings__list-container">
+                            <ul class="fd-list fd-list--navigation fd-list--navigation-indication fd-list--no-border fd-settings__list" role="list">
+                                <li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
+                                    <a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
+                                        <i role="presentation" class="fd-list__icon sap-icon--globe"></i>
+                                        <span class="fd-list__title">Settings Item</span>
+                                    </a>
+                                </li>
+                                <li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
+                                    <a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
+                                        <i role="presentation" class="fd-list__icon sap-icon--globe"></i>
+                                        <span class="fd-list__title">Settings Item</span>
+                                    </a>
+                                </li> 
+                                <li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
+                                    <a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
+                                        <i role="presentation" class="fd-list__icon sap-icon--globe"></i>
+                                        <span class="fd-list__title">Settings Item</span>
+                                    </a>
+                                </li>
+                                <li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
+                                    <a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
+                                        <i role="presentation" class="fd-list__icon sap-icon--globe"></i>
+                                      <span class="fd-list__title">Settings Item</span>
+                                    </a>
+                                </li>
+                                <li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
+                                    <a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
+                                        <i role="presentation" class="fd-list__icon sap-icon--globe"></i>
+                                        <span class="fd-list__title">Settings Item</span>
+                                    </a>
+                                </li>
+                                <li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
+                                    <a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
+                                        <i role="presentation" class="fd-list__icon sap-icon--globe"></i>
+                                        <span class="fd-list__title">Settings Item</span>
+                                    </a>
+                                </li>
+                                <li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
+                                    <a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
+                                        <i role="presentation" class="fd-list__icon sap-icon--globe"></i>
+                                        <span class="fd-list__title">Settings Item</span>
+                                    </a>
+                                </li>
+                                <li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
+                                    <a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
+                                        <i role="presentation" class="fd-list__icon sap-icon--globe"></i>
+                                        <span class="fd-list__title">Settings Item</span>
+                                    </a>
+                                </li>
+                            </ul>
+        
+                            <ul class="fd-list fd-list--navigation fd-list--navigation-indication fd-list--no-border fd-settings__list fd-settings__list--footer" role="list">
+                                <li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
+                                    <a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
+                                        <i role="presentation" class="fd-list__icon sap-icon--globe"></i>
+                                        <span class="fd-list__title">Fixed Settings Item</span>
+                                    </a>
+                                </li>
+                            </ul>
+                        </div>
                     </div>
                 </div>
             </div>
@@ -95,47 +97,48 @@ <h5 class="fd-title fd-title--h5" aria-label="text">Settings</h5>
     <section class="fd-dialog-docs-static fd-dialog fd-settings fd-settings--md fd-dialog--active">
         <div class="fd-dialog__content fd-settings__dialog-content" role="dialog" aria-modal="true" aria-labelledby="dialog-title-1" style="height: 800px;">
             <div class="fd-dialog__body fd-settings__dialog-body">
-                <div class="fd-settings__detail-area">
-                    <div class="fd-bar fd-bar--header fd-settings__header">
-                        <div class="fd-bar__left">
-                            <div class="fd-bar__element">
-                                <button aria-label="button" class="fd-button fd-button--transparent">
-                                    <i class="sap-icon--navigation-left-arrow"></i>
-                                </button>
-                            </div>
-                            <div class="fd-bar__element">
-                                <h5 class="fd-title fd-title--h5" aria-label="text">Settings Item</h5>
+                <div class="fd-settings__container fd-settings__container--md">
+                    <div class="fd-settings__detail-area">
+                        <div class="fd-bar fd-bar--header fd-settings__header">
+                            <div class="fd-bar__left">
+                                <div class="fd-bar__element">
+                                    <button aria-label="button" class="fd-button fd-button--transparent">
+                                        <i class="sap-icon--navigation-left-arrow"></i>
+                                    </button>
+                                </div>
+                                <div class="fd-bar__element">
+                                    <h5 class="fd-title fd-title--h5" aria-label="text">Settings Item</h5>
+                                </div>
                             </div>
                         </div>
-                    </div>
-    
-                    <div class="fd-icon-tab-bar fd-icon-tab-bar--sm fd-settings__tab-bar">
-                        <ul role="tablist" class="fd-icon-tab-bar__header">
-                            <li role="presentation" class="fd-icon-tab-bar__item">
-                                <a role="tab" class="fd-icon-tab-bar__tab" aria-selected="true" href="#section1" id="tab1">
-                                    <span class="fd-icon-tab-bar__tag">Tab Text</span>
-                                </a>
-                            </li>
-                            <li role="presentation" class="fd-icon-tab-bar__item">
-                                <a role="tab" class="fd-icon-tab-bar__tab" href="#section2" id="tab2">
-                                    <span class="fd-icon-tab-bar__tag">Tab Text</span>
-                                </a>
-                            </li>
-                        </ul>
-                        <section role="tabpanel" class="fd-icon-tab-bar__panel fd-settings__content fd-settings__content--no-background" id="section1" aria-labelledby="tab1">
-                            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
-                            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
-                            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
-                            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
-                            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
-                            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
-                        </section>
-                        <section role="tabpanel" class="fd-icon-tab-bar__panel fd-settings__content" id="section2" aria-labelledby="tab2" hidden>
-                            Section
-                        </section>
+        
+                        <div class="fd-icon-tab-bar fd-icon-tab-bar--sm fd-settings__tab-bar">
+                            <ul role="tablist" class="fd-icon-tab-bar__header">
+                                <li role="presentation" class="fd-icon-tab-bar__item">
+                                    <a role="tab" class="fd-icon-tab-bar__tab" aria-selected="true" href="#section1" id="tab1">
+                                        <span class="fd-icon-tab-bar__tag">Tab Text</span>
+                                    </a>
+                                </li>
+                                <li role="presentation" class="fd-icon-tab-bar__item">
+                                    <a role="tab" class="fd-icon-tab-bar__tab" href="#section2" id="tab2">
+                                        <span class="fd-icon-tab-bar__tag">Tab Text</span>
+                                    </a>
+                                </li>
+                            </ul>
+                            <section role="tabpanel" class="fd-icon-tab-bar__panel fd-settings__content fd-settings__content--no-background" id="section1" aria-labelledby="tab1">
+                                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
+                                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
+                                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
+                                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
+                                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
+                                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
+                            </section>
+                            <section role="tabpanel" class="fd-icon-tab-bar__panel fd-settings__content" id="section2" aria-labelledby="tab2" hidden>
+                                Section
+                            </section>
+                        </div>
                     </div>
                 </div>
-               
             </div>
             <footer class="fd-dialog__footer fd-bar fd-bar--footer">
                 <div class="fd-bar__right">
diff --git a/packages/styles/stories/Components/settings/sm.example.html b/packages/styles/stories/Components/settings/sm.example.html
index 2dba98db2a..cc66229e90 100644
--- a/packages/styles/stories/Components/settings/sm.example.html
+++ b/packages/styles/stories/Components/settings/sm.example.html
@@ -2,81 +2,83 @@
     <section class="fd-dialog-docs-static fd-dialog fd-settings fd-settings--sm fd-dialog--active" style="width: 400px;">
         <div class="fd-dialog__content fd-settings__dialog-content" role="dialog" aria-modal="true" aria-labelledby="dialog-title-1" style="height: 800px;">
             <div class="fd-dialog__body fd-settings__dialog-body" >
-                <div class="fd-settings__list-area">
-                    <div class="fd-bar fd-bar--header fd-bar--header-with-subheader">
-                        <div class="fd-bar__left">
-                            <div class="fd-bar__element">
-                                <h5 class="fd-title fd-title--h5" aria-label="text">Settings</h5>
+                <div class="fd-settings__container fd-settings__container--sm">
+                    <div class="fd-settings__list-area">
+                        <div class="fd-bar fd-bar--header fd-bar--header-with-subheader">
+                            <div class="fd-bar__left">
+                                <div class="fd-bar__element">
+                                    <h5 class="fd-title fd-title--h5" aria-label="text">Settings</h5>
+                                </div>
                             </div>
                         </div>
-                    </div>
-                    <div class="fd-bar fd-bar--subheader">
-                        <div class="fd-bar__middle">
-                            <div class="fd-bar__element fd-bar__element--full-width">
-                                <input class="fd-input fd-input-group__input" type="text" placeholder="Search" aria-label="input">
+                        <div class="fd-bar fd-bar--subheader">
+                            <div class="fd-bar__middle">
+                                <div class="fd-bar__element fd-bar__element--full-width">
+                                    <input class="fd-input fd-input-group__input" type="text" placeholder="Search" aria-label="input">
+                                </div>
                             </div>
                         </div>
-                    </div>
-                    <div class="fd-settings__list-container">
-                        <ul class="fd-list fd-list--navigation fd-list--navigation-indication fd-list--no-border fd-settings__list" role="list">
-                            <li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
-                                <a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
-                                    <i role="presentation" class="fd-list__icon sap-icon--globe"></i>
-                                    <span class="fd-list__title">Settings Item</span>
-                                </a>
-                            </li>
-                            <li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
-                                <a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
-                                    <i role="presentation" class="fd-list__icon sap-icon--globe"></i>
-                                    <span class="fd-list__title">Settings Item</span>
-                                </a>
-                            </li> 
-                            <li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
-                                <a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
-                                    <i role="presentation" class="fd-list__icon sap-icon--globe"></i>
-                                    <span class="fd-list__title">Settings Item</span>
-                                </a>
-                            </li>
-                            <li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
-                                <a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
-                                    <i role="presentation" class="fd-list__icon sap-icon--globe"></i>
-                                  <span class="fd-list__title">Settings Item</span>
-                                </a>
-                            </li>
-                            <li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
-                                <a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
-                                    <i role="presentation" class="fd-list__icon sap-icon--globe"></i>
-                                    <span class="fd-list__title">Settings Item</span>
-                                </a>
-                            </li>
-                            <li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
-                                <a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
-                                    <i role="presentation" class="fd-list__icon sap-icon--globe"></i>
-                                    <span class="fd-list__title">Settings Item</span>
-                                </a>
-                            </li>
-                            <li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
-                                <a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
-                                    <i role="presentation" class="fd-list__icon sap-icon--globe"></i>
-                                    <span class="fd-list__title">Settings Item</span>
-                                </a>
-                            </li>
-                            <li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
-                                <a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
-                                    <i role="presentation" class="fd-list__icon sap-icon--globe"></i>
-                                    <span class="fd-list__title">Settings Item</span>
-                                </a>
-                            </li>
-                        </ul>
-    
-                        <ul class="fd-list fd-list--navigation fd-list--navigation-indication fd-list--no-border fd-settings__list fd-settings__list--footer" role="list">
-                            <li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
-                                <a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
-                                    <i role="presentation" class="fd-list__icon sap-icon--globe"></i>
-                                    <span class="fd-list__title">Fixed Settings Item</span>
-                                </a>
-                            </li>
-                        </ul>
+                        <div class="fd-settings__list-container">
+                            <ul class="fd-list fd-list--navigation fd-list--navigation-indication fd-list--no-border fd-settings__list" role="list">
+                                <li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
+                                    <a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
+                                        <i role="presentation" class="fd-list__icon sap-icon--globe"></i>
+                                        <span class="fd-list__title">Settings Item</span>
+                                    </a>
+                                </li>
+                                <li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
+                                    <a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
+                                        <i role="presentation" class="fd-list__icon sap-icon--globe"></i>
+                                        <span class="fd-list__title">Settings Item</span>
+                                    </a>
+                                </li> 
+                                <li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
+                                    <a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
+                                        <i role="presentation" class="fd-list__icon sap-icon--globe"></i>
+                                        <span class="fd-list__title">Settings Item</span>
+                                    </a>
+                                </li>
+                                <li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
+                                    <a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
+                                        <i role="presentation" class="fd-list__icon sap-icon--globe"></i>
+                                      <span class="fd-list__title">Settings Item</span>
+                                    </a>
+                                </li>
+                                <li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
+                                    <a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
+                                        <i role="presentation" class="fd-list__icon sap-icon--globe"></i>
+                                        <span class="fd-list__title">Settings Item</span>
+                                    </a>
+                                </li>
+                                <li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
+                                    <a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
+                                        <i role="presentation" class="fd-list__icon sap-icon--globe"></i>
+                                        <span class="fd-list__title">Settings Item</span>
+                                    </a>
+                                </li>
+                                <li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
+                                    <a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
+                                        <i role="presentation" class="fd-list__icon sap-icon--globe"></i>
+                                        <span class="fd-list__title">Settings Item</span>
+                                    </a>
+                                </li>
+                                <li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
+                                    <a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
+                                        <i role="presentation" class="fd-list__icon sap-icon--globe"></i>
+                                        <span class="fd-list__title">Settings Item</span>
+                                    </a>
+                                </li>
+                            </ul>
+        
+                            <ul class="fd-list fd-list--navigation fd-list--navigation-indication fd-list--no-border fd-settings__list fd-settings__list--footer" role="list">
+                                <li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
+                                    <a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
+                                        <i role="presentation" class="fd-list__icon sap-icon--globe"></i>
+                                        <span class="fd-list__title">Fixed Settings Item</span>
+                                    </a>
+                                </li>
+                            </ul>
+                        </div>
                     </div>
                 </div>
             </div>
@@ -95,26 +97,27 @@ <h5 class="fd-title fd-title--h5" aria-label="text">Settings</h5>
     <section class="fd-dialog-docs-static fd-dialog fd-settings fd-settings--sm fd-dialog--active" style="width: 400px;">
         <div class="fd-dialog__content fd-settings__dialog-content" role="dialog" aria-modal="true" aria-labelledby="dialog-title-1" style="height: 800px;">
             <div class="fd-dialog__body fd-settings__dialog-body">
-                <div class="fd-settings__detail-area">
-                    <div class="fd-bar fd-bar--header fd-settings__header">
-                        <div class="fd-bar__left">
-                            <div class="fd-bar__element">
-                                <button aria-label="button" class="fd-button fd-button--transparent">
-                                    <i class="sap-icon--navigation-left-arrow"></i>
-                                </button>
-                            </div>
-                            <div class="fd-bar__element">
-                                <h5 class="fd-title fd-title--h5" aria-label="text">Settings Item</h5>
+                <div class="fd-settings__container fd-settings__container--sm">
+                    <div class="fd-settings__detail-area">
+                        <div class="fd-bar fd-bar--header fd-settings__header">
+                            <div class="fd-bar__left">
+                                <div class="fd-bar__element">
+                                    <button aria-label="button" class="fd-button fd-button--transparent">
+                                        <i class="sap-icon--navigation-left-arrow"></i>
+                                    </button>
+                                </div>
+                                <div class="fd-bar__element">
+                                    <h5 class="fd-title fd-title--h5" aria-label="text">Settings Item</h5>
+                                </div>
                             </div>
                         </div>
+        
+                        <section class="fd-icon-tab-bar__panel fd-settings__content fd-settings__content--no-background" id="section1" aria-labelledby="tab1">
+                            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
+                            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
+                        </section>
                     </div>
-    
-                    <section class="fd-icon-tab-bar__panel fd-settings__content fd-settings__content--no-background" id="section1" aria-labelledby="tab1">
-                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
-                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
-                    </section>
                 </div>
-               
             </div>
             <footer class="fd-dialog__footer fd-bar fd-bar--footer">
                 <div class="fd-bar__right">
diff --git a/packages/styles/stories/Components/settings/xl-default.example.html b/packages/styles/stories/Components/settings/xl-default.example.html
index 66448e370e..7988dc4da1 100644
--- a/packages/styles/stories/Components/settings/xl-default.example.html
+++ b/packages/styles/stories/Components/settings/xl-default.example.html
@@ -1,98 +1,99 @@
 <section class="fd-dialog-docs-static fd-dialog fd-settings fd-dialog--active">
     <div class="fd-dialog__content fd-settings__dialog-content" role="dialog" aria-modal="true" aria-labelledby="dialog-title-1" style="height: 800px;">
         <div class="fd-dialog__body fd-settings__dialog-body" >
-            <div class="fd-settings__list-area">
-                <div class="fd-bar fd-bar--header fd-bar--header-with-subheader">
-                    <div class="fd-bar__left">
-                        <div class="fd-bar__element">
-                            <h5 class="fd-title fd-title--h5" aria-label="text">Settings</h5>
+            <div class="fd-settings__container">
+                <div class="fd-settings__list-area">
+                    <div class="fd-bar fd-bar--header fd-bar--header-with-subheader">
+                        <div class="fd-bar__left">
+                            <div class="fd-bar__element">
+                                <h5 class="fd-title fd-title--h5" aria-label="text">Settings</h5>
+                            </div>
                         </div>
                     </div>
-                </div>
-                <div class="fd-bar fd-bar--subheader">
-                    <div class="fd-bar__middle">
-                        <div class="fd-bar__element fd-bar__element--full-width">
-                            <input class="fd-input fd-input-group__input" type="text" placeholder="Search" aria-label="input">
+                    <div class="fd-bar fd-bar--subheader">
+                        <div class="fd-bar__middle">
+                            <div class="fd-bar__element fd-bar__element--full-width">
+                                <input class="fd-input fd-input-group__input" type="text" placeholder="Search" aria-label="input">
+                            </div>
                         </div>
                     </div>
+                    <div class="fd-settings__list-container">
+                        <ul class="fd-list fd-list--navigation fd-list--navigation-indication fd-list--no-border fd-settings__list" role="list">
+                            <li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
+                                <a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
+                                    <i role="presentation" class="fd-list__icon sap-icon--globe"></i>
+                                    <span class="fd-list__title">Settings Item</span>
+                                </a>
+                            </li>
+                            <li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
+                                <a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
+                                    <i role="presentation" class="fd-list__icon sap-icon--globe"></i>
+                                    <span class="fd-list__title">Settings Item</span>
+                                </a>
+                            </li> 
+                            <li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
+                                <a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
+                                    <i role="presentation" class="fd-list__icon sap-icon--globe"></i>
+                                    <span class="fd-list__title">Settings Item</span>
+                                </a>
+                            </li>
+                            <li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
+                                <a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
+                                    <i role="presentation" class="fd-list__icon sap-icon--globe"></i>
+                                  <span class="fd-list__title">Settings Item</span>
+                                </a>
+                            </li>
+                            <li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
+                                <a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
+                                    <i role="presentation" class="fd-list__icon sap-icon--globe"></i>
+                                    <span class="fd-list__title">Settings Item</span>
+                                </a>
+                            </li>
+                            <li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
+                                <a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
+                                    <i role="presentation" class="fd-list__icon sap-icon--globe"></i>
+                                    <span class="fd-list__title">Settings Item</span>
+                                </a>
+                            </li>
+                            <li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
+                                <a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
+                                    <i role="presentation" class="fd-list__icon sap-icon--globe"></i>
+                                    <span class="fd-list__title">Settings Item</span>
+                                </a>
+                            </li>
+                            <li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
+                                <a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
+                                    <i role="presentation" class="fd-list__icon sap-icon--globe"></i>
+                                    <span class="fd-list__title">Settings Item</span>
+                                </a>
+                            </li>
+                        </ul>
+    
+                        <ul class="fd-list fd-list--navigation fd-list--navigation-indication fd-list--no-border fd-settings__list fd-settings__list--footer" role="list">
+                            <li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
+                                <a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
+                                    <i role="presentation" class="fd-list__icon sap-icon--globe"></i>
+                                    <span class="fd-list__title">Fixed Settings Item</span>
+                                </a>
+                            </li>
+                        </ul>
+                    </div>
                 </div>
-                <div class="fd-settings__list-container">
-                    <ul class="fd-list fd-list--navigation fd-list--navigation-indication fd-list--no-border fd-settings__list" role="list">
-                        <li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
-                            <a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
-                                <i role="presentation" class="fd-list__icon sap-icon--globe"></i>
-                                <span class="fd-list__title">Settings Item</span>
-                            </a>
-                        </li>
-                        <li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
-                            <a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
-                                <i role="presentation" class="fd-list__icon sap-icon--globe"></i>
-                                <span class="fd-list__title">Settings Item</span>
-                            </a>
-                        </li> 
-                        <li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
-                            <a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
-                                <i role="presentation" class="fd-list__icon sap-icon--globe"></i>
-                                <span class="fd-list__title">Settings Item</span>
-                            </a>
-                        </li>
-                        <li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
-                            <a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
-                                <i role="presentation" class="fd-list__icon sap-icon--globe"></i>
-                              <span class="fd-list__title">Settings Item</span>
-                            </a>
-                        </li>
-                        <li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
-                            <a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
-                                <i role="presentation" class="fd-list__icon sap-icon--globe"></i>
-                                <span class="fd-list__title">Settings Item</span>
-                            </a>
-                        </li>
-                        <li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
-                            <a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
-                                <i role="presentation" class="fd-list__icon sap-icon--globe"></i>
-                                <span class="fd-list__title">Settings Item</span>
-                            </a>
-                        </li>
-                        <li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
-                            <a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
-                                <i role="presentation" class="fd-list__icon sap-icon--globe"></i>
-                                <span class="fd-list__title">Settings Item</span>
-                            </a>
-                        </li>
-                        <li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
-                            <a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
-                                <i role="presentation" class="fd-list__icon sap-icon--globe"></i>
-                                <span class="fd-list__title">Settings Item</span>
-                            </a>
-                        </li>
-                    </ul>
-
-                    <ul class="fd-list fd-list--navigation fd-list--navigation-indication fd-list--no-border fd-settings__list fd-settings__list--footer" role="list">
-                        <li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
-                            <a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
-                                <i role="presentation" class="fd-list__icon sap-icon--globe"></i>
-                                <span class="fd-list__title">Fixed Settings Item</span>
-                            </a>
-                        </li>
-                    </ul>
-                </div>
-            </div>
-            <div class="fd-settings__detail-area">
-                <div class="fd-bar fd-bar--header fd-settings__header">
-                    <div class="fd-bar__left">
-                        <div class="fd-bar__element">
-                            <h5 class="fd-title fd-title--h5" aria-label="text">Settings Item</h5>
+                <div class="fd-settings__detail-area">
+                    <div class="fd-bar fd-bar--header fd-settings__header">
+                        <div class="fd-bar__left">
+                            <div class="fd-bar__element">
+                                <h5 class="fd-title fd-title--h5" aria-label="text">Settings Item</h5>
+                            </div>
                         </div>
                     </div>
-                </div>
-
-                <div class="fd-settings__content fd-settings__content--no-background">
-                    Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
-                    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
+    
+                    <div class="fd-settings__content fd-settings__content--no-background">
+                        Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
+                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
+                    </div>
                 </div>
             </div>
-           
         </div>
         <footer class="fd-dialog__footer fd-bar fd-bar--footer">
             <div class="fd-bar__right">
diff --git a/packages/styles/stories/Components/settings/xl.example.html b/packages/styles/stories/Components/settings/xl.example.html
index 7fb6748d87..89d54597c8 100644
--- a/packages/styles/stories/Components/settings/xl.example.html
+++ b/packages/styles/stories/Components/settings/xl.example.html
@@ -1,179 +1,180 @@
 <section class="fd-dialog-docs-static fd-dialog fd-settings fd-dialog--active">
     <div class="fd-dialog__content fd-settings__dialog-content" role="dialog" aria-modal="true" aria-labelledby="dialog-title-1" style="height: 800px;">
         <div class="fd-dialog__body fd-settings__dialog-body" >
-            <div class="fd-settings__list-area">
-                <div class="fd-bar fd-bar--header fd-bar--header-with-subheader">
-                    <div class="fd-bar__left">
-                        <div class="fd-bar__element">
-                            <h5 class="fd-title fd-title--h5" aria-label="text">Settings</h5>
+            <div class="fd-settings__container">
+                <div class="fd-settings__list-area">
+                    <div class="fd-bar fd-bar--header fd-bar--header-with-subheader">
+                        <div class="fd-bar__left">
+                            <div class="fd-bar__element">
+                                <h5 class="fd-title fd-title--h5" aria-label="text">Settings</h5>
+                            </div>
                         </div>
                     </div>
-                </div>
-                <div class="fd-bar fd-bar--subheader">
-                    <div class="fd-bar__middle">
-                        <div class="fd-bar__element fd-bar__element--full-width">
-                            <input class="fd-input fd-input-group__input" type="text" placeholder="Search" aria-label="input">
+                    <div class="fd-bar fd-bar--subheader">
+                        <div class="fd-bar__middle">
+                            <div class="fd-bar__element fd-bar__element--full-width">
+                                <input class="fd-input fd-input-group__input" type="text" placeholder="Search" aria-label="input">
+                            </div>
                         </div>
                     </div>
+                    <div class="fd-settings__list-container">
+                        <ul class="fd-list fd-list--navigation fd-list--navigation-indication fd-list--no-border fd-settings__list" role="list">
+                            <li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
+                                <a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
+                                    <i role="presentation" class="fd-list__icon sap-icon--globe"></i>
+                                    <span class="fd-list__title">Settings Item</span>
+                                </a>
+                            </li>
+                            <li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
+                                <a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
+                                    <i role="presentation" class="fd-list__icon sap-icon--globe"></i>
+                                    <span class="fd-list__title">Settings Item</span>
+                                </a>
+                            </li>
+                            <li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
+                                <a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
+                                    <i role="presentation" class="fd-list__icon sap-icon--globe"></i>
+                                    <span class="fd-list__title">Settings Item</span>
+                                </a>
+                            </li>
+                            <li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
+                                <a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
+                                    <i role="presentation" class="fd-list__icon sap-icon--globe"></i>
+                                    <span class="fd-list__title">Settings Item</span>
+                                </a>
+                            </li>
+                            <li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
+                                <a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
+                                    <i role="presentation" class="fd-list__icon sap-icon--globe"></i>
+                                    <span class="fd-list__title">Settings Item</span>
+                                </a>
+                            </li>
+                            <li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
+                                <a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
+                                    <i role="presentation" class="fd-list__icon sap-icon--globe"></i>
+                                    <span class="fd-list__title">Settings Item</span>
+                                </a>
+                            </li> 
+                            <li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
+                                <a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
+                                    <i role="presentation" class="fd-list__icon sap-icon--globe"></i>
+                                    <span class="fd-list__title">Settings Item</span>
+                                </a>
+                            </li>
+                            <li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
+                                <a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
+                                    <i role="presentation" class="fd-list__icon sap-icon--globe"></i>
+                                  <span class="fd-list__title">Settings Item</span>
+                                </a>
+                            </li>
+                            <li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
+                                <a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
+                                    <i role="presentation" class="fd-list__icon sap-icon--globe"></i>
+                                    <span class="fd-list__title">Settings Item</span>
+                                </a>
+                            </li>
+                            <li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
+                                <a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
+                                    <i role="presentation" class="fd-list__icon sap-icon--globe"></i>
+                                    <span class="fd-list__title">Settings Item</span>
+                                </a>
+                            </li>
+                            <li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
+                                <a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
+                                    <i role="presentation" class="fd-list__icon sap-icon--globe"></i>
+                                    <span class="fd-list__title">Settings Item</span>
+                                </a>
+                            </li>
+                            <li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
+                                <a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
+                                    <i role="presentation" class="fd-list__icon sap-icon--globe"></i>
+                                    <span class="fd-list__title">Settings Item</span>
+                                </a>
+                            </li>
+                            <li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
+                                <a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
+                                    <i role="presentation" class="fd-list__icon sap-icon--globe"></i>
+                                    <span class="fd-list__title">Settings Item</span>
+                                </a>
+                            </li>
+                            <li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
+                                <a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
+                                    <i role="presentation" class="fd-list__icon sap-icon--globe"></i>
+                                    <span class="fd-list__title">Settings Item</span>
+                                </a>
+                            </li>
+                            <li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
+                                <a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
+                                    <i role="presentation" class="fd-list__icon sap-icon--globe"></i>
+                                    <span class="fd-list__title">Settings Item</span>
+                                </a>
+                            </li>
+                            <li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
+                                <a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
+                                    <i role="presentation" class="fd-list__icon sap-icon--globe"></i>
+                                    <span class="fd-list__title">Settings Item</span>
+                                </a>
+                            </li>
+                            <li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
+                                <a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
+                                    <i role="presentation" class="fd-list__icon sap-icon--globe"></i>
+                                    <span class="fd-list__title">Settings Item</span>
+                                </a>
+                            </li>
+                            <li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
+                                <a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
+                                    <i role="presentation" class="fd-list__icon sap-icon--globe"></i>
+                                    <span class="fd-list__title">Settings Item</span>
+                                </a>
+                            </li>
+                        </ul>
+    
+                        <ul class="fd-list fd-list--navigation fd-list--navigation-indication fd-list--no-border fd-settings__list fd-settings__list--footer" role="list">
+                            <li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
+                                <a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
+                                    <i role="presentation" class="fd-list__icon sap-icon--globe"></i>
+                                    <span class="fd-list__title">Fixed Settings Item</span>
+                                </a>
+                            </li>
+                        </ul>
+                    </div>
                 </div>
-                <div class="fd-settings__list-container">
-                    <ul class="fd-list fd-list--navigation fd-list--navigation-indication fd-list--no-border fd-settings__list" role="list">
-                        <li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
-                            <a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
-                                <i role="presentation" class="fd-list__icon sap-icon--globe"></i>
-                                <span class="fd-list__title">Settings Item</span>
-                            </a>
-                        </li>
-                        <li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
-                            <a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
-                                <i role="presentation" class="fd-list__icon sap-icon--globe"></i>
-                                <span class="fd-list__title">Settings Item</span>
-                            </a>
-                        </li>
-                        <li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
-                            <a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
-                                <i role="presentation" class="fd-list__icon sap-icon--globe"></i>
-                                <span class="fd-list__title">Settings Item</span>
-                            </a>
-                        </li>
-                        <li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
-                            <a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
-                                <i role="presentation" class="fd-list__icon sap-icon--globe"></i>
-                                <span class="fd-list__title">Settings Item</span>
-                            </a>
-                        </li>
-                        <li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
-                            <a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
-                                <i role="presentation" class="fd-list__icon sap-icon--globe"></i>
-                                <span class="fd-list__title">Settings Item</span>
-                            </a>
-                        </li>
-                        <li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
-                            <a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
-                                <i role="presentation" class="fd-list__icon sap-icon--globe"></i>
-                                <span class="fd-list__title">Settings Item</span>
-                            </a>
-                        </li> 
-                        <li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
-                            <a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
-                                <i role="presentation" class="fd-list__icon sap-icon--globe"></i>
-                                <span class="fd-list__title">Settings Item</span>
-                            </a>
-                        </li>
-                        <li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
-                            <a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
-                                <i role="presentation" class="fd-list__icon sap-icon--globe"></i>
-                              <span class="fd-list__title">Settings Item</span>
-                            </a>
-                        </li>
-                        <li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
-                            <a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
-                                <i role="presentation" class="fd-list__icon sap-icon--globe"></i>
-                                <span class="fd-list__title">Settings Item</span>
-                            </a>
-                        </li>
-                        <li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
-                            <a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
-                                <i role="presentation" class="fd-list__icon sap-icon--globe"></i>
-                                <span class="fd-list__title">Settings Item</span>
-                            </a>
-                        </li>
-                        <li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
-                            <a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
-                                <i role="presentation" class="fd-list__icon sap-icon--globe"></i>
-                                <span class="fd-list__title">Settings Item</span>
-                            </a>
-                        </li>
-                        <li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
-                            <a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
-                                <i role="presentation" class="fd-list__icon sap-icon--globe"></i>
-                                <span class="fd-list__title">Settings Item</span>
-                            </a>
-                        </li>
-                        <li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
-                            <a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
-                                <i role="presentation" class="fd-list__icon sap-icon--globe"></i>
-                                <span class="fd-list__title">Settings Item</span>
-                            </a>
-                        </li>
-                        <li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
-                            <a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
-                                <i role="presentation" class="fd-list__icon sap-icon--globe"></i>
-                                <span class="fd-list__title">Settings Item</span>
-                            </a>
-                        </li>
-                        <li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
-                            <a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
-                                <i role="presentation" class="fd-list__icon sap-icon--globe"></i>
-                                <span class="fd-list__title">Settings Item</span>
-                            </a>
-                        </li>
-                        <li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
-                            <a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
-                                <i role="presentation" class="fd-list__icon sap-icon--globe"></i>
-                                <span class="fd-list__title">Settings Item</span>
-                            </a>
-                        </li>
-                        <li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
-                            <a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
-                                <i role="presentation" class="fd-list__icon sap-icon--globe"></i>
-                                <span class="fd-list__title">Settings Item</span>
-                            </a>
-                        </li>
-                        <li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
-                            <a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
-                                <i role="presentation" class="fd-list__icon sap-icon--globe"></i>
-                                <span class="fd-list__title">Settings Item</span>
-                            </a>
-                        </li>
-                    </ul>
-
-                    <ul class="fd-list fd-list--navigation fd-list--navigation-indication fd-list--no-border fd-settings__list fd-settings__list--footer" role="list">
-                        <li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
-                            <a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
-                                <i role="presentation" class="fd-list__icon sap-icon--globe"></i>
-                                <span class="fd-list__title">Fixed Settings Item</span>
-                            </a>
-                        </li>
-                    </ul>
-                </div>
-            </div>
-            <div class="fd-settings__detail-area">
-                <div class="fd-bar fd-bar--header fd-settings__header">
-                    <div class="fd-bar__left">
-                        <div class="fd-bar__element">
-                            <h5 class="fd-title fd-title--h5" aria-label="text">Settings Item</h5>
+                <div class="fd-settings__detail-area">
+                    <div class="fd-bar fd-bar--header fd-settings__header">
+                        <div class="fd-bar__left">
+                            <div class="fd-bar__element">
+                                <h5 class="fd-title fd-title--h5" aria-label="text">Settings Item</h5>
+                            </div>
                         </div>
                     </div>
-                </div>
-
-                <div class="fd-icon-tab-bar fd-icon-tab-bar--sm fd-settings__tab-bar">
-                    <ul role="tablist" class="fd-icon-tab-bar__header">
-                        <li role="presentation" class="fd-icon-tab-bar__item">
-                            <a role="tab" class="fd-icon-tab-bar__tab" aria-selected="true" href="#section1" id="tab1">
-                                <span class="fd-icon-tab-bar__tag">Tab Text</span>
-                            </a>
-                        </li>
-                        <li role="presentation" class="fd-icon-tab-bar__item">
-                            <a role="tab" class="fd-icon-tab-bar__tab" href="#section2" id="tab2">
-                                <span class="fd-icon-tab-bar__tag">Tab Text</span>
-                            </a>
-                        </li>
-                    </ul>
-                    <section role="tabpanel" class="fd-icon-tab-bar__panel fd-settings__content fd-settings__content--no-background" id="section1" aria-labelledby="tab1">
-                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
-                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
-                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
-                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
-                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
-                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
-                    </section>
-                    <section role="tabpanel" class="fd-icon-tab-bar__panel fd-settings__content" id="section2" aria-labelledby="tab2" hidden>
-                        Section
-                    </section>
+    
+                    <div class="fd-icon-tab-bar fd-icon-tab-bar--sm fd-settings__tab-bar">
+                        <ul role="tablist" class="fd-icon-tab-bar__header">
+                            <li role="presentation" class="fd-icon-tab-bar__item">
+                                <a role="tab" class="fd-icon-tab-bar__tab" aria-selected="true" href="#section1" id="tab1">
+                                    <span class="fd-icon-tab-bar__tag">Tab Text</span>
+                                </a>
+                            </li>
+                            <li role="presentation" class="fd-icon-tab-bar__item">
+                                <a role="tab" class="fd-icon-tab-bar__tab" href="#section2" id="tab2">
+                                    <span class="fd-icon-tab-bar__tag">Tab Text</span>
+                                </a>
+                            </li>
+                        </ul>
+                        <section role="tabpanel" class="fd-icon-tab-bar__panel fd-settings__content fd-settings__content--no-background" id="section1" aria-labelledby="tab1">
+                            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
+                            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
+                            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
+                            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
+                            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
+                            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
+                        </section>
+                        <section role="tabpanel" class="fd-icon-tab-bar__panel fd-settings__content" id="section2" aria-labelledby="tab2" hidden>
+                            Section
+                        </section>
+                    </div>
                 </div>
             </div>
-           
         </div>
         <footer class="fd-dialog__footer fd-bar fd-bar--footer">
             <div class="fd-bar__right">
diff --git a/packages/styles/tests/__snapshots__/styles.test.ts.snap b/packages/styles/tests/__snapshots__/styles.test.ts.snap
index bf482527be..49f63532a4 100644
--- a/packages/styles/tests/__snapshots__/styles.test.ts.snap
+++ b/packages/styles/tests/__snapshots__/styles.test.ts.snap
@@ -40882,9 +40882,302 @@ exports[`Check stories > Components/Select > Story TwoColumnsAndIcons > Should m
 
 exports[`Check stories > Components/Settings > Story Md > Should match snapshot 1`] = `
 "<div style=\\"display: flex; gap: 1rem; max-width: 1200px;\\">
+    <section class=\\"fd-dialog-docs-static fd-dialog fd-settings fd-dialog--active\\">
+        <div class=\\"fd-dialog__content fd-settings__dialog-content\\" role=\\"dialog\\" aria-modal=\\"true\\" aria-labelledby=\\"dialog-title-1\\" style=\\"height: 800px;\\">
+            <div class=\\"fd-dialog__body fd-settings__dialog-body\\" >
+                <div class=\\"fd-settings__container fd-settings__container--md\\">
+                    <div class=\\"fd-settings__list-area\\">
+                        <div class=\\"fd-bar fd-bar--header fd-bar--header-with-subheader\\">
+                            <div class=\\"fd-bar__left\\">
+                                <div class=\\"fd-bar__element\\">
+                                    <h5 class=\\"fd-title fd-title--h5\\" aria-label=\\"text\\">Settings</h5>
+                                </div>
+                            </div>
+                        </div>
+                        <div class=\\"fd-bar fd-bar--subheader\\">
+                            <div class=\\"fd-bar__middle\\">
+                                <div class=\\"fd-bar__element fd-bar__element--full-width\\">
+                                    <input class=\\"fd-input fd-input-group__input\\" type=\\"text\\" placeholder=\\"Search\\" aria-label=\\"input\\">
+                                </div>
+                            </div>
+                        </div>
+                        <div class=\\"fd-settings__list-container\\">
+                            <ul class=\\"fd-list fd-list--navigation fd-list--navigation-indication fd-list--no-border fd-settings__list\\" role=\\"list\\">
+                                <li tabindex=\\"-1\\" role=\\"listitem\\" class=\\"fd-list__item fd-list__item--link\\">
+                                    <a tabindex=\\"0\\" class=\\"fd-list__link fd-list__link--navigation-indicator\\" href=\\"#\\">
+                                        <i role=\\"presentation\\" class=\\"fd-list__icon sap-icon--globe\\"></i>
+                                        <span class=\\"fd-list__title\\">Settings Item</span>
+                                    </a>
+                                </li>
+                                <li tabindex=\\"-1\\" role=\\"listitem\\" class=\\"fd-list__item fd-list__item--link\\">
+                                    <a tabindex=\\"0\\" class=\\"fd-list__link fd-list__link--navigation-indicator\\" href=\\"#\\">
+                                        <i role=\\"presentation\\" class=\\"fd-list__icon sap-icon--globe\\"></i>
+                                        <span class=\\"fd-list__title\\">Settings Item</span>
+                                    </a>
+                                </li> 
+                                <li tabindex=\\"-1\\" role=\\"listitem\\" class=\\"fd-list__item fd-list__item--link\\">
+                                    <a tabindex=\\"0\\" class=\\"fd-list__link fd-list__link--navigation-indicator\\" href=\\"#\\">
+                                        <i role=\\"presentation\\" class=\\"fd-list__icon sap-icon--globe\\"></i>
+                                        <span class=\\"fd-list__title\\">Settings Item</span>
+                                    </a>
+                                </li>
+                                <li tabindex=\\"-1\\" role=\\"listitem\\" class=\\"fd-list__item fd-list__item--link\\">
+                                    <a tabindex=\\"0\\" class=\\"fd-list__link fd-list__link--navigation-indicator\\" href=\\"#\\">
+                                        <i role=\\"presentation\\" class=\\"fd-list__icon sap-icon--globe\\"></i>
+                                      <span class=\\"fd-list__title\\">Settings Item</span>
+                                    </a>
+                                </li>
+                                <li tabindex=\\"-1\\" role=\\"listitem\\" class=\\"fd-list__item fd-list__item--link\\">
+                                    <a tabindex=\\"0\\" class=\\"fd-list__link fd-list__link--navigation-indicator\\" href=\\"#\\">
+                                        <i role=\\"presentation\\" class=\\"fd-list__icon sap-icon--globe\\"></i>
+                                        <span class=\\"fd-list__title\\">Settings Item</span>
+                                    </a>
+                                </li>
+                                <li tabindex=\\"-1\\" role=\\"listitem\\" class=\\"fd-list__item fd-list__item--link\\">
+                                    <a tabindex=\\"0\\" class=\\"fd-list__link fd-list__link--navigation-indicator\\" href=\\"#\\">
+                                        <i role=\\"presentation\\" class=\\"fd-list__icon sap-icon--globe\\"></i>
+                                        <span class=\\"fd-list__title\\">Settings Item</span>
+                                    </a>
+                                </li>
+                                <li tabindex=\\"-1\\" role=\\"listitem\\" class=\\"fd-list__item fd-list__item--link\\">
+                                    <a tabindex=\\"0\\" class=\\"fd-list__link fd-list__link--navigation-indicator\\" href=\\"#\\">
+                                        <i role=\\"presentation\\" class=\\"fd-list__icon sap-icon--globe\\"></i>
+                                        <span class=\\"fd-list__title\\">Settings Item</span>
+                                    </a>
+                                </li>
+                                <li tabindex=\\"-1\\" role=\\"listitem\\" class=\\"fd-list__item fd-list__item--link\\">
+                                    <a tabindex=\\"0\\" class=\\"fd-list__link fd-list__link--navigation-indicator\\" href=\\"#\\">
+                                        <i role=\\"presentation\\" class=\\"fd-list__icon sap-icon--globe\\"></i>
+                                        <span class=\\"fd-list__title\\">Settings Item</span>
+                                    </a>
+                                </li>
+                            </ul>
+        
+                            <ul class=\\"fd-list fd-list--navigation fd-list--navigation-indication fd-list--no-border fd-settings__list fd-settings__list--footer\\" role=\\"list\\">
+                                <li tabindex=\\"-1\\" role=\\"listitem\\" class=\\"fd-list__item fd-list__item--link\\">
+                                    <a tabindex=\\"0\\" class=\\"fd-list__link fd-list__link--navigation-indicator\\" href=\\"#\\">
+                                        <i role=\\"presentation\\" class=\\"fd-list__icon sap-icon--globe\\"></i>
+                                        <span class=\\"fd-list__title\\">Fixed Settings Item</span>
+                                    </a>
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <footer class=\\"fd-dialog__footer fd-bar fd-bar--footer\\">
+                <div class=\\"fd-bar__right\\">
+                    <div class=\\"fd-bar__element\\">
+                        <button class=\\"fd-dialog__decisive-button fd-button fd-button--transparent\\">
+                            Close
+                        </button>
+                    </div>
+                </div>
+            </footer>
+        </div>
+    </section>
+
     <section class=\\"fd-dialog-docs-static fd-dialog fd-settings fd-settings--md fd-dialog--active\\">
+        <div class=\\"fd-dialog__content fd-settings__dialog-content\\" role=\\"dialog\\" aria-modal=\\"true\\" aria-labelledby=\\"dialog-title-1\\" style=\\"height: 800px;\\">
+            <div class=\\"fd-dialog__body fd-settings__dialog-body\\">
+                <div class=\\"fd-settings__container fd-settings__container--md\\">
+                    <div class=\\"fd-settings__detail-area\\">
+                        <div class=\\"fd-bar fd-bar--header fd-settings__header\\">
+                            <div class=\\"fd-bar__left\\">
+                                <div class=\\"fd-bar__element\\">
+                                    <button aria-label=\\"button\\" class=\\"fd-button fd-button--transparent\\">
+                                        <i class=\\"sap-icon--navigation-left-arrow\\"></i>
+                                    </button>
+                                </div>
+                                <div class=\\"fd-bar__element\\">
+                                    <h5 class=\\"fd-title fd-title--h5\\" aria-label=\\"text\\">Settings Item</h5>
+                                </div>
+                            </div>
+                        </div>
+        
+                        <div class=\\"fd-icon-tab-bar fd-icon-tab-bar--sm fd-settings__tab-bar\\">
+                            <ul role=\\"tablist\\" class=\\"fd-icon-tab-bar__header\\">
+                                <li role=\\"presentation\\" class=\\"fd-icon-tab-bar__item\\">
+                                    <a role=\\"tab\\" class=\\"fd-icon-tab-bar__tab\\" aria-selected=\\"true\\" href=\\"#section1\\" id=\\"tab1\\">
+                                        <span class=\\"fd-icon-tab-bar__tag\\">Tab Text</span>
+                                    </a>
+                                </li>
+                                <li role=\\"presentation\\" class=\\"fd-icon-tab-bar__item\\">
+                                    <a role=\\"tab\\" class=\\"fd-icon-tab-bar__tab\\" href=\\"#section2\\" id=\\"tab2\\">
+                                        <span class=\\"fd-icon-tab-bar__tag\\">Tab Text</span>
+                                    </a>
+                                </li>
+                            </ul>
+                            <section role=\\"tabpanel\\" class=\\"fd-icon-tab-bar__panel fd-settings__content fd-settings__content--no-background\\" id=\\"section1\\" aria-labelledby=\\"tab1\\">
+                                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
+                                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
+                                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
+                                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
+                                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
+                                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
+                            </section>
+                            <section role=\\"tabpanel\\" class=\\"fd-icon-tab-bar__panel fd-settings__content\\" id=\\"section2\\" aria-labelledby=\\"tab2\\" hidden>
+                                Section
+                            </section>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <footer class=\\"fd-dialog__footer fd-bar fd-bar--footer\\">
+                <div class=\\"fd-bar__right\\">
+                    <div class=\\"fd-bar__element\\">
+                        <button class=\\"fd-dialog__decisive-button fd-button fd-button--transparent\\">
+                            Close
+                        </button>
+                    </div>
+                </div>
+            </footer>
+        </div>
+    </section>
+</div>"
+`;
+
+exports[`Check stories > Components/Settings > Story Sm > Should match snapshot 1`] = `
+"<div style=\\"display: flex; gap: 1rem; max-width: 1200px;\\">
+    <section class=\\"fd-dialog-docs-static fd-dialog fd-settings fd-settings--sm fd-dialog--active\\" style=\\"width: 400px;\\">
         <div class=\\"fd-dialog__content fd-settings__dialog-content\\" role=\\"dialog\\" aria-modal=\\"true\\" aria-labelledby=\\"dialog-title-1\\" style=\\"height: 800px;\\">
             <div class=\\"fd-dialog__body fd-settings__dialog-body\\" >
+                <div class=\\"fd-settings__container fd-settings__container--sm\\">
+                    <div class=\\"fd-settings__list-area\\">
+                        <div class=\\"fd-bar fd-bar--header fd-bar--header-with-subheader\\">
+                            <div class=\\"fd-bar__left\\">
+                                <div class=\\"fd-bar__element\\">
+                                    <h5 class=\\"fd-title fd-title--h5\\" aria-label=\\"text\\">Settings</h5>
+                                </div>
+                            </div>
+                        </div>
+                        <div class=\\"fd-bar fd-bar--subheader\\">
+                            <div class=\\"fd-bar__middle\\">
+                                <div class=\\"fd-bar__element fd-bar__element--full-width\\">
+                                    <input class=\\"fd-input fd-input-group__input\\" type=\\"text\\" placeholder=\\"Search\\" aria-label=\\"input\\">
+                                </div>
+                            </div>
+                        </div>
+                        <div class=\\"fd-settings__list-container\\">
+                            <ul class=\\"fd-list fd-list--navigation fd-list--navigation-indication fd-list--no-border fd-settings__list\\" role=\\"list\\">
+                                <li tabindex=\\"-1\\" role=\\"listitem\\" class=\\"fd-list__item fd-list__item--link\\">
+                                    <a tabindex=\\"0\\" class=\\"fd-list__link fd-list__link--navigation-indicator\\" href=\\"#\\">
+                                        <i role=\\"presentation\\" class=\\"fd-list__icon sap-icon--globe\\"></i>
+                                        <span class=\\"fd-list__title\\">Settings Item</span>
+                                    </a>
+                                </li>
+                                <li tabindex=\\"-1\\" role=\\"listitem\\" class=\\"fd-list__item fd-list__item--link\\">
+                                    <a tabindex=\\"0\\" class=\\"fd-list__link fd-list__link--navigation-indicator\\" href=\\"#\\">
+                                        <i role=\\"presentation\\" class=\\"fd-list__icon sap-icon--globe\\"></i>
+                                        <span class=\\"fd-list__title\\">Settings Item</span>
+                                    </a>
+                                </li> 
+                                <li tabindex=\\"-1\\" role=\\"listitem\\" class=\\"fd-list__item fd-list__item--link\\">
+                                    <a tabindex=\\"0\\" class=\\"fd-list__link fd-list__link--navigation-indicator\\" href=\\"#\\">
+                                        <i role=\\"presentation\\" class=\\"fd-list__icon sap-icon--globe\\"></i>
+                                        <span class=\\"fd-list__title\\">Settings Item</span>
+                                    </a>
+                                </li>
+                                <li tabindex=\\"-1\\" role=\\"listitem\\" class=\\"fd-list__item fd-list__item--link\\">
+                                    <a tabindex=\\"0\\" class=\\"fd-list__link fd-list__link--navigation-indicator\\" href=\\"#\\">
+                                        <i role=\\"presentation\\" class=\\"fd-list__icon sap-icon--globe\\"></i>
+                                      <span class=\\"fd-list__title\\">Settings Item</span>
+                                    </a>
+                                </li>
+                                <li tabindex=\\"-1\\" role=\\"listitem\\" class=\\"fd-list__item fd-list__item--link\\">
+                                    <a tabindex=\\"0\\" class=\\"fd-list__link fd-list__link--navigation-indicator\\" href=\\"#\\">
+                                        <i role=\\"presentation\\" class=\\"fd-list__icon sap-icon--globe\\"></i>
+                                        <span class=\\"fd-list__title\\">Settings Item</span>
+                                    </a>
+                                </li>
+                                <li tabindex=\\"-1\\" role=\\"listitem\\" class=\\"fd-list__item fd-list__item--link\\">
+                                    <a tabindex=\\"0\\" class=\\"fd-list__link fd-list__link--navigation-indicator\\" href=\\"#\\">
+                                        <i role=\\"presentation\\" class=\\"fd-list__icon sap-icon--globe\\"></i>
+                                        <span class=\\"fd-list__title\\">Settings Item</span>
+                                    </a>
+                                </li>
+                                <li tabindex=\\"-1\\" role=\\"listitem\\" class=\\"fd-list__item fd-list__item--link\\">
+                                    <a tabindex=\\"0\\" class=\\"fd-list__link fd-list__link--navigation-indicator\\" href=\\"#\\">
+                                        <i role=\\"presentation\\" class=\\"fd-list__icon sap-icon--globe\\"></i>
+                                        <span class=\\"fd-list__title\\">Settings Item</span>
+                                    </a>
+                                </li>
+                                <li tabindex=\\"-1\\" role=\\"listitem\\" class=\\"fd-list__item fd-list__item--link\\">
+                                    <a tabindex=\\"0\\" class=\\"fd-list__link fd-list__link--navigation-indicator\\" href=\\"#\\">
+                                        <i role=\\"presentation\\" class=\\"fd-list__icon sap-icon--globe\\"></i>
+                                        <span class=\\"fd-list__title\\">Settings Item</span>
+                                    </a>
+                                </li>
+                            </ul>
+        
+                            <ul class=\\"fd-list fd-list--navigation fd-list--navigation-indication fd-list--no-border fd-settings__list fd-settings__list--footer\\" role=\\"list\\">
+                                <li tabindex=\\"-1\\" role=\\"listitem\\" class=\\"fd-list__item fd-list__item--link\\">
+                                    <a tabindex=\\"0\\" class=\\"fd-list__link fd-list__link--navigation-indicator\\" href=\\"#\\">
+                                        <i role=\\"presentation\\" class=\\"fd-list__icon sap-icon--globe\\"></i>
+                                        <span class=\\"fd-list__title\\">Fixed Settings Item</span>
+                                    </a>
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <footer class=\\"fd-dialog__footer fd-bar fd-bar--footer\\">
+                <div class=\\"fd-bar__right\\">
+                    <div class=\\"fd-bar__element\\">
+                        <button class=\\"fd-dialog__decisive-button fd-button fd-button--transparent\\">
+                            Close
+                        </button>
+                    </div>
+                </div>
+            </footer>
+        </div>
+    </section>
+
+    <section class=\\"fd-dialog-docs-static fd-dialog fd-settings fd-settings--sm fd-dialog--active\\" style=\\"width: 400px;\\">
+        <div class=\\"fd-dialog__content fd-settings__dialog-content\\" role=\\"dialog\\" aria-modal=\\"true\\" aria-labelledby=\\"dialog-title-1\\" style=\\"height: 800px;\\">
+            <div class=\\"fd-dialog__body fd-settings__dialog-body\\">
+                <div class=\\"fd-settings__container fd-settings__container--sm\\">
+                    <div class=\\"fd-settings__detail-area\\">
+                        <div class=\\"fd-bar fd-bar--header fd-settings__header\\">
+                            <div class=\\"fd-bar__left\\">
+                                <div class=\\"fd-bar__element\\">
+                                    <button aria-label=\\"button\\" class=\\"fd-button fd-button--transparent\\">
+                                        <i class=\\"sap-icon--navigation-left-arrow\\"></i>
+                                    </button>
+                                </div>
+                                <div class=\\"fd-bar__element\\">
+                                    <h5 class=\\"fd-title fd-title--h5\\" aria-label=\\"text\\">Settings Item</h5>
+                                </div>
+                            </div>
+                        </div>
+        
+                        <section class=\\"fd-icon-tab-bar__panel fd-settings__content fd-settings__content--no-background\\" id=\\"section1\\" aria-labelledby=\\"tab1\\">
+                            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
+                            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
+                        </section>
+                    </div>
+                </div>
+            </div>
+            <footer class=\\"fd-dialog__footer fd-bar fd-bar--footer\\">
+                <div class=\\"fd-bar__right\\">
+                    <div class=\\"fd-bar__element\\">
+                        <button class=\\"fd-dialog__decisive-button fd-button fd-button--transparent\\">
+                            Close
+                        </button>
+                    </div>
+                </div>
+            </footer>
+        </div>
+    </section>
+</div>"
+`;
+
+exports[`Check stories > Components/Settings > Story XLDefault > Should match snapshot 1`] = `
+"<section class=\\"fd-dialog-docs-static fd-dialog fd-settings fd-dialog--active\\">
+    <div class=\\"fd-dialog__content fd-settings__dialog-content\\" role=\\"dialog\\" aria-modal=\\"true\\" aria-labelledby=\\"dialog-title-1\\" style=\\"height: 800px;\\">
+        <div class=\\"fd-dialog__body fd-settings__dialog-body\\" >
+            <div class=\\"fd-settings__container\\">
                 <div class=\\"fd-settings__list-area\\">
                     <div class=\\"fd-bar fd-bar--header fd-bar--header-with-subheader\\">
                         <div class=\\"fd-bar__left\\">
@@ -40962,83 +41255,40 @@ exports[`Check stories > Components/Settings > Story Md > Should match snapshot
                         </ul>
                     </div>
                 </div>
-            </div>
-            <footer class=\\"fd-dialog__footer fd-bar fd-bar--footer\\">
-                <div class=\\"fd-bar__right\\">
-                    <div class=\\"fd-bar__element\\">
-                        <button class=\\"fd-dialog__decisive-button fd-button fd-button--transparent\\">
-                            Close
-                        </button>
-                    </div>
-                </div>
-            </footer>
-        </div>
-    </section>
-
-    <section class=\\"fd-dialog-docs-static fd-dialog fd-settings fd-settings--md fd-dialog--active\\">
-        <div class=\\"fd-dialog__content fd-settings__dialog-content\\" role=\\"dialog\\" aria-modal=\\"true\\" aria-labelledby=\\"dialog-title-1\\" style=\\"height: 800px;\\">
-            <div class=\\"fd-dialog__body fd-settings__dialog-body\\">
                 <div class=\\"fd-settings__detail-area\\">
                     <div class=\\"fd-bar fd-bar--header fd-settings__header\\">
                         <div class=\\"fd-bar__left\\">
-                            <div class=\\"fd-bar__element\\">
-                                <button aria-label=\\"button\\" class=\\"fd-button fd-button--transparent\\">
-                                    <i class=\\"sap-icon--navigation-left-arrow\\"></i>
-                                </button>
-                            </div>
                             <div class=\\"fd-bar__element\\">
                                 <h5 class=\\"fd-title fd-title--h5\\" aria-label=\\"text\\">Settings Item</h5>
                             </div>
                         </div>
                     </div>
     
-                    <div class=\\"fd-icon-tab-bar fd-icon-tab-bar--sm fd-settings__tab-bar\\">
-                        <ul role=\\"tablist\\" class=\\"fd-icon-tab-bar__header\\">
-                            <li role=\\"presentation\\" class=\\"fd-icon-tab-bar__item\\">
-                                <a role=\\"tab\\" class=\\"fd-icon-tab-bar__tab\\" aria-selected=\\"true\\" href=\\"#section1\\" id=\\"tab1\\">
-                                    <span class=\\"fd-icon-tab-bar__tag\\">Tab Text</span>
-                                </a>
-                            </li>
-                            <li role=\\"presentation\\" class=\\"fd-icon-tab-bar__item\\">
-                                <a role=\\"tab\\" class=\\"fd-icon-tab-bar__tab\\" href=\\"#section2\\" id=\\"tab2\\">
-                                    <span class=\\"fd-icon-tab-bar__tag\\">Tab Text</span>
-                                </a>
-                            </li>
-                        </ul>
-                        <section role=\\"tabpanel\\" class=\\"fd-icon-tab-bar__panel fd-settings__content fd-settings__content--no-background\\" id=\\"section1\\" aria-labelledby=\\"tab1\\">
-                            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
-                            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
-                            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
-                            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
-                            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
-                            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
-                        </section>
-                        <section role=\\"tabpanel\\" class=\\"fd-icon-tab-bar__panel fd-settings__content\\" id=\\"section2\\" aria-labelledby=\\"tab2\\" hidden>
-                            Section
-                        </section>
+                    <div class=\\"fd-settings__content fd-settings__content--no-background\\">
+                        Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
+                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
                     </div>
                 </div>
-               
             </div>
-            <footer class=\\"fd-dialog__footer fd-bar fd-bar--footer\\">
-                <div class=\\"fd-bar__right\\">
-                    <div class=\\"fd-bar__element\\">
-                        <button class=\\"fd-dialog__decisive-button fd-button fd-button--transparent\\">
-                            Close
-                        </button>
-                    </div>
-                </div>
-            </footer>
         </div>
-    </section>
-</div>"
+        <footer class=\\"fd-dialog__footer fd-bar fd-bar--footer\\">
+            <div class=\\"fd-bar__right\\">
+                <div class=\\"fd-bar__element\\">
+                    <button class=\\"fd-dialog__decisive-button fd-button fd-button--transparent\\">
+                        Close
+                    </button>
+                </div>
+            </div>
+        </footer>
+    </div>
+</section>"
 `;
 
-exports[`Check stories > Components/Settings > Story Sm > Should match snapshot 1`] = `
-"<div style=\\"display: flex; gap: 1rem; max-width: 1200px;\\">
-    <section class=\\"fd-dialog-docs-static fd-dialog fd-settings fd-settings--sm fd-dialog--active\\" style=\\"width: 400px;\\">
-        <div class=\\"fd-dialog__content fd-settings__dialog-content\\" role=\\"dialog\\" aria-modal=\\"true\\" aria-labelledby=\\"dialog-title-1\\" style=\\"height: 800px;\\">
-            <div class=\\"fd-dialog__body fd-settings__dialog-body\\" >
+exports[`Check stories > Components/Settings > Story Xl > Should match snapshot 1`] = `
+"<section class=\\"fd-dialog-docs-static fd-dialog fd-settings fd-dialog--active\\">
+    <div class=\\"fd-dialog__content fd-settings__dialog-content\\" role=\\"dialog\\" aria-modal=\\"true\\" aria-labelledby=\\"dialog-title-1\\" style=\\"height: 800px;\\">
+        <div class=\\"fd-dialog__body fd-settings__dialog-body\\" >
+            <div class=\\"fd-settings__container\\">
                 <div class=\\"fd-settings__list-area\\">
                     <div class=\\"fd-bar fd-bar--header fd-bar--header-with-subheader\\">
                         <div class=\\"fd-bar__left\\">
@@ -41056,6 +41306,30 @@ exports[`Check stories > Components/Settings > Story Sm > Should match snapshot
                     </div>
                     <div class=\\"fd-settings__list-container\\">
                         <ul class=\\"fd-list fd-list--navigation fd-list--navigation-indication fd-list--no-border fd-settings__list\\" role=\\"list\\">
+                            <li tabindex=\\"-1\\" role=\\"listitem\\" class=\\"fd-list__item fd-list__item--link\\">
+                                <a tabindex=\\"0\\" class=\\"fd-list__link fd-list__link--navigation-indicator\\" href=\\"#\\">
+                                    <i role=\\"presentation\\" class=\\"fd-list__icon sap-icon--globe\\"></i>
+                                    <span class=\\"fd-list__title\\">Settings Item</span>
+                                </a>
+                            </li>
+                            <li tabindex=\\"-1\\" role=\\"listitem\\" class=\\"fd-list__item fd-list__item--link\\">
+                                <a tabindex=\\"0\\" class=\\"fd-list__link fd-list__link--navigation-indicator\\" href=\\"#\\">
+                                    <i role=\\"presentation\\" class=\\"fd-list__icon sap-icon--globe\\"></i>
+                                    <span class=\\"fd-list__title\\">Settings Item</span>
+                                </a>
+                            </li>
+                            <li tabindex=\\"-1\\" role=\\"listitem\\" class=\\"fd-list__item fd-list__item--link\\">
+                                <a tabindex=\\"0\\" class=\\"fd-list__link fd-list__link--navigation-indicator\\" href=\\"#\\">
+                                    <i role=\\"presentation\\" class=\\"fd-list__icon sap-icon--globe\\"></i>
+                                    <span class=\\"fd-list__title\\">Settings Item</span>
+                                </a>
+                            </li>
+                            <li tabindex=\\"-1\\" role=\\"listitem\\" class=\\"fd-list__item fd-list__item--link\\">
+                                <a tabindex=\\"0\\" class=\\"fd-list__link fd-list__link--navigation-indicator\\" href=\\"#\\">
+                                    <i role=\\"presentation\\" class=\\"fd-list__icon sap-icon--globe\\"></i>
+                                    <span class=\\"fd-list__title\\">Settings Item</span>
+                                </a>
+                            </li>
                             <li tabindex=\\"-1\\" role=\\"listitem\\" class=\\"fd-list__item fd-list__item--link\\">
                                 <a tabindex=\\"0\\" class=\\"fd-list__link fd-list__link--navigation-indicator\\" href=\\"#\\">
                                     <i role=\\"presentation\\" class=\\"fd-list__icon sap-icon--globe\\"></i>
@@ -41104,6 +41378,42 @@ exports[`Check stories > Components/Settings > Story Sm > Should match snapshot
                                     <span class=\\"fd-list__title\\">Settings Item</span>
                                 </a>
                             </li>
+                            <li tabindex=\\"-1\\" role=\\"listitem\\" class=\\"fd-list__item fd-list__item--link\\">
+                                <a tabindex=\\"0\\" class=\\"fd-list__link fd-list__link--navigation-indicator\\" href=\\"#\\">
+                                    <i role=\\"presentation\\" class=\\"fd-list__icon sap-icon--globe\\"></i>
+                                    <span class=\\"fd-list__title\\">Settings Item</span>
+                                </a>
+                            </li>
+                            <li tabindex=\\"-1\\" role=\\"listitem\\" class=\\"fd-list__item fd-list__item--link\\">
+                                <a tabindex=\\"0\\" class=\\"fd-list__link fd-list__link--navigation-indicator\\" href=\\"#\\">
+                                    <i role=\\"presentation\\" class=\\"fd-list__icon sap-icon--globe\\"></i>
+                                    <span class=\\"fd-list__title\\">Settings Item</span>
+                                </a>
+                            </li>
+                            <li tabindex=\\"-1\\" role=\\"listitem\\" class=\\"fd-list__item fd-list__item--link\\">
+                                <a tabindex=\\"0\\" class=\\"fd-list__link fd-list__link--navigation-indicator\\" href=\\"#\\">
+                                    <i role=\\"presentation\\" class=\\"fd-list__icon sap-icon--globe\\"></i>
+                                    <span class=\\"fd-list__title\\">Settings Item</span>
+                                </a>
+                            </li>
+                            <li tabindex=\\"-1\\" role=\\"listitem\\" class=\\"fd-list__item fd-list__item--link\\">
+                                <a tabindex=\\"0\\" class=\\"fd-list__link fd-list__link--navigation-indicator\\" href=\\"#\\">
+                                    <i role=\\"presentation\\" class=\\"fd-list__icon sap-icon--globe\\"></i>
+                                    <span class=\\"fd-list__title\\">Settings Item</span>
+                                </a>
+                            </li>
+                            <li tabindex=\\"-1\\" role=\\"listitem\\" class=\\"fd-list__item fd-list__item--link\\">
+                                <a tabindex=\\"0\\" class=\\"fd-list__link fd-list__link--navigation-indicator\\" href=\\"#\\">
+                                    <i role=\\"presentation\\" class=\\"fd-list__icon sap-icon--globe\\"></i>
+                                    <span class=\\"fd-list__title\\">Settings Item</span>
+                                </a>
+                            </li>
+                            <li tabindex=\\"-1\\" role=\\"listitem\\" class=\\"fd-list__item fd-list__item--link\\">
+                                <a tabindex=\\"0\\" class=\\"fd-list__link fd-list__link--navigation-indicator\\" href=\\"#\\">
+                                    <i role=\\"presentation\\" class=\\"fd-list__icon sap-icon--globe\\"></i>
+                                    <span class=\\"fd-list__title\\">Settings Item</span>
+                                </a>
+                            </li>
                         </ul>
     
                         <ul class=\\"fd-list fd-list--navigation fd-list--navigation-indication fd-list--no-border fd-settings__list fd-settings__list--footer\\" role=\\"list\\">
@@ -41116,344 +41426,42 @@ exports[`Check stories > Components/Settings > Story Sm > Should match snapshot
                         </ul>
                     </div>
                 </div>
-            </div>
-            <footer class=\\"fd-dialog__footer fd-bar fd-bar--footer\\">
-                <div class=\\"fd-bar__right\\">
-                    <div class=\\"fd-bar__element\\">
-                        <button class=\\"fd-dialog__decisive-button fd-button fd-button--transparent\\">
-                            Close
-                        </button>
-                    </div>
-                </div>
-            </footer>
-        </div>
-    </section>
-
-    <section class=\\"fd-dialog-docs-static fd-dialog fd-settings fd-settings--sm fd-dialog--active\\" style=\\"width: 400px;\\">
-        <div class=\\"fd-dialog__content fd-settings__dialog-content\\" role=\\"dialog\\" aria-modal=\\"true\\" aria-labelledby=\\"dialog-title-1\\" style=\\"height: 800px;\\">
-            <div class=\\"fd-dialog__body fd-settings__dialog-body\\">
                 <div class=\\"fd-settings__detail-area\\">
                     <div class=\\"fd-bar fd-bar--header fd-settings__header\\">
                         <div class=\\"fd-bar__left\\">
-                            <div class=\\"fd-bar__element\\">
-                                <button aria-label=\\"button\\" class=\\"fd-button fd-button--transparent\\">
-                                    <i class=\\"sap-icon--navigation-left-arrow\\"></i>
-                                </button>
-                            </div>
                             <div class=\\"fd-bar__element\\">
                                 <h5 class=\\"fd-title fd-title--h5\\" aria-label=\\"text\\">Settings Item</h5>
                             </div>
                         </div>
                     </div>
     
-                    <section class=\\"fd-icon-tab-bar__panel fd-settings__content fd-settings__content--no-background\\" id=\\"section1\\" aria-labelledby=\\"tab1\\">
-                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
-                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
-                    </section>
-                </div>
-               
-            </div>
-            <footer class=\\"fd-dialog__footer fd-bar fd-bar--footer\\">
-                <div class=\\"fd-bar__right\\">
-                    <div class=\\"fd-bar__element\\">
-                        <button class=\\"fd-dialog__decisive-button fd-button fd-button--transparent\\">
-                            Close
-                        </button>
-                    </div>
-                </div>
-            </footer>
-        </div>
-    </section>
-</div>"
-`;
-
-exports[`Check stories > Components/Settings > Story XLDefault > Should match snapshot 1`] = `
-"<section class=\\"fd-dialog-docs-static fd-dialog fd-settings fd-dialog--active\\">
-    <div class=\\"fd-dialog__content fd-settings__dialog-content\\" role=\\"dialog\\" aria-modal=\\"true\\" aria-labelledby=\\"dialog-title-1\\" style=\\"height: 800px;\\">
-        <div class=\\"fd-dialog__body fd-settings__dialog-body\\" >
-            <div class=\\"fd-settings__list-area\\">
-                <div class=\\"fd-bar fd-bar--header fd-bar--header-with-subheader\\">
-                    <div class=\\"fd-bar__left\\">
-                        <div class=\\"fd-bar__element\\">
-                            <h5 class=\\"fd-title fd-title--h5\\" aria-label=\\"text\\">Settings</h5>
-                        </div>
-                    </div>
-                </div>
-                <div class=\\"fd-bar fd-bar--subheader\\">
-                    <div class=\\"fd-bar__middle\\">
-                        <div class=\\"fd-bar__element fd-bar__element--full-width\\">
-                            <input class=\\"fd-input fd-input-group__input\\" type=\\"text\\" placeholder=\\"Search\\" aria-label=\\"input\\">
-                        </div>
-                    </div>
-                </div>
-                <div class=\\"fd-settings__list-container\\">
-                    <ul class=\\"fd-list fd-list--navigation fd-list--navigation-indication fd-list--no-border fd-settings__list\\" role=\\"list\\">
-                        <li tabindex=\\"-1\\" role=\\"listitem\\" class=\\"fd-list__item fd-list__item--link\\">
-                            <a tabindex=\\"0\\" class=\\"fd-list__link fd-list__link--navigation-indicator\\" href=\\"#\\">
-                                <i role=\\"presentation\\" class=\\"fd-list__icon sap-icon--globe\\"></i>
-                                <span class=\\"fd-list__title\\">Settings Item</span>
-                            </a>
-                        </li>
-                        <li tabindex=\\"-1\\" role=\\"listitem\\" class=\\"fd-list__item fd-list__item--link\\">
-                            <a tabindex=\\"0\\" class=\\"fd-list__link fd-list__link--navigation-indicator\\" href=\\"#\\">
-                                <i role=\\"presentation\\" class=\\"fd-list__icon sap-icon--globe\\"></i>
-                                <span class=\\"fd-list__title\\">Settings Item</span>
-                            </a>
-                        </li> 
-                        <li tabindex=\\"-1\\" role=\\"listitem\\" class=\\"fd-list__item fd-list__item--link\\">
-                            <a tabindex=\\"0\\" class=\\"fd-list__link fd-list__link--navigation-indicator\\" href=\\"#\\">
-                                <i role=\\"presentation\\" class=\\"fd-list__icon sap-icon--globe\\"></i>
-                                <span class=\\"fd-list__title\\">Settings Item</span>
-                            </a>
-                        </li>
-                        <li tabindex=\\"-1\\" role=\\"listitem\\" class=\\"fd-list__item fd-list__item--link\\">
-                            <a tabindex=\\"0\\" class=\\"fd-list__link fd-list__link--navigation-indicator\\" href=\\"#\\">
-                                <i role=\\"presentation\\" class=\\"fd-list__icon sap-icon--globe\\"></i>
-                              <span class=\\"fd-list__title\\">Settings Item</span>
-                            </a>
-                        </li>
-                        <li tabindex=\\"-1\\" role=\\"listitem\\" class=\\"fd-list__item fd-list__item--link\\">
-                            <a tabindex=\\"0\\" class=\\"fd-list__link fd-list__link--navigation-indicator\\" href=\\"#\\">
-                                <i role=\\"presentation\\" class=\\"fd-list__icon sap-icon--globe\\"></i>
-                                <span class=\\"fd-list__title\\">Settings Item</span>
-                            </a>
-                        </li>
-                        <li tabindex=\\"-1\\" role=\\"listitem\\" class=\\"fd-list__item fd-list__item--link\\">
-                            <a tabindex=\\"0\\" class=\\"fd-list__link fd-list__link--navigation-indicator\\" href=\\"#\\">
-                                <i role=\\"presentation\\" class=\\"fd-list__icon sap-icon--globe\\"></i>
-                                <span class=\\"fd-list__title\\">Settings Item</span>
-                            </a>
-                        </li>
-                        <li tabindex=\\"-1\\" role=\\"listitem\\" class=\\"fd-list__item fd-list__item--link\\">
-                            <a tabindex=\\"0\\" class=\\"fd-list__link fd-list__link--navigation-indicator\\" href=\\"#\\">
-                                <i role=\\"presentation\\" class=\\"fd-list__icon sap-icon--globe\\"></i>
-                                <span class=\\"fd-list__title\\">Settings Item</span>
-                            </a>
-                        </li>
-                        <li tabindex=\\"-1\\" role=\\"listitem\\" class=\\"fd-list__item fd-list__item--link\\">
-                            <a tabindex=\\"0\\" class=\\"fd-list__link fd-list__link--navigation-indicator\\" href=\\"#\\">
-                                <i role=\\"presentation\\" class=\\"fd-list__icon sap-icon--globe\\"></i>
-                                <span class=\\"fd-list__title\\">Settings Item</span>
-                            </a>
-                        </li>
-                    </ul>
-
-                    <ul class=\\"fd-list fd-list--navigation fd-list--navigation-indication fd-list--no-border fd-settings__list fd-settings__list--footer\\" role=\\"list\\">
-                        <li tabindex=\\"-1\\" role=\\"listitem\\" class=\\"fd-list__item fd-list__item--link\\">
-                            <a tabindex=\\"0\\" class=\\"fd-list__link fd-list__link--navigation-indicator\\" href=\\"#\\">
-                                <i role=\\"presentation\\" class=\\"fd-list__icon sap-icon--globe\\"></i>
-                                <span class=\\"fd-list__title\\">Fixed Settings Item</span>
-                            </a>
-                        </li>
-                    </ul>
-                </div>
-            </div>
-            <div class=\\"fd-settings__detail-area\\">
-                <div class=\\"fd-bar fd-bar--header fd-settings__header\\">
-                    <div class=\\"fd-bar__left\\">
-                        <div class=\\"fd-bar__element\\">
-                            <h5 class=\\"fd-title fd-title--h5\\" aria-label=\\"text\\">Settings Item</h5>
-                        </div>
-                    </div>
-                </div>
-
-                <div class=\\"fd-settings__content fd-settings__content--no-background\\">
-                    Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
-                    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
-                </div>
-            </div>
-           
-        </div>
-        <footer class=\\"fd-dialog__footer fd-bar fd-bar--footer\\">
-            <div class=\\"fd-bar__right\\">
-                <div class=\\"fd-bar__element\\">
-                    <button class=\\"fd-dialog__decisive-button fd-button fd-button--transparent\\">
-                        Close
-                    </button>
-                </div>
-            </div>
-        </footer>
-    </div>
-</section>"
-`;
-
-exports[`Check stories > Components/Settings > Story Xl > Should match snapshot 1`] = `
-"<section class=\\"fd-dialog-docs-static fd-dialog fd-settings fd-dialog--active\\">
-    <div class=\\"fd-dialog__content fd-settings__dialog-content\\" role=\\"dialog\\" aria-modal=\\"true\\" aria-labelledby=\\"dialog-title-1\\" style=\\"height: 800px;\\">
-        <div class=\\"fd-dialog__body fd-settings__dialog-body\\" >
-            <div class=\\"fd-settings__list-area\\">
-                <div class=\\"fd-bar fd-bar--header fd-bar--header-with-subheader\\">
-                    <div class=\\"fd-bar__left\\">
-                        <div class=\\"fd-bar__element\\">
-                            <h5 class=\\"fd-title fd-title--h5\\" aria-label=\\"text\\">Settings</h5>
-                        </div>
-                    </div>
-                </div>
-                <div class=\\"fd-bar fd-bar--subheader\\">
-                    <div class=\\"fd-bar__middle\\">
-                        <div class=\\"fd-bar__element fd-bar__element--full-width\\">
-                            <input class=\\"fd-input fd-input-group__input\\" type=\\"text\\" placeholder=\\"Search\\" aria-label=\\"input\\">
-                        </div>
-                    </div>
-                </div>
-                <div class=\\"fd-settings__list-container\\">
-                    <ul class=\\"fd-list fd-list--navigation fd-list--navigation-indication fd-list--no-border fd-settings__list\\" role=\\"list\\">
-                        <li tabindex=\\"-1\\" role=\\"listitem\\" class=\\"fd-list__item fd-list__item--link\\">
-                            <a tabindex=\\"0\\" class=\\"fd-list__link fd-list__link--navigation-indicator\\" href=\\"#\\">
-                                <i role=\\"presentation\\" class=\\"fd-list__icon sap-icon--globe\\"></i>
-                                <span class=\\"fd-list__title\\">Settings Item</span>
-                            </a>
-                        </li>
-                        <li tabindex=\\"-1\\" role=\\"listitem\\" class=\\"fd-list__item fd-list__item--link\\">
-                            <a tabindex=\\"0\\" class=\\"fd-list__link fd-list__link--navigation-indicator\\" href=\\"#\\">
-                                <i role=\\"presentation\\" class=\\"fd-list__icon sap-icon--globe\\"></i>
-                                <span class=\\"fd-list__title\\">Settings Item</span>
-                            </a>
-                        </li>
-                        <li tabindex=\\"-1\\" role=\\"listitem\\" class=\\"fd-list__item fd-list__item--link\\">
-                            <a tabindex=\\"0\\" class=\\"fd-list__link fd-list__link--navigation-indicator\\" href=\\"#\\">
-                                <i role=\\"presentation\\" class=\\"fd-list__icon sap-icon--globe\\"></i>
-                                <span class=\\"fd-list__title\\">Settings Item</span>
-                            </a>
-                        </li>
-                        <li tabindex=\\"-1\\" role=\\"listitem\\" class=\\"fd-list__item fd-list__item--link\\">
-                            <a tabindex=\\"0\\" class=\\"fd-list__link fd-list__link--navigation-indicator\\" href=\\"#\\">
-                                <i role=\\"presentation\\" class=\\"fd-list__icon sap-icon--globe\\"></i>
-                                <span class=\\"fd-list__title\\">Settings Item</span>
-                            </a>
-                        </li>
-                        <li tabindex=\\"-1\\" role=\\"listitem\\" class=\\"fd-list__item fd-list__item--link\\">
-                            <a tabindex=\\"0\\" class=\\"fd-list__link fd-list__link--navigation-indicator\\" href=\\"#\\">
-                                <i role=\\"presentation\\" class=\\"fd-list__icon sap-icon--globe\\"></i>
-                                <span class=\\"fd-list__title\\">Settings Item</span>
-                            </a>
-                        </li>
-                        <li tabindex=\\"-1\\" role=\\"listitem\\" class=\\"fd-list__item fd-list__item--link\\">
-                            <a tabindex=\\"0\\" class=\\"fd-list__link fd-list__link--navigation-indicator\\" href=\\"#\\">
-                                <i role=\\"presentation\\" class=\\"fd-list__icon sap-icon--globe\\"></i>
-                                <span class=\\"fd-list__title\\">Settings Item</span>
-                            </a>
-                        </li> 
-                        <li tabindex=\\"-1\\" role=\\"listitem\\" class=\\"fd-list__item fd-list__item--link\\">
-                            <a tabindex=\\"0\\" class=\\"fd-list__link fd-list__link--navigation-indicator\\" href=\\"#\\">
-                                <i role=\\"presentation\\" class=\\"fd-list__icon sap-icon--globe\\"></i>
-                                <span class=\\"fd-list__title\\">Settings Item</span>
-                            </a>
-                        </li>
-                        <li tabindex=\\"-1\\" role=\\"listitem\\" class=\\"fd-list__item fd-list__item--link\\">
-                            <a tabindex=\\"0\\" class=\\"fd-list__link fd-list__link--navigation-indicator\\" href=\\"#\\">
-                                <i role=\\"presentation\\" class=\\"fd-list__icon sap-icon--globe\\"></i>
-                              <span class=\\"fd-list__title\\">Settings Item</span>
-                            </a>
-                        </li>
-                        <li tabindex=\\"-1\\" role=\\"listitem\\" class=\\"fd-list__item fd-list__item--link\\">
-                            <a tabindex=\\"0\\" class=\\"fd-list__link fd-list__link--navigation-indicator\\" href=\\"#\\">
-                                <i role=\\"presentation\\" class=\\"fd-list__icon sap-icon--globe\\"></i>
-                                <span class=\\"fd-list__title\\">Settings Item</span>
-                            </a>
-                        </li>
-                        <li tabindex=\\"-1\\" role=\\"listitem\\" class=\\"fd-list__item fd-list__item--link\\">
-                            <a tabindex=\\"0\\" class=\\"fd-list__link fd-list__link--navigation-indicator\\" href=\\"#\\">
-                                <i role=\\"presentation\\" class=\\"fd-list__icon sap-icon--globe\\"></i>
-                                <span class=\\"fd-list__title\\">Settings Item</span>
-                            </a>
-                        </li>
-                        <li tabindex=\\"-1\\" role=\\"listitem\\" class=\\"fd-list__item fd-list__item--link\\">
-                            <a tabindex=\\"0\\" class=\\"fd-list__link fd-list__link--navigation-indicator\\" href=\\"#\\">
-                                <i role=\\"presentation\\" class=\\"fd-list__icon sap-icon--globe\\"></i>
-                                <span class=\\"fd-list__title\\">Settings Item</span>
-                            </a>
-                        </li>
-                        <li tabindex=\\"-1\\" role=\\"listitem\\" class=\\"fd-list__item fd-list__item--link\\">
-                            <a tabindex=\\"0\\" class=\\"fd-list__link fd-list__link--navigation-indicator\\" href=\\"#\\">
-                                <i role=\\"presentation\\" class=\\"fd-list__icon sap-icon--globe\\"></i>
-                                <span class=\\"fd-list__title\\">Settings Item</span>
-                            </a>
-                        </li>
-                        <li tabindex=\\"-1\\" role=\\"listitem\\" class=\\"fd-list__item fd-list__item--link\\">
-                            <a tabindex=\\"0\\" class=\\"fd-list__link fd-list__link--navigation-indicator\\" href=\\"#\\">
-                                <i role=\\"presentation\\" class=\\"fd-list__icon sap-icon--globe\\"></i>
-                                <span class=\\"fd-list__title\\">Settings Item</span>
-                            </a>
-                        </li>
-                        <li tabindex=\\"-1\\" role=\\"listitem\\" class=\\"fd-list__item fd-list__item--link\\">
-                            <a tabindex=\\"0\\" class=\\"fd-list__link fd-list__link--navigation-indicator\\" href=\\"#\\">
-                                <i role=\\"presentation\\" class=\\"fd-list__icon sap-icon--globe\\"></i>
-                                <span class=\\"fd-list__title\\">Settings Item</span>
-                            </a>
-                        </li>
-                        <li tabindex=\\"-1\\" role=\\"listitem\\" class=\\"fd-list__item fd-list__item--link\\">
-                            <a tabindex=\\"0\\" class=\\"fd-list__link fd-list__link--navigation-indicator\\" href=\\"#\\">
-                                <i role=\\"presentation\\" class=\\"fd-list__icon sap-icon--globe\\"></i>
-                                <span class=\\"fd-list__title\\">Settings Item</span>
-                            </a>
-                        </li>
-                        <li tabindex=\\"-1\\" role=\\"listitem\\" class=\\"fd-list__item fd-list__item--link\\">
-                            <a tabindex=\\"0\\" class=\\"fd-list__link fd-list__link--navigation-indicator\\" href=\\"#\\">
-                                <i role=\\"presentation\\" class=\\"fd-list__icon sap-icon--globe\\"></i>
-                                <span class=\\"fd-list__title\\">Settings Item</span>
-                            </a>
-                        </li>
-                        <li tabindex=\\"-1\\" role=\\"listitem\\" class=\\"fd-list__item fd-list__item--link\\">
-                            <a tabindex=\\"0\\" class=\\"fd-list__link fd-list__link--navigation-indicator\\" href=\\"#\\">
-                                <i role=\\"presentation\\" class=\\"fd-list__icon sap-icon--globe\\"></i>
-                                <span class=\\"fd-list__title\\">Settings Item</span>
-                            </a>
-                        </li>
-                        <li tabindex=\\"-1\\" role=\\"listitem\\" class=\\"fd-list__item fd-list__item--link\\">
-                            <a tabindex=\\"0\\" class=\\"fd-list__link fd-list__link--navigation-indicator\\" href=\\"#\\">
-                                <i role=\\"presentation\\" class=\\"fd-list__icon sap-icon--globe\\"></i>
-                                <span class=\\"fd-list__title\\">Settings Item</span>
-                            </a>
-                        </li>
-                    </ul>
-
-                    <ul class=\\"fd-list fd-list--navigation fd-list--navigation-indication fd-list--no-border fd-settings__list fd-settings__list--footer\\" role=\\"list\\">
-                        <li tabindex=\\"-1\\" role=\\"listitem\\" class=\\"fd-list__item fd-list__item--link\\">
-                            <a tabindex=\\"0\\" class=\\"fd-list__link fd-list__link--navigation-indicator\\" href=\\"#\\">
-                                <i role=\\"presentation\\" class=\\"fd-list__icon sap-icon--globe\\"></i>
-                                <span class=\\"fd-list__title\\">Fixed Settings Item</span>
-                            </a>
-                        </li>
-                    </ul>
-                </div>
-            </div>
-            <div class=\\"fd-settings__detail-area\\">
-                <div class=\\"fd-bar fd-bar--header fd-settings__header\\">
-                    <div class=\\"fd-bar__left\\">
-                        <div class=\\"fd-bar__element\\">
-                            <h5 class=\\"fd-title fd-title--h5\\" aria-label=\\"text\\">Settings Item</h5>
-                        </div>
+                    <div class=\\"fd-icon-tab-bar fd-icon-tab-bar--sm fd-settings__tab-bar\\">
+                        <ul role=\\"tablist\\" class=\\"fd-icon-tab-bar__header\\">
+                            <li role=\\"presentation\\" class=\\"fd-icon-tab-bar__item\\">
+                                <a role=\\"tab\\" class=\\"fd-icon-tab-bar__tab\\" aria-selected=\\"true\\" href=\\"#section1\\" id=\\"tab1\\">
+                                    <span class=\\"fd-icon-tab-bar__tag\\">Tab Text</span>
+                                </a>
+                            </li>
+                            <li role=\\"presentation\\" class=\\"fd-icon-tab-bar__item\\">
+                                <a role=\\"tab\\" class=\\"fd-icon-tab-bar__tab\\" href=\\"#section2\\" id=\\"tab2\\">
+                                    <span class=\\"fd-icon-tab-bar__tag\\">Tab Text</span>
+                                </a>
+                            </li>
+                        </ul>
+                        <section role=\\"tabpanel\\" class=\\"fd-icon-tab-bar__panel fd-settings__content fd-settings__content--no-background\\" id=\\"section1\\" aria-labelledby=\\"tab1\\">
+                            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
+                            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
+                            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
+                            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
+                            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
+                            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
+                        </section>
+                        <section role=\\"tabpanel\\" class=\\"fd-icon-tab-bar__panel fd-settings__content\\" id=\\"section2\\" aria-labelledby=\\"tab2\\" hidden>
+                            Section
+                        </section>
                     </div>
                 </div>
-
-                <div class=\\"fd-icon-tab-bar fd-icon-tab-bar--sm fd-settings__tab-bar\\">
-                    <ul role=\\"tablist\\" class=\\"fd-icon-tab-bar__header\\">
-                        <li role=\\"presentation\\" class=\\"fd-icon-tab-bar__item\\">
-                            <a role=\\"tab\\" class=\\"fd-icon-tab-bar__tab\\" aria-selected=\\"true\\" href=\\"#section1\\" id=\\"tab1\\">
-                                <span class=\\"fd-icon-tab-bar__tag\\">Tab Text</span>
-                            </a>
-                        </li>
-                        <li role=\\"presentation\\" class=\\"fd-icon-tab-bar__item\\">
-                            <a role=\\"tab\\" class=\\"fd-icon-tab-bar__tab\\" href=\\"#section2\\" id=\\"tab2\\">
-                                <span class=\\"fd-icon-tab-bar__tag\\">Tab Text</span>
-                            </a>
-                        </li>
-                    </ul>
-                    <section role=\\"tabpanel\\" class=\\"fd-icon-tab-bar__panel fd-settings__content fd-settings__content--no-background\\" id=\\"section1\\" aria-labelledby=\\"tab1\\">
-                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
-                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
-                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
-                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
-                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
-                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
-                    </section>
-                    <section role=\\"tabpanel\\" class=\\"fd-icon-tab-bar__panel fd-settings__content\\" id=\\"section2\\" aria-labelledby=\\"tab2\\" hidden>
-                        Section
-                    </section>
-                </div>
             </div>
-           
         </div>
         <footer class=\\"fd-dialog__footer fd-bar fd-bar--footer\\">
             <div class=\\"fd-bar__right\\">