fix: subtitles

sbb-design-systems · Aug 28, 2023 · faac62c · faac62c
1 parent dd1da50
commit faac62c
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 15 deletions.
diff --git a/src/storybook/pages/search-overlay/search-overlay-instant-results.stories.tsx b/src/storybook/pages/search-overlay/search-overlay-instant-results.stories.tsx
@@ -105,24 +105,36 @@ const Template = (args): JSX.Element => (
             </sbb-form-field>
             <div class="search-result__wrapper">
               <a href="http://www.sbb.ch/" class="search-result-item">
-                <sbb-title visual-level="6" negative>
-                  Result title 1<span class="subtitle">Lorem ipsum subtitle</span>
-                </sbb-title>
+                <div>
+                  <sbb-title visual-level="6" negative>
+                    Result title 1
+                  </sbb-title>
+                  <p class="subtitle">Lorem ipsum subtitle</p>
+                </div>
               </a>
               <a href="http://www.sbb.ch/" class="search-result-item">
-                <sbb-title visual-level="6" negative>
-                  Result title 2<span class="subtitle">Lorem ipsum subtitle</span>
-                </sbb-title>
+                <div>
+                  <sbb-title visual-level="6" negative>
+                    Result title 2
+                  </sbb-title>
+                  <p class="subtitle">Lorem ipsum subtitle</p>
+                </div>
               </a>
               <a href="http://www.sbb.ch/" class="search-result-item">
-                <sbb-title visual-level="6" negative>
-                  Result title 3<span class="subtitle">Lorem ipsum subtitle</span>
-                </sbb-title>
+                <div>
+                  <sbb-title visual-level="6" negative>
+                    Result title 3
+                  </sbb-title>
+                  <p class="subtitle">Lorem ipsum subtitle</p>
+                </div>
               </a>
               <a href="http://www.sbb.ch/" class="search-result-item">
-                <sbb-title visual-level="6" negative>
-                  Result title 4<span class="subtitle">Lorem ipsum subtitle</span>
-                </sbb-title>
+                <div>
+                  <sbb-title visual-level="6" negative>
+                    Result title 3
+                  </sbb-title>
+                  <p class="subtitle">Lorem ipsum subtitle</p>
+                </div>
                 <div class="result-image">
                   <img
                     alt="example"
@@ -131,9 +143,12 @@ const Template = (args): JSX.Element => (
                 </div>
               </a>
               <a href="http://www.sbb.ch/" class="search-result-item">
-                <sbb-title visual-level="6" negative>
-                  Result title 5<span class="subtitle">Lorem ipsum subtitle</span>
-                </sbb-title>
+                <div>
+                  <sbb-title visual-level="6" negative>
+                    Result title 5
+                  </sbb-title>
+                  <p class="subtitle">Lorem ipsum subtitle</p>
+                </div>
               </a>
               <div class="show-more">
                 <sbb-button variant="primary">Show all 13 results</sbb-button>

diff --git a/src/storybook/pages/search-overlay/search-overlay.scss b/src/storybook/pages/search-overlay/search-overlay.scss
@@ -55,6 +55,7 @@ $timetable-margin-block: 7vh;
 
     display: block;
     color: var(--sbb-color-smoke-default);
+    margin: 0;
   }
 
   .result-image {