Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Added new example in examples/features page. #36660

Merged
merged 3 commits into from Aug 4, 2022
Merged

Added new example in examples/features page. #36660

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
66aed76
Added new example in examples/features
thevipinmishra Jul 3, 2022
87de02c
Fix indentation, other suggested changes from review
thevipinmishra Jul 21, 2022
6f83726
fix: heading structure
thevipinmishra Jul 24, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
5 changes: 5 additions & 0 deletions site/content/docs/5.2/examples/features/features.css
View file
Open in desktop
Expand Up @@ -29,3 +29,8 @@
background-position: center center;
background-size: cover;
}

.feature-icon-small {
thevipinmishra marked this conversation as resolved.
Show resolved Hide resolved
width: 3rem;
height: 3rem;
}
59 changes: 59 additions & 0 deletions site/content/docs/5.2/examples/features/index.html
View file
Open in desktop
Expand Up @@ -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>