@patternfly/patternfly 6.5.0-prerelease.4 → 6.5.0-prerelease.41

package/docs/demos/Nav/examples/Nav.md

@@ -15,7 +15,7 @@ section: components
       <span class="pf-v6-c-button__text">Skip to content</span>
     </a>
   </div>
-  <header class="pf-v6-c-masthead" id="nav-basic-example-masthead">
+  <header class="pf-v6-c-masthead" id="nav-basic-example-docked">
     <div class="pf-v6-c-masthead__main">
       <span class="pf-v6-c-masthead__toggle">
         <button
@@ -57,7 +57,7 @@ section: components
                 y1="2.25860997e-13%"
                 x2="32%"
                 y2="100%"
-                id="linearGradient-nav-basic-example-masthead"
+                id="linearGradient-nav-basic-example-docked"
               >
                 <stop stop-color="#2B9AF3" offset="0%" />
                 <stop
@@ -111,11 +111,11 @@ section: components
                 />
                 <path
                   d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
-                  fill="url(#linearGradient-nav-basic-example-masthead)"
+                  fill="url(#linearGradient-nav-basic-example-docked)"
                 />
                 <path
                   d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
-                  fill="url(#linearGradient-nav-basic-example-masthead)"
+                  fill="url(#linearGradient-nav-basic-example-docked)"
                   transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
                 />
               </g>
@@ -127,7 +127,7 @@ section: components
     <div class="pf-v6-c-masthead__content">
       <div
         class="pf-v6-c-toolbar pf-m-static"
-        id="nav-basic-example-masthead-toolbar"
+        id="nav-basic-example-docked-toolbar"
       >
         <div class="pf-v6-c-toolbar__content">
           <div class="pf-v6-c-toolbar__content-section">
@@ -336,7 +336,7 @@ section: components
       <span class="pf-v6-c-button__text">Skip to content</span>
     </a>
   </div>
-  <header class="pf-v6-c-masthead" id="nav-grouped-nav-example-masthead">
+  <header class="pf-v6-c-masthead" id="nav-grouped-nav-example-docked">
     <div class="pf-v6-c-masthead__main">
       <span class="pf-v6-c-masthead__toggle">
         <button
@@ -378,7 +378,7 @@ section: components
                 y1="2.25860997e-13%"
                 x2="32%"
                 y2="100%"
-                id="linearGradient-nav-grouped-nav-example-masthead"
+                id="linearGradient-nav-grouped-nav-example-docked"
               >
                 <stop stop-color="#2B9AF3" offset="0%" />
                 <stop
@@ -432,11 +432,11 @@ section: components
                 />
                 <path
                   d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
-                  fill="url(#linearGradient-nav-grouped-nav-example-masthead)"
+                  fill="url(#linearGradient-nav-grouped-nav-example-docked)"
                 />
                 <path
                   d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
-                  fill="url(#linearGradient-nav-grouped-nav-example-masthead)"
+                  fill="url(#linearGradient-nav-grouped-nav-example-docked)"
                   transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
                 />
               </g>
@@ -448,7 +448,7 @@ section: components
     <div class="pf-v6-c-masthead__content">
       <div
         class="pf-v6-c-toolbar pf-m-static"
-        id="nav-grouped-nav-example-masthead-toolbar"
+        id="nav-grouped-nav-example-docked-toolbar"
       >
         <div class="pf-v6-c-toolbar__content">
           <div class="pf-v6-c-toolbar__content-section">
@@ -689,7 +689,7 @@ section: components
       <span class="pf-v6-c-button__text">Skip to content</span>
     </a>
   </div>
-  <header class="pf-v6-c-masthead" id="nav-expandable-example-masthead">
+  <header class="pf-v6-c-masthead" id="nav-expandable-example-docked">
     <div class="pf-v6-c-masthead__main">
       <span class="pf-v6-c-masthead__toggle">
         <button
@@ -731,7 +731,7 @@ section: components
                 y1="2.25860997e-13%"
                 x2="32%"
                 y2="100%"
-                id="linearGradient-nav-expandable-example-masthead"
+                id="linearGradient-nav-expandable-example-docked"
               >
                 <stop stop-color="#2B9AF3" offset="0%" />
                 <stop
@@ -785,11 +785,11 @@ section: components
                 />
                 <path
                   d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
