diff options
| author | Vipin Mishra <52159805+thevipinmishra@users.noreply.github.com> | 2022-08-04 07:52:41 +0300 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2022-08-04 07:52:41 +0300 |
| commit | 9e57dfadac9cd924c35b7ff5b3d82981b59502de (patch) | |
| tree | f6edd30c300bc6b27f8a9bb6e4c0d2674ee28836 | |
| parent | e57a94cd664aa7b819da9408053bfbdf414a78e4 (diff) | |
Added new example in `examples/features` page. (#36660)
* Added new example in examples/features
* Fix indentation, other suggested changes from review
* fix: heading structure
| -rw-r--r-- | site/content/docs/5.2/examples/features/features.css | 5 | ||||
| -rw-r--r-- | site/content/docs/5.2/examples/features/index.html | 59 |
2 files changed, 64 insertions, 0 deletions
diff --git a/site/content/docs/5.2/examples/features/features.css b/site/content/docs/5.2/examples/features/features.css index 619222364d..b5d658f6b4 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 4da23239f0..c134a0a919 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 @@ 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> |