From 9e57dfadac9cd924c35b7ff5b3d82981b59502de Mon Sep 17 00:00:00 2001
From: Vipin Mishra <52159805+thevipinmishra@users.noreply.github.com>
Date: Thu, 4 Aug 2022 10:22:41 +0530
Subject: [PATCH] Added new example in `examples/features` page. (#36660)

* Added new example in examples/features

* Fix indentation, other suggested changes from review

* fix: heading structure
---
 .../docs/5.2/examples/features/features.css   |  5 ++
 .../docs/5.2/examples/features/index.html     | 59 +++++++++++++++++++
 2 files changed, 64 insertions(+)

diff --git a/site/content/docs/5.2/examples/features/features.css b/site/content/docs/5.2/examples/features/features.css
index 619222364d42..b5d658f6b4e0 100644
--- a/site/content/docs/5.2/examples/features/features.css
+++ b/site/content/docs/5.2/examples/features/features.css
@@ -29,3 +29,8 @@
   background-position: center center;
   background-size: cover;
 }
+
+.feature-icon-small {
+  width: 3rem;
+  height: 3rem;
+}
diff --git a/site/content/docs/5.2/examples/features/index.html b/site/content/docs/5.2/examples/features/index.html
index 4da23239f0e6..c134a0a919bd 100644
--- a/site/content/docs/5.2/examples/features/index.html
+++ b/site/content/docs/5.2/examples/features/index.html
@@ -285,4 +285,63 @@ <h3 class="fw-bold mb-0 fs-4">Featured title</h3>
       </div>
     </div>
   </div>
+
+  <div class="b-example-divider"></div>
+
+  <div class="container px-4 py-5">
+    <h2 class="pb-2 border-bottom">Features with title</h2>
+
+    <div class="row row-cols-1 row-cols-md-2 align-items-md-center g-5 py-5">
+      <div class="d-flex flex-column align-items-start gap-2">
+        <h3 class="fw-bold">Left-aligned title explaining these awesome features</h3>
+        <p class="text-muted">Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p>
+        <a href="#" class="btn btn-primary btn-lg">Primary button</a>
+      </div>
+      <div class="row row-cols-1 row-cols-sm-2 g-4">
+        <div class="d-flex flex-column gap-2">
+          <div
+            class="feature-icon-small d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-4 rounded-3">
+            <svg class="bi" width="1em" height="1em">
+              <use xlink:href="#collection" />
+            </svg>
+          </div>
+          <h4 class="fw-semibold mb-0">Featured title</h4>
+          <p class="text-muted">Paragraph of text beneath the heading to explain the heading.</p>
+        </div>
+
+        <div class="d-flex flex-column gap-2">
+          <div
+            class="feature-icon-small d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-4 rounded-3">
+            <svg class="bi" width="1em" height="1em">
+              <use xlink:href="#gear-fill" />
+            </svg>
+          </div>
+          <h4 class="fw-semibold mb-0">Featured title</h4>
+          <p class="text-muted">Paragraph of text beneath the heading to explain the heading.</p>
+        </div>
+
+        <div class="d-flex flex-column gap-2">
+          <div
+            class="feature-icon-small d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-4 rounded-3">
+            <svg class="bi" width="1em" height="1em">
+              <use xlink:href="#speedometer" />
+            </svg>
+          </div>
+          <h4 class="fw-semibold mb-0">Featured title</h4>
+          <p class="text-muted">Paragraph of text beneath the heading to explain the heading.</p>
+        </div>
+
+        <div class="d-flex flex-column gap-2">
+          <div
+            class="feature-icon-small d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-4 rounded-3">
+            <svg class="bi" width="1em" height="1em">
+              <use xlink:href="#table" />
+            </svg>
+          </div>
+          <h4 class="fw-semibold mb-0">Featured title</h4>
+          <p class="text-muted">Paragraph of text beneath the heading to explain the heading.</p>
+        </div>
+      </div>
+    </div>
+  </div>
 </main>