Change containers example

Author: agonzalez97

website/screens/components/quick-nav/code/examples/withContent.ts

@@ -21,57 +21,47 @@ const code = `() => {
   return (
     <DxcInset space="2rem">
       <DxcFlex direction="row">
-        <DxcInset space="2rem">
+        <DxcFlex direction="column" gap="2rem">
           <div id="accordion">
-            <DxcHeading
-              level={2}
-              text="Accordion"
-              margin={{ top: "xsmall", bottom: "xsmall" }}
-            />
-            <div id="accordion-code">
-              <DxcHeading
-                level={3}
-                text="Code"
-                margin={{ top: "xsmall", bottom: "xsmall" }}
-              />
-              <DxcParagraph>
-                Accordions are used to group similar content and hide or show it
-                depending on user needs or preferences. Accordions give users
-                more granular control over the interface and help digest content
-                in stages, rather than all at once.
-              </DxcParagraph>
-            </div>
-            <div id="accordion-usage">
-              <DxcHeading
-                level={3}
-                text="Usage"
-                margin={{ top: "xsmall", bottom: "xsmall" }}
-              />
-              <DxcParagraph>
-                The accordion component delivers large amounts of content in a
-                small space through progressive disclosure.
-              </DxcParagraph>
-            </div>
+            <DxcFlex direction="column" gap="1rem">
+              <DxcHeading level={2} text="Accordion" />
+              <div id="accordion-code">
+                <DxcFlex direction="column" gap="1rem">
+                  <DxcHeading level={3} text="Code" />
+                  <DxcParagraph>
+                    Accordions are used to group similar content and hide or
+                    show it depending on user needs or preferences. Accordions
+                    give users more granular control over the interface and help
+                    digest content in stages, rather than all at once.
+                  </DxcParagraph>
+                </DxcFlex>
+              </div>
+              <div id="accordion-usage">
+                <DxcFlex direction="column" gap="1rem">
+                  <DxcHeading level={3} text="Usage" />
+                  <DxcParagraph>
+                    The accordion component delivers large amounts of content in
+                    a small space through progressive disclosure.
+                  </DxcParagraph>
+                </DxcFlex>
+              </div>
+            </DxcFlex>
           </div>
           <div id="alert">
-            <DxcHeading
-              level={2}
-              text="Alert"
-              margin={{ top: "xsmall", bottom: "xsmall" }}
-            />
-            <div id="alert-code">
-              <DxcHeading
-                level={3}
-                text="Code"
-                margin={{ top: "xsmall", bottom: "xsmall" }}
-              />
-              <DxcParagraph>
-                Alert messages are meant to provide contextual feedback about
-                important changes in the interface.
-              </DxcParagraph>
-            </div>
+            <DxcFlex direction="column" gap="1rem">
+              <DxcHeading level={2} text="Alert" />
+              <div id="alert-code">
+                <DxcFlex direction="column" gap="1rem">
+                  <DxcHeading level={3} text="Code" />
+                  <DxcParagraph>
+                    Alert messages are meant to provide contextual feedback
+                    about important changes in the interface.
+                  </DxcParagraph>
+                </DxcFlex>
+              </div>
+            </DxcFlex>
           </div>
-        </DxcInset>
+        </DxcFlex>
         <DxcInset space="2rem">
           <DxcQuickNav links={links}></DxcQuickNav>
         </DxcInset>