Template:Demo RecipeItemIcon: Difference between revisions

[unchecked revision]

[checked revision]

Latest revision as of 12:47, 24 February 2026

Visual Goals

location=center

Template Examples

Border Colors
Color	Example
White (Default)
Yellow
Green

Responsive Sizing
Size	Example
64px (Default)	10
128px	10
256px	10

Count Shadow
Count	Example
No Count/Shadow
10	10
100	100

Grid Demo

100

10

67

Recipe Demo

2

0.5

10

2

No description.

Template parameters[Edit template data]
Parameter		Description	Type	Status
size	`size`	Size in pixels (numbers only) Suggested values `64` `128` Default 64 Example 64 Auto value `64`	Number	optional
icon	`icon`	File name for icon. Example DaisyItem_Icon.png	String	required
count	`count` `num`	A number to display over this icon's image. Useful for showing counts. Example 10	Number	optional
border	`border`	Border color Suggested values `white` `yellow` `green` Default white Auto value `white`	String	optional

@@ Line 1: / Line 1: @@
 <templatestyles src="Template:Demo_RecipeItemIcon/styles.css" />
-<!-- NOTE: Do not indent lines in <includeonly>. Leading spaces create <pre> blocks. -->
-<!-- Minify template HTML using something like: https://codebeautify.org/minify-html -->
-<!-- Edit externally and to get indents back use same editor, just click "beautify" in the middle instead of "minify" -->
 <includeonly><div class="recipe-item-icon {{#if: {{{count|}}} | has-count }} {{#switch: {{{border|}}} | yellow = border-yellow | white = border-white | green = border-green | #default = border-white}}" style="font-size:{{{size|64}}}px"><div class="recipe-item-icon__img-container">[[File:{{{icon}}}|{{{size|64}}}px]]</div><span class="recipe-item-icon__count">{{{count|}}}</span></div></includeonly>
@@ Line 47: / Line 44: @@
 |}
-=== Composition Demo ===
+=== Grid Demo ===
-<div class="row g-2 mb-3"><div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">{{Demo RecipeItemIcon|icon=DaisyItem_Icon.png|count=100|size=128}}</div><div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">{{Demo RecipeItemIcon|icon=TulipItem Icon.png|count=100|border=yellow|size=128}}</div><div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">{{Demo RecipeItemIcon|icon=LupineItem Icon.png|size=128}}</div><div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">{{Demo RecipeItemIcon|icon=RoseItem Icon.png|count=10|border=yellow|size=128}}</div><div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">{{Demo RecipeItemIcon|icon=FlaxFlowerItem Icon.png|count=67|border=green|size=128}}</div><div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">{{Demo RecipeItemIcon|icon=Flower Icon.png|border=green|size=128}}</div><div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">{{Demo RecipeItemIcon|icon=EcoBookItem Icon.png|size=128}}</div><div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">{{Demo RecipeItemIcon|icon=RiceFlourItem Icon.png|border=green|size=128}}</div><div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">{{Demo RecipeItemIcon|icon=NailItem Icon.png|border=yellow|size=128}}</div><div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">{{Demo RecipeItemIcon|icon=AdobeItem Icon.png|border=green|size=128}}</div><div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">{{Demo RecipeItemIcon|icon=JoshuaLogItem Icon.png|size=128}}</div><div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">{{Demo RecipeItemIcon|icon=IronOreItem Icon.png|border=yellow|size=128}}</div></div>
+<div class="row g-2 mb-3"><div class="col-1">{{Demo RecipeItemIcon|icon=DaisyItem_Icon.png|count=100|size=48}}</div><div class="col-1">{{Demo RecipeItemIcon|icon=TulipItem Icon.png|count=100|border=yellow|size=48}}</div><div class="col-1">{{Demo RecipeItemIcon|icon=LupineItem Icon.png|size=48}}</div><div class="col-1">{{Demo RecipeItemIcon|icon=RoseItem Icon.png|count=10|border=yellow|size=48}}</div><div class="col-1">{{Demo RecipeItemIcon|icon=FlaxFlowerItem Icon.png|count=67|border=green|size=48}}</div><div class="col-1">{{Demo RecipeItemIcon|icon=Flower Icon.png|border=green|size=48}}</div><div class="col-1">{{Demo RecipeItemIcon|icon=EcoBookItem Icon.png|size=48}}</div><div class="col-1">{{Demo RecipeItemIcon|icon=RiceFlourItem Icon.png|border=green|size=48}}</div><div class="col-1">{{Demo RecipeItemIcon|icon=NailItem Icon.png|border=yellow|size=48}}</div><div class="col-1">{{Demo RecipeItemIcon|icon=AdobeItem Icon.png|border=green|size=48}}</div><div class="col-1">{{Demo RecipeItemIcon|icon=JoshuaLogItem Icon.png|size=48}}</div><div class="col-1">{{Demo RecipeItemIcon|icon=IronOreItem Icon.png|border=yellow|size=48}}</div></div>
+=== Recipe Demo ===
+<div class="row g-2 mb-3 align-items-center justify-content-center"><div class="col-xs-12 col-sm-4 col-md-3 col-lg-2">{{Demo RecipeItemIcon|icon=NailItem Icon.png|border=yellow|size=128|count=2}}</div><div class="col-xs-12 col-sm-2 col-md-1"><i class="fas fa-plus" style="font-size:64px"></i></div><div class="col-xs-12 col-sm-4 col-md-3 col-lg-2">{{Demo RecipeItemIcon|icon=FlaxseedOilItem_Icon.png|border=yellow|size=128|count=0.5}}</div><div class="col-xs-12 col-sm-2 col-md-1"><i class="fas fa-plus" style="font-size:64px"></i></div><div class="col-xs-12 col-sm-4 col-md-3 col-lg-2">{{Demo RecipeItemIcon|icon=WoodBoard_Icon.png|border=yellow|size=128|count=10}}</div><div class="col-xs-12 col-sm-2 col-md-1"><i class="fas fa-equals" style="font-size:64px"></i></div><div class="col-xs-12 col-sm-4 col-md-3 col-lg-2">{{Demo RecipeItemIcon|icon=LumberItem_Icon.png|size=128|count=2}}</div></div>
 <templatedata>