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

* Added new example in examples/features * Fix indentation, other suggested changes from review * fix: heading structure
twbs · Aug 4, 2022 · 9e57dfa · 9e57dfa
1 parent e57a94c
commit 9e57dfa
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 0 deletions.
diff --git 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
@@ -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>