Sandbox: Difference between revisions
From Eco - English Wiki
| [checked revision] | [checked revision] |
No edit summary |
|||
| Line 20: | Line 20: | ||
<h2 class="card-title fs-40">Aglonema Plant</h2> | <h2 class="card-title fs-40">Aglonema Plant</h2> | ||
<p class="col-lg-10 card-text">Adipisicing pariatur occaecat exercitation sunt exercitation consectetur in dolor adipisicing consequat sunt magna occaecat occaecat.</p> | <p class="col-lg-10 card-text">Adipisicing pariatur occaecat exercitation sunt exercitation consectetur in dolor adipisicing consequat sunt magna occaecat occaecat.</p> | ||
<div class="row g-2 mb-3"> | |||
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"><div class="card"> | |||
<div class="card-header bg-dark text-white">CardHeaderTitle</div> | |||
<ul class="list-group list-group-flush"> | |||
<li class="list-group-item">Listitem</li> | |||
<li class="list-group-item">Listitem</li> | |||
<li class="list-group-item">Listitem</li> | |||
</ul> | |||
</div></div> | |||
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"><div class="card"> | |||
<div class="card-header bg-dark text-white">CardHeaderTitle</div> | |||
<ul class="list-group list-group-flush"> | |||
<li class="list-group-item">Listitem</li> | |||
<li class="list-group-item">Listitem</li> | |||
<li class="list-group-item">Listitem</li> | |||
</ul> | |||
</div></div> | |||
</div> | |||
</div></div> | </div></div> | ||
</div> | </div> | ||
Revision as of 14:41, 18 February 2026
Test for new Icon for recipes with number on
10
Test Plant template with gallery
Aglonema Plant
Adipisicing pariatur occaecat exercitation sunt exercitation consectetur in dolor adipisicing consequat sunt magna occaecat occaecat.
CardHeaderTitle
- Listitem
- Listitem
- Listitem
CardHeaderTitle
- Listitem
- Listitem
- Listitem
Test info card with dark/light mode
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.
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.
