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: @@
-[[file:Achievement_Icon.png|link=]]
+__NOTOC__
-<div class="IconFrame">{{Icon|name=Charred Meat|link=1|size=128|style=3}}</div>
+== Test for new Main menu ==
+{{#invoke:EcopediaMenu|MainMenu}}
-    <div class="row">
-        <div class="col-4 mt-3">
-            <div class="card">
-                <div class="card-horizontal">
-                    <div class="img-square-wrapper">
-                        [[file:Achievement_Icon.png|link=]]
-                    </div>
-                    <div class="card-body">
-                        <h4 class="card-title">Card title</h4>
-                        <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>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-<div class="container px-4 py-5" id="icon-grid">
+== Test for new Icon for recipes with number on ==
-    <h2 class="pb-2 border-bottom">Icon grid</h2>
+'''Version from WugWugg:'''
+{{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  ==
+<div class="row gy-4 gx-5">
+<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>
+</div>
+<div class="col-md-6">
+<div class="card border-primary">
+  <div class="card-body">
+<h2 class="card-title fs-40">[[File:RiceSpecies_Icon.png|64px|link=]] Rice</h2>
+<p class="col-lg-10 card-text"></p>
+</div></div>
+<div class="row g-2 mb-3">
-    <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-xs-12 col-sm-12 col-md-12 col-lg-6"><div class="card">
-      <div class="col d-flex align-items-start">
+  <div class="card-header bg-dark text-white">CardHeaderTitle</div>
-		{{Icon |name = Log |style = 1 |size = 96}}
+  <ul class="list-group list-group-flush">
-        <div>
+    <li class="list-group-item">Listitem</li>
-          <h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3>
+    <li class="list-group-item">Listitem</li>
-          <p>Paragraph of text beneath the heading to explain the heading.</p>
+    <li class="list-group-item">Listitem</li>
-        </div>
+  </ul>
-      </div>
+</div></div>
-      <div class="col d-flex align-items-start">
+<div class="col-xs-12 col-sm-12 col-md-12 col-lg-6"><div class="card">
-        <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 class="card-header bg-dark text-white">CardHeaderTitle</div>
-        <div>
+  <ul class="list-group list-group-flush">
-          <h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3>
+    <li class="list-group-item">Listitem</li>
-          <p>Paragraph of text beneath the heading to explain the heading.</p>
+    <li class="list-group-item">Listitem</li>
-        </div>
+    <li class="list-group-item">Listitem</li>
-      </div>
+  </ul>
-      <div class="col d-flex align-items-start">
+</div></div>
-        <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 class="col-xs-12 col-sm-12 col-md-12 col-lg-6"><div class="card">
-        <div>
+  <div class="card-header bg-dark text-white">CardHeaderTitle</div>
-          <h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3>
+  <ul class="list-group list-group-flush">
-          <p>Paragraph of text beneath the heading to explain the heading.</p>
+    <li class="list-group-item">Listitem</li>
-        </div>
+    <li class="list-group-item">Listitem</li>
-      </div>
+    <li class="list-group-item">Listitem</li>
-      <div class="col d-flex align-items-start">
+  </ul>
-        <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></div>
-        <div>
+<div class="col-xs-12 col-sm-12 col-md-12 col-lg-6"><div class="card">
-          <h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3>
+  <div class="card-header bg-dark text-white">CardHeaderTitle</div>
-          <p>Paragraph of text beneath the heading to explain the heading.</p>
+  <ul class="list-group list-group-flush">
-        </div>
+    <li class="list-group-item">Listitem</li>
-      </div>
+    <li class="list-group-item">Listitem</li>
-      <div class="col d-flex align-items-start">
+    <li class="list-group-item">Listitem</li>
-        <i class="ph ph-file-text bi text-body-secondary flex-shrink-0 me-3" style="font-size: 1.75em;" aria-hidden="true"></i>
+  </ul>
-        <div>
+</div></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>
+</div>
+</div>
+== Test info card with dark/light mode ==
 <div class="row align-items-md-stretch">
        <div class="col-md-6">
-         <div class="h-100 p-5 text-white bg-dark rounded-3">
+         <div class="h-80 p-4 border-primary text-white bg-dark rounded-3">
-           <h2 class="text-white">Change the background</h2>
+           <h5 class="text-white">{{Icon |name = Achievement|id = Achievement|link = Achievements |style = 1 |size = 48}}  Change the background</h5>
            <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">
+         <div class="h-80 p-4 border-primary bg-light border rounded-3">
-           <h2>Add borders</h2>
+           <h5>{{Icon |name = Achievement|id = Achievement|link = Achievements |style = 1 |size = 48}}  Add borders</h5>
            <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>