-                  fill="url(#linearGradient-nav-expandable-example-masthead)"
+                  fill="url(#linearGradient-nav-expandable-example-docked)"
                 />
                 <path
                   d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
-                  fill="url(#linearGradient-nav-expandable-example-masthead)"
+                  fill="url(#linearGradient-nav-expandable-example-docked)"
                   transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
                 />
               </g>
@@ -801,7 +801,7 @@ section: components
     <div class="pf-v6-c-masthead__content">
       <div
         class="pf-v6-c-toolbar pf-m-static"
-        id="nav-expandable-example-masthead-toolbar"
+        id="nav-expandable-example-docked-toolbar"
       >
         <div class="pf-v6-c-toolbar__content">
           <div class="pf-v6-c-toolbar__content-section">
@@ -1102,7 +1102,7 @@ section: components
       <span class="pf-v6-c-button__text">Skip to content</span>
     </a>
   </div>
-  <header class="pf-v6-c-masthead" id="nav-horizontal-example-masthead">
+  <header class="pf-v6-c-masthead" id="nav-horizontal-example-docked">
     <div class="pf-v6-c-masthead__main">
       <div class="pf-v6-c-masthead__brand">
         <a class="pf-v6-c-masthead__logo" href="#">
@@ -1114,7 +1114,7 @@ section: components
                 y1="2.25860997e-13%"
                 x2="32%"
                 y2="100%"
-                id="linearGradient-nav-horizontal-example-masthead"
+                id="linearGradient-nav-horizontal-example-docked"
               >
                 <stop stop-color="#2B9AF3" offset="0%" />
                 <stop
@@ -1168,11 +1168,11 @@ section: components
                 />
                 <path
                   d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
-                  fill="url(#linearGradient-nav-horizontal-example-masthead)"
+                  fill="url(#linearGradient-nav-horizontal-example-docked)"
                 />
                 <path
                   d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
-                  fill="url(#linearGradient-nav-horizontal-example-masthead)"
+                  fill="url(#linearGradient-nav-horizontal-example-docked)"
                   transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
                 />
               </g>
@@ -1184,7 +1184,7 @@ section: components
     <div class="pf-v6-c-masthead__content">
       <div
         class="pf-v6-c-toolbar pf-m-static"
-        id="nav-horizontal-example-masthead-toolbar"
+        id="nav-horizontal-example-docked-toolbar"
       >
         <div class="pf-v6-c-toolbar__content">
           <div class="pf-v6-c-toolbar__content-section">
@@ -1194,7 +1194,7 @@ section: components
             >
               <nav
                 class="pf-v6-c-nav pf-m-scrollable pf-m-horizontal"
-                id="nav-horizontal-example-masthead-horizontal-nav"
+                id="nav-horizontal-example-docked-horizontal-nav"
                 aria-label="Global"
               >
                 <div class="pf-v6-c-nav__scroll-button">
@@ -1417,7 +1417,7 @@ section: components
       <span class="pf-v6-c-button__text">Skip to content</span>
     </a>
   </div>
-  <header class="pf-v6-c-masthead" id="nav-horizontal-subnav-example-masthead">
+  <header class="pf-v6-c-masthead" id="nav-horizontal-subnav-example-docked">
     <div class="pf-v6-c-masthead__main">
       <span class="pf-v6-c-masthead__toggle">
         <button
@@ -1459,7 +1459,7 @@ section: components
                 y1="2.25860997e-13%"
                 x2="32%"
                 y2="100%"
-                id="linearGradient-nav-horizontal-subnav-example-masthead"
+                id="linearGradient-nav-horizontal-subnav-example-docked"
               >
                 <stop stop-color="#2B9AF3" offset="0%" />
                 <stop
@@ -1513,11 +1513,11 @@ section: components
                 />
                 <path
                   d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
-                  fill="url(#linearGradient-nav-horizontal-subnav-example-masthead)"
+                  fill="url(#linearGradient-nav-horizontal-subnav-example-docked)"
                 />
                 <path
                   d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
-                  fill="url(#linearGradient-nav-horizontal-subnav-example-masthead)"
+                  fill="url(#linearGradient-nav-horizontal-subnav-example-docked)"
                   transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
                 />
               </g>
@@ -1529,7 +1529,7 @@ section: components
     <div class="pf-v6-c-masthead__content">
       <div
         class="pf-v6-c-toolbar pf-m-static"
