From: Simone Wood <swood@clarity-innovations.com>
Date: Wed, 4 Mar 2020 21:04:16 +0000 (-0800)
Subject: docs: fix vercial tabs example classes #12006.
X-Git-Tag: v6.6.2^2~5^2
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=refs%2Fpull%2F12012%2Fhead;p=thirdparty%2Ffoundation%2Ffoundation-sites.git

docs: fix vercial tabs example classes #12006.
---

diff --git a/docs/pages/tabs.md b/docs/pages/tabs.md
index 9ed803c80..95dead8cf 100644
--- a/docs/pages/tabs.md
+++ b/docs/pages/tabs.md
@@ -82,7 +82,7 @@ Put it all together, and we get this:
 
 ## Vertical Tabs
 
-Add the `.vertical` class to a tabstrip to stack tabs vertically. You can also place the tabstrip and the tab contents in a grid to make them sit side-by-side.
+Add the `.vertical` class to a tabstrip and tab contents to stack tabs vertically. You can also remove the `.grid-margin-x` class from the wrapping div to make them sit side-by-side.
 
 <p>
   <a class="" data-open-video="3:46"><img src="{{root}}assets/img/icons/watch-video-icon.svg" class="video-icon" height="30" width="30" alt=""> Watch this part in video</a>
@@ -94,7 +94,7 @@ Add the `.vertical` class to a tabstrip to stack tabs vertically. You can also p
 
 ```html_example
 <div class="grid-container">
-  <div class="grid-x grid-margin-x">
+  <div class="grid-x">
     <div class="cell medium-3">
       <ul class="vertical tabs" data-tabs id="example-tabs">
         <li class="tabs-title is-active"><a href="#panel1v" aria-selected="true">Tab 1</a></li>
@@ -106,7 +106,7 @@ Add the `.vertical` class to a tabstrip to stack tabs vertically. You can also p
       </ul>
     </div>
     <div class="cell medium-9">
-      <div class="tabs-content" data-tabs-content="example-tabs">
+      <div class="tabs-content vertical" data-tabs-content="example-tabs">
         <div class="tabs-panel is-active" id="panel1v">
           <p>One</p>
           <p>Check me out! I'm a super cool Tab panel with text content!</p>