Sandbox: Difference between revisions
From Eco - English Wiki
| [checked revision] | [checked revision] |
No edit summary |
No edit summary |
||
| Line 19: | Line 19: | ||
</div> | </div> | ||
</div> | </div> | ||
<div class="container px-4 py-5" id="icon-grid"> | |||
<h2 class="pb-2 border-bottom">Icon grid</h2> | |||
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-4 py-5"> | |||
<div class="col d-flex align-items-start"> | |||
{{Icon |name = Log |style = 1 |size = 96}} | |||
<div> | |||
<h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3> | |||
<p>Paragraph of text beneath the heading to explain the heading.</p> | |||
</div> | |||
</div> | |||
<div class="col d-flex align-items-start"> | |||
<i class="ph ph-file-text bi text-body-secondary flex-shrink-0 me-3" style="font-size: 1.75em;" aria-hidden="true"></i> | |||
<div> | |||
<h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3> | |||
<p>Paragraph of text beneath the heading to explain the heading.</p> | |||
</div> | |||
</div> | |||
<div class="col d-flex align-items-start"> | |||
<i class="ph ph-file-text bi text-body-secondary flex-shrink-0 me-3" style="font-size: 1.75em;" aria-hidden="true"></i> | |||
<div> | |||
<h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3> | |||
<p>Paragraph of text beneath the heading to explain the heading.</p> | |||
</div> | |||
</div> | |||
<div class="col d-flex align-items-start"> | |||
<i class="ph ph-file-text bi text-body-secondary flex-shrink-0 me-3" style="font-size: 1.75em;" aria-hidden="true"></i> | |||
<div> | |||
<h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3> | |||
<p>Paragraph of text beneath the heading to explain the heading.</p> | |||
</div> | |||
</div> | |||
<div class="col d-flex align-items-start"> | |||
<i class="ph ph-file-text bi text-body-secondary flex-shrink-0 me-3" style="font-size: 1.75em;" aria-hidden="true"></i> | |||
<div> | |||
<h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3> | |||
<p>Paragraph of text beneath the heading to explain the heading.</p> | |||
</div> | |||
</div> | |||
<div class="col d-flex align-items-start"> | |||
<i class="ph ph-file-text bi text-body-secondary flex-shrink-0 me-3" style="font-size: 1.75em;" aria-hidden="true"></i> | |||
<div> | |||
<h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3> | |||
<p>Paragraph of text beneath the heading to explain the heading.</p> | |||
</div> | |||
</div> | |||
<div class="col d-flex align-items-start"> | |||
<i class="ph ph-file-text bi text-body-secondary flex-shrink-0 me-3" style="font-size: 1.75em;" aria-hidden="true"></i> | |||
<div> | |||
<h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3> | |||
<p>Paragraph of text beneath the heading to explain the heading.</p> | |||
</div> | |||
</div> | |||
<div class="col d-flex align-items-start"> | |||
<i class="ph ph-file-text bi text-body-secondary flex-shrink-0 me-3" style="font-size: 1.75em;" aria-hidden="true"></i> | |||
<div> | |||
<h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3> | |||
<p>Paragraph of text beneath the heading to explain the heading.</p> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="row align-items-md-stretch"> | |||
<div class="col-md-6"> | |||
<div class="h-100 p-5 text-white bg-dark rounded-3"> | |||
<h2 class="text-white">Change the background</h2> | |||
<p>Swap the background-color utility and add a `.text-*` color utility to mix up the jumbotron look. Then, mix and match with additional component themes and more.</p> | |||
<button class="btn btn-outline-light" type="button">Example button</button> | |||
</div> | |||
</div> | |||
<div class="col-md-6"> | |||
<div class="h-100 p-5 bg-light border rounded-3"> | |||
<h2>Add borders</h2> | |||
<p>Or, keep it light and add a border for some added definition to the boundaries of your content. Be sure to look under the hood at the source HTML here as we've adjusted the alignment and sizing of both column's content for equal-height.</p> | |||
<button class="btn btn-outline-secondary" type="button">Example button</button> | |||
</div> | |||
</div> | |||
</div> | |||
{{LMB}} {{MMB}} {{RMB}} {{Key|Shift}} {{Key|E}} | |||
<div class="row"> | |||
<div class="col-sm"> | |||
<div class="card"> | |||
[[File:Banner4k.jpg|class=card-img-top|link=]] | |||
<div class="card-body"> | |||
<h5 class="card-title">Card title</h5> | |||
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> | |||
<a href="#" class="btn btn-primary">Go somewhere</a> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="col-sm"> | |||
<div class="card bg-dark"> | |||
<div class="card-header">Featured</div> | |||
<div class="card-body"> | |||
<h5 class="card-title">Card title</h5> | |||
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6> | |||
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> | |||
<a href="#" class="card-link">Card link</a> | |||
<a href="#" class="card-link">Another link</a> | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
Revision as of 21:47, 2 June 2025
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Icon grid
Featured title
Paragraph of text beneath the heading to explain the heading.
Featured title
Paragraph of text beneath the heading to explain the heading.
Featured title
Paragraph of text beneath the heading to explain the heading.
Featured title
Paragraph of text beneath the heading to explain the heading.
Featured title
Paragraph of text beneath the heading to explain the heading.
Featured title
Paragraph of text beneath the heading to explain the heading.
Featured title
Paragraph of text beneath the heading to explain the heading.
Featured title
Paragraph of text beneath the heading to explain the heading.
Change the background
Swap the background-color utility and add a `.text-*` color utility to mix up the jumbotron look. Then, mix and match with additional component themes and more.
<button class="btn btn-outline-light" type="button">Example button</button>
Add borders
Or, keep it light and add a border for some added definition to the boundaries of your content. Be sure to look under the hood at the source HTML here as we've adjusted the alignment and sizing of both column's content for equal-height.
<button class="btn btn-outline-secondary" type="button">Example button</button>
Shift E
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
<a href="#" class="btn btn-primary">Go somewhere</a>
Featured
Card title
Card subtitle
Some quick example text to build on the card title and make up the bulk of the card's content.
<a href="#" class="card-link">Card link</a> <a href="#" class="card-link">Another link</a>