-        id="nav-horizontal-subnav-example-masthead-toolbar"
+        id="nav-horizontal-subnav-example-docked-toolbar"
       >
         <div class="pf-v6-c-toolbar__content">
           <div class="pf-v6-c-toolbar__content-section">
@@ -1765,39 +1765,9 @@ section: components
   </div>
   <header
     class="pf-v6-c-masthead pf-m-display-stack pf-m-display-inline-on-lg"
-    id="nav-horizontal-example-masthead"
+    id="nav-horizontal-example-docked"
   >
     <div class="pf-v6-c-masthead__main">
-      <span class="pf-v6-c-masthead__toggle">
-        <button
-          class="pf-v6-c-button pf-m-hamburger pf-m-plain"
-          type="button"
-          aria-label="Global navigation"
-        >
-          <span class="pf-v6-c-button__icon">
-            <svg
-              viewBox="0 0 10 10"
-              class="pf-v6-c-button--hamburger-icon pf-v6-svg"
-              width="1em"
-              height="1em"
-            >
-              <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
-              <path
-                class="pf-v6-c-button--hamburger-icon--middle"
-                d="M1,5 L9,5"
-              />
-              <path
-                class="pf-v6-c-button--hamburger-icon--arrow"
-                d="M1,5 L1,5 L1,5"
-              />
-              <path
-                class="pf-v6-c-button--hamburger-icon--bottom"
-                d="M9,9 L1,9"
-              />
-            </svg>
-          </span>
-        </button>
-      </span>
       <div class="pf-v6-c-masthead__brand">
         <a class="pf-v6-c-masthead__logo" href="#">
           <svg height="37px" viewBox="0 0 679 158">
@@ -1808,7 +1778,7 @@ section: components
                 y1="2.25860997e-13%"
                 x2="32%"
                 y2="100%"
-                id="linearGradient-nav-horizontal-example-masthead"
+                id="linearGradient-nav-horizontal-example-docked"
               >
                 <stop stop-color="#2B9AF3" offset="0%" />
                 <stop
@@ -1862,11 +1832,11 @@ section: components
                 />
                 <path
                   d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
-                  fill="url(#linearGradient-nav-horizontal-example-masthead)"
+                  fill="url(#linearGradient-nav-horizontal-example-docked)"
                 />
                 <path
                   d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
-                  fill="url(#linearGradient-nav-horizontal-example-masthead)"
+                  fill="url(#linearGradient-nav-horizontal-example-docked)"
                   transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
                 />
               </g>
@@ -1878,7 +1848,7 @@ section: components
     <div class="pf-v6-c-masthead__content">
       <div
         class="pf-v6-c-toolbar pf-m-static"
-        id="nav-horizontal-example-masthead-toolbar"
+        id="nav-horizontal-example-docked-toolbar"
       >
         <div class="pf-v6-c-toolbar__content">
           <div class="pf-v6-c-toolbar__content-section">
@@ -1888,7 +1858,7 @@ section: components
             >
               <nav
                 class="pf-v6-c-nav pf-m-scrollable pf-m-horizontal"
-                id="nav-horizontal-example-masthead-horizontal-nav"
+                id="nav-horizontal-example-docked-horizontal-nav"
                 aria-label="Global"
               >
                 <div class="pf-v6-c-nav__scroll-button">
