Added new example in `examples/features` page. (#36660)

* Added new example in examples/features

* Fix indentation, other suggested changes from review

* fix: heading structure

diff --git a/site/content/docs/5.2/examples/features/features.css b/site/content/docs/5.2/examples/features/features.css
index 619222364d42745d3e2ca740d147bcd3924f7269..b5d658f6b4e0cc1b0afc82f14dbfaaca129f0257 100644 (file)
--- 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 4da23239f0e6f223046a0f4fd10b240392b12fbb..c134a0a919bd2a7aaa1c3493bfe17bd34c74c390 100644 (file)
--- a/site/content/docs/5.2/examples/features/index.html
+++ b/site/content/docs/5.2/examples/features/index.html
@@ -285,4 +285,63 @@ body_class: ""
       </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>