simplify layout on homepage

Signed-off-by: kgcreative <[email protected]>
kgcreative · Dec 9, 2024 · 2dee875 · 2dee875
1 parent 143a5e5
commit 2dee875
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 36 deletions.
diff --git a/src-docs/src/components/guide_components.scss b/src-docs/src/components/guide_components.scss
@@ -344,7 +344,17 @@ body {
   }
 }
 
-.guideHomePage__blockformContainer {
+.guideHomePage__benefitsContainer, .guideHomePage__featuredComponents {
+    padding-left: $ouiSizeL;
+    padding-right: $ouiSizeL;
+}
+.guideHomePage__benefitsContainer {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  gap: $ouiSizeL;
+}
+
+.guideHomePage__featuredComponents {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
   gap: $ouiSizeL;

diff --git a/src-docs/src/views/home/home_view.js b/src-docs/src/views/home/home_view.js
@@ -85,42 +85,36 @@ export const HomeView = () => (
           </OuiFlexItem>
         </OuiFlexGroup>
       </OuiPanel>
-      <OuiSpacer size="xxl" />
-      <OuiFlexGrid columns={3}>
-        <OuiFlexItem>
-          <OuiCard
-            icon={<OuiIcon size="l" type="accessibility" />}
-            layout="horizontal"
-            display="plain"
-            titleSize="xs"
-            title="Accessible to everyone"
-            description="Uses high contrast, color-blind safe palettes and tested with most
+      <OuiSpacer size="xl" />
+      <div className="guideHomePage__benefitsContainer">
+        <OuiCard
+          icon={<OuiIcon size="l" type="accessibility" />}
+          layout="horizontal"
+          display="plain"
+          titleSize="xs"
+          title="Accessible to everyone"
+          description="Uses high contrast, color-blind safe palettes and tested with most
         assistive technology."
-          />
-        </OuiFlexItem>
-        <OuiFlexItem>
-          <OuiCard
-            icon={<OuiIcon size="l" type="controlsHorizontal" />}
-            layout="horizontal"
-            display="plain"
-            titleSize="xs"
-            title="Flexible and composable"
-            description="Configurable enough to meet the needs of a wide array of contexts while maintaining brand and low-level consistency."
-          />
-        </OuiFlexItem>
-        <OuiFlexItem>
-          <OuiCard
-            icon={<OuiIcon size="l" type="documentEdit" />}
-            layout="horizontal"
-            display="plain"
-            titleSize="xs"
-            title="Well documented and tested"
-            description="Code is friendly to the novice and expert alike."
-          />
-        </OuiFlexItem>
-      </OuiFlexGrid>
-      <OuiSpacer size="xxl" />
-      <div className="guideHomePage__blockformContainer">
+        />
+        <OuiCard
+          icon={<OuiIcon size="l" type="controlsHorizontal" />}
+          layout="horizontal"
+          display="plain"
+          titleSize="xs"
+          title="Flexible and composable"
+          description="Configurable enough to meet the needs of a wide array of contexts while maintaining brand and low-level consistency."
+        />
+        <OuiCard
+          icon={<OuiIcon size="l" type="documentEdit" />}
+          layout="horizontal"
+          display="plain"
+          titleSize="xs"
+          title="Well documented and tested"
+          description="Code is friendly to the novice and expert alike."
+        />
+      </div>
+      <OuiSpacer size="xl" />
+      <div className="guideHomePage__featuredComponents">
         <OuiCard
           hasBorder
           href="#/navigation/button"