@@ -2123,3 +2093,270 @@ section: components
 </div>
 
 ```
+
+### Docked nav
+
+```html isFullscreen isBeta
+<div class="pf-v6-c-page pf-m-dock pf-m-no-sidebar" id="nav-docked-example">
+  <div class="pf-v6-c-page__dock">
+    <div class="pf-v6-c-skip-to-content">
+      <a
+        class="pf-v6-c-button pf-m-primary"
+        href="#main-content-nav-docked-example"
+      >
+        <span class="pf-v6-c-button__text">Skip to content</span>
+      </a>
+    </div>
+    <header
+      class="pf-v6-c-masthead pf-m-docked"
+      id="nav-docked-example-masthead"
+    >
+      <div class="pf-v6-c-masthead__main">
+        <div class="pf-v6-c-masthead__brand">
+          <a class="pf-v6-c-masthead__logo" href="#">
+            <svg width="37px" height="37px" viewBox="0 0 158 158">
+              <title>PF-HorizontalLogo-Color</title>
+              <defs>
+                <linearGradient
+                  x1="68%"
+                  y1="2.25860997e-13%"
+                  x2="32%"
+                  y2="100%"
+                  id="linearGradient-1"
+                >
+                  <stop stop-color="#2B9AF3" offset="0%" />
+                  <stop
+                    stop-color="#73BCF7"
+                    stop-opacity="0.502212631"
+                    offset="100%"
+                  />
+                </linearGradient>
+              </defs>
+              <g
+                id="PF-IconLogo-color"
+                stroke="none"
+                stroke-width="1"
+                fill="none"
+                fill-rule="evenodd"
+              >
+                <g id="Logo">
+                  <path
+                    d="M61.826087,0 L158,0 L158,96.173913 L147.695652,96.173913 C100.271201,96.173913 61.826087,57.7287992 61.826087,10.3043478 L61.826087,0 L61.826087,0 Z"
+                    id="Rectangle-Copy-17"
+                    fill="#0066CC"
+                  />
+                  <path
+                    d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
+                    id="Path-2"
+                    fill="url(#linearGradient-1)"
+                  />
+                  <path
+                    d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
+                    id="Path-2"
+                    fill="url(#linearGradient-1)"
+                    transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
+                  />
+                </g>
+              </g>
+            </svg>
+          </a>
+        </div>
+      </div>
+      <hr class="pf-v6-c-divider" />
+      <div class="pf-v6-c-masthead__content">
+        <div
+          class="pf-v6-c-toolbar pf-m-vertical pf-m-static"
+          id="nav-docked-example-masthead-toolbar"
+        >
+          <div class="pf-v6-c-toolbar__content">
+            <div class="pf-v6-c-toolbar__content-section">
+              <nav class="pf-v6-c-nav pf-m-docked" aria-label="Global">
+                <ul class="pf-v6-c-nav__list" role="list">
+                  <li class="pf-v6-c-nav__item">
+                    <a href="#" class="pf-v6-c-nav__link" aria-label="Cube">
+                      <span class="pf-v6-c-nav__link-icon">
+                        <i class="fas fa-fw fa-cube" aria-hidden="true"></i>
+                      </span>
+                    </a>
+                  </li>
+                  <li class="pf-v6-c-nav__item">
+                    <a
+                      href="#"
+                      class="pf-v6-c-nav__link pf-m-current"
+                      aria-current="page"
+                      aria-label="Folder"
+                    >
+                      <span class="pf-v6-c-nav__link-icon">
+                        <i class="fas fa-fw fa-folder" aria-hidden="true"></i>
+                      </span>
+                    </a>
+                  </li>
+                  <li class="pf-v6-c-nav__item">
+                    <a href="#" class="pf-v6-c-nav__link" aria-label="Cloud">
+                      <span class="pf-v6-c-nav__link-icon">
+                        <i class="fas fa-fw fa-cloud" aria-hidden="true"></i>
+                      </span>
+                    </a>
+                  </li>
+                  <li class="pf-v6-c-nav__item">
+                    <a href="#" class="pf-v6-c-nav__link" aria-label="Code">
+                      <span class="pf-v6-c-nav__link-icon">
+                        <i class="fas fa-fw fa-code" aria-hidden="true"></i>
+                      </span>
+                    </a>
+                  </li>
+                </ul>
+              </nav>
+
+              <div
+                class="pf-v6-c-toolbar__group pf-m-align-end pf-m-spacer-none pf-m-spacer-md-on-md pf-m-action-group-plain"
+              >
+                <div
+                  class="pf-v6-c-toolbar__group pf-m-hidden pf-m-visible-on-lg pf-m-action-group-plain"
+                >
+                  <div class="pf-v6-c-toolbar__item">
+                    <button
+                      class="pf-v6-c-menu-toggle pf-m-plain"
+                      type="button"
+                      aria-expanded="false"
+                      aria-label="Application launcher"
+                    >
+                      <span class="pf-v6-c-menu-toggle__icon">
+                        <i class="fas fa-th" aria-hidden="true"></i>
+                      </span>
+                    </button>
+                  </div>
+                  <div class="pf-v6-c-toolbar__item">
+                    <button
+                      class="pf-v6-c-menu-toggle pf-m-settings pf-m-plain"
+                      type="button"
+                      aria-expanded="false"
+                      aria-label="Settings"
+                    >
+                      <span class="pf-v6-c-menu-toggle__icon">
+                        <i class="fas fa-cog" aria-hidden="true"></i>
+                      </span>
+                    </button>
+                  </div>
+                  <div class="pf-v6-c-toolbar__item">
+                    <button
+                      class="pf-v6-c-menu-toggle pf-m-plain"
+                      type="button"
+                      aria-expanded="false"
+                      aria-label="Help"
+                    >
+                      <span class="pf-v6-c-menu-toggle__icon">
+                        <i class="fas fa-question-circle" aria-hidden="true"></i>
+                      </span>
+                    </button>
+                  </div>
+                </div>
+
+                <div class="pf-v6-c-toolbar__item pf-m-hidden-on-lg">
+                  <button
+                    class="pf-v6-c-menu-toggle pf-m-plain"
+                    type="button"
+                    aria-expanded="false"
+                    aria-label="Actions"
+                  >
+                    <span class="pf-v6-c-menu-toggle__icon">
+                      <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
+                    </span>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </header>
+  </div>
+  <div class="pf-v6-c-page__main-container" tabindex="-1">
+    <main
+      class="pf-v6-c-page__main"
+      tabindex="-1"
+      id="main-content-nav-docked-example"
+    >
+      <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
+        <div class="pf-v6-c-page__main-body">
+          <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
+            <ol class="pf-v6-c-breadcrumb__list" role="list">
+              <li class="pf-v6-c-breadcrumb__item">
+                <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
+              </li>
+              <li class="pf-v6-c-breadcrumb__item">
+                <span class="pf-v6-c-breadcrumb__item-divider">
+                  <i class="fas fa-angle-right" aria-hidden="true"></i>
+                </span>
+
+                <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
+              </li>
+              <li class="pf-v6-c-breadcrumb__item">
+                <span class="pf-v6-c-breadcrumb__item-divider">
+                  <i class="fas fa-angle-right" aria-hidden="true"></i>
+                </span>
+
+                <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
+              </li>
+              <li class="pf-v6-c-breadcrumb__item">
+                <span class="pf-v6-c-breadcrumb__item-divider">
+                  <i class="fas fa-angle-right" aria-hidden="true"></i>
+                </span>
+
+                <a
+                  href="#"
+                  class="pf-v6-c-breadcrumb__link pf-m-current"
+                  aria-current="page"
+                >Section landing</a>
+              </li>
+            </ol>
+          </nav>
+        </div>
+      </section>
+      <section class="pf-v6-c-page__main-section pf-m-limit-width">
+        <div class="pf-v6-c-page__main-body">
+          <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
+          <p class="pf-v6-c-content--p">This is a full page demo.</p>
+        </div>
+      </section>
+      <section class="pf-v6-c-page__main-section pf-m-limit-width">
+        <div class="pf-v6-c-page__main-body">
+          <div class="pf-v6-l-gallery pf-m-gutter">
+            <div class="pf-v6-c-card">
+              <div class="pf-v6-c-card__body">This is a card</div>
+            </div>
+            <div class="pf-v6-c-card">
+              <div class="pf-v6-c-card__body">This is a card</div>
+            </div>
+            <div class="pf-v6-c-card">
+              <div class="pf-v6-c-card__body">This is a card</div>
+            </div>
+            <div class="pf-v6-c-card">
+              <div class="pf-v6-c-card__body">This is a card</div>
+            </div>
+            <div class="pf-v6-c-card">
+              <div class="pf-v6-c-card__body">This is a card</div>
+            </div>
+            <div class="pf-v6-c-card">
+              <div class="pf-v6-c-card__body">This is a card</div>
+            </div>
+            <div class="pf-v6-c-card">
+              <div class="pf-v6-c-card__body">This is a card</div>
+            </div>
+            <div class="pf-v6-c-card">
+              <div class="pf-v6-c-card__body">This is a card</div>
+            </div>
+            <div class="pf-v6-c-card">
+              <div class="pf-v6-c-card__body">This is a card</div>
+            </div>
+            <div class="pf-v6-c-card">
+              <div class="pf-v6-c-card__body">This is a card</div>
+            </div>
+          </div>
+        </div>
+      </section>
+    </main>
+  </div>
+</div>
+
+```