Sandbox: Difference between revisions

[checked revision]

← Older edit

VisualWikitext

Latest revision as of 13:02, 19 May 2026

Test for new Main menu

Concepts

Components

Test for new Icon for recipes with number on

Version from WugWugg:

100

10

Test Plant template with gallery

Rice

CardHeaderTitle

Listitem
Listitem
Listitem

CardHeaderTitle

Listitem
Listitem
Listitem

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.

@@ Line 1: / Line 1: @@
 __NOTOC__
+== Test for new Main menu ==
+{{#invoke:EcopediaMenu|MainMenu}}
 == Test for new Icon for recipes with number on ==
-<div class="recipeitem">
-    <div class="itemicon">[[File:DaisyItem_Icon.png|64px]]</div>
+'''Version from WugWugg:'''
-    <div class="itemcount itemcountyellow">10</div>
-</div>
+{{Icon|name=Charred Meat|link=1|size=64|style=5|border=green|count=100}} {{Icon|name=Daisy|link=1|size=64|style=5|border=yellow|count=10}}
 == Test Plant template with gallery  ==
@@ Line 12: / Line 18: @@
 <div class="col-md-6">
 <gallery widths=100% heights=auto mode="slideshow" showthumbnails>
+Rice_Plant.jpg
+Rice_Plant.jpg
+Rice_Plant.jpg
 Rice_Plant.jpg
 </gallery>
@@ Line 18: / Line 27: @@
 <div class="card border-primary">
    <div class="card-body">
-<h2 class="card-title fs-40">Aglonema Plant</h2>
+<h2 class="card-title fs-40">[[File:RiceSpecies_Icon.png|64px|link=]] Rice</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"></p>
 </div></div>
+<div class="row g-2 mb-3">
+<div class="col-xs-12 col-sm-12 col-md-12 col-lg-6"><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-12 col-md-12 col-lg-6"><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-12 col-md-12 col-lg-6"><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-12 col-md-12 col-lg-6"><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>