Template:ItemBox: Difference between revisionsGive feedback

Latest revision as of 19:14, 1 August 2026

Template documentation [view] [edit] [history] [purge]

This template uses CSS found at ItemBox/styles.css.

Usage

{{ItemBox}} renders a Deadlock shop item as a card: icon, tier art, and the item name auto-sized to fit. Pass an item name and everything else — tier, slot, tags, image — is pulled from Module:ItemData.

{{ItemBox|Extended Magazine}}

Imbue

Extended Magazine

Active

Parameters

Template parameters[Edit template data]
This template prefers inline formatting of parameters.
Parameter		Description	Type	Status
itemName	`itemName` `1`	Item name; keys into Module:ItemData. Positional. Example Extended Magazine	String	required
size	`size`	Scales the whole card. 1 = default (80px wide), 1.5 = 150%, 0.75 = 75%. Default 1 Example 1.5	Number	optional
showTierTag	`showTierTag`	Set to true to show the tier corner badge. Suggested values `true` `false`	Boolean	optional
lowGraphics	`lowGraphics`	Set to true for pages that place many cards at once (the card navboxes). Swaps the paper texture to a cacheable overlay so scrolling stays smooth; the look is nearly identical. Suggested values `true` `false`	Boolean	optional
overrideDisplayName	`overrideDisplayName`	Replaces the name shown on the card. Example Test Name	String	optional
overrideTier	`overrideTier`	Replaces the card's tier. Suggested values `1` `2` `3` `4` `5`	Number	optional
overrideSlot	`overrideSlot`	Replaces the card's background (type). Suggested values `Weapon` `Vitality` `Spirit`	String	optional
overrideIsActive	`overrideIsActive`	Forces the ACTIVE tag on or off. Suggested values `true` `false`	Boolean	optional
overrideIsImbue	`overrideIsImbue`	Forces the IMBUE tag on or off. Suggested values `true` `false`	Boolean	optional
overrideLinkTooltip	`overrideLinkTooltip`	Page the hover tooltip reads its info from. Example Extended Magazine	String	optional
overrideLinkImage	`overrideLinkImage`	Page/file the icon image comes from. Example Extended Magazine	String	optional
overrideLinkClick	`overrideLinkClick`	Page the card links to when clicked. Example Bullet Lifesteal (item)	String	optional

Examples

Basic

{{ItemBox|Close Quarters}}
{{ItemBox|Spirit Shredder Bullets}}
{{ItemBox|Silencer}}
{{ItemBox|Extra Health}}
{{ItemBox|Echo Shard}}
{{ItemBox|Celestial Blessing}}

Imbue

Close Quarters

Active

Imbue

Spirit Shredder Bullets

Active

Imbue

Silencer

Active

Imbue

Extra Health

Active

Imbue

Echo Shard

Active

Imbue

Celestial Blessing

Active

Tier tag

{{ItemBox|Extended Magazine|showTierTag = true}}
{{ItemBox|Berserker|showTierTag = true}}
{{ItemBox|Echo Shard|showTierTag = true}}
{{ItemBox|Celestial Blessing|showTierTag = true}}

Imbue

Extended Magazine

Active

Imbue

Berserker

Active

Imbue

Echo Shard

Active

Imbue

Celestial Blessing

Active

Size

{{ItemBox|Extended Magazine|size = 0.75}}
{{ItemBox|Extended Magazine}}
{{ItemBox|Extended Magazine|size = 1.5}}

Imbue

Extended Magazine

Active

Imbue

Extended Magazine

Active

Imbue

Extended Magazine

Active

Low graphics

For pages that place many cards at once. The paper texture becomes a single cacheable overlay so scrolling stays smooth; the look is nearly identical.

{{ItemBox|Extra Health}}
{{ItemBox|Kinetic Dash}}
{{ItemBox|Metal Skin}}
{{ItemBox|Echo Shard}}

{{ItemBox|Extra Health|lowGraphics = true}}
{{ItemBox|Kinetic Dash|lowGraphics = true}}
{{ItemBox|Metal Skin|lowGraphics = true}}
{{ItemBox|Echo Shard|lowGraphics = true}}

Normal

Imbue

Extra Health

Active

Imbue

Kinetic Dash

Active

Imbue

Metal Skin

Active

Imbue

Echo Shard

Active

Low graphics

Imbue

Extra Health

Active

Imbue

Kinetic Dash

Active

Imbue

Metal Skin

Active

Imbue

Echo Shard

Active

Overrides

{{ItemBox|High-Velocity Rounds|overrideDisplayName = Test Name}}
{{ItemBox|Intensifying Magazine|overrideTier = 4}}
{{ItemBox|Weakening Headshot|overrideSlot = Spirit}}
{{ItemBox|Recharging Rush|overrideIsActive = true}}
{{ItemBox|Alchemical Fire|overrideIsImbue = true}}
{{ItemBox|Bullet Lifesteal|overrideLinkClick = Heroes}}

Imbue

Test Name

Active

Imbue

Intensifying Magazine

Active

Imbue

Weakening Headshot

Active

Imbue

Recharging Rush

Active

Imbue

Alchemical Fire

Active

Imbue

Bullet Lifesteal

Active

References

Item data — Data:ItemData.json, read by Module:ItemData
Name sizing and texture variety — Module:ItemBox
Card styling — Template:ItemBox/styles.css

@@ Line 1: / Line 1: @@
-<onlyinclude>
+<templatestyles src="Template:ItemBox/styles.css" /><includeonly>
-<div class="HeroCard2" style="transition: 0.1s transform ease-in-out;display:inline-block; margin-left: 5px; border-radius: 5px;">
-{|- style="font-family:'Retail Demo Regular',serif;text-align:center; border-collapse:collapse; border-radius: 5px; width:100px !important; max-width:200px; height:2px; font-size: 14px;{{
+{{#vardefine:itemName|{{{itemName|{{{1}}}}}}}}<!--
-#switch: {{#if: {{{ignore|}}}|Weapon|{{#if: {{{item_type|}}}|{{{item_type}}}|{{#invoke:ItemData|get_type|{{{item_name|{{{1}}}}}}}}}}}}
- | Weapon = background-color: #C97A03;
+     Display name: Lang string for the codename, else the raw name, then override.
- | Vitality = background-color: #659818;
+-->{{#vardefine:displayName|{{#invoke:Lang|get_string|{{#invoke:ItemData|get_codename|{{#var:itemName}}}}}}}}<!--
- | Spirit = background-color: #8B56B4;
+-->{{#vardefine:displayName|{{#if:{{#var:displayName}}|{{#var:displayName}}|{{#var:itemName}}}}}}<!--
- | background-color: #C97A03;}}"
+-->{{#vardefine:displayName|{{{overrideDisplayName|{{#var:displayName}}}}}}}<!--
-! {{souls|{{#if: {{{item_price|}}}|{{{item_price}}}|{{#if: {{{ignore|}}}|0|{{#invoke:ItemData|get_cost|{{{item_name|{{{1}}}}}}}}}}}}|size=12px|Shadow=text-shadow: 1.8px 1.8px rgba(0, 0, 0, 0.3);}}
-|- style="text-align:center; width:100px; max-width:200px; height:60px; {{
+     Measured name size (cqw) and stable per-item texture variety.
-#switch: {{#if: {{{ignore|}}}|Weapon|{{#if: {{{item_type|}}}|{{{item_type}}}|{{#invoke:ItemData|get_type|{{{item_name|{{{1}}}}}}}}}}}}
+-->{{#vardefine:fontSize|{{#invoke:ItemBox|getFontSize|{{#var:displayName}}}}}}<!--
- | Weapon = background-color: #FCAC4D; color: #3A2B08;
+-->{{#vardefine:variants|{{#invoke:ItemBox|variants|{{#var:itemName}}}}}}<!--
- | Vitality = background-color: #86C921; color: #233A00;
- | Spirit = background-color: #DE9CFF; color: #3C254E;
+     Modifier classes: slot (Weapon/Armor/Tech from data, or Weapon/Vitality/Spirit override -> weapon/vitality/spirit), tier, tags.
- | background-color: #FCAC4D; color: #3A2B08;}}"
+-->{{#vardefine:slot|{{#switch:{{{overrideSlot|{{#invoke:ItemData|get_prop|{{#var:itemName}}|Slot}}}}}|Weapon=itembox-weapon|Armor|Vitality=itembox-vitality|Tech|Spirit=itembox-spirit}}}}<!--
-| <span style="transition: 0.1s transform ease-in-out;"
+-->{{#vardefine:tier|itembox-tier-{{{overrideTier|{{#invoke:ItemData|get_prop|{{#var:itemName}}|Tier}}}}}}}<!--
-{{
+-->{{#vardefine:showTierTag|{{#ifeq:{{{showTierTag|}}}|true|itembox-show-tier}}}}<!--
-#switch: {{#if: {{{ignore|}}}|Weapon|{{#if: {{{item_type|}}}|{{{item_type}}}|{{#invoke:ItemData|get_type|{{{item_name|{{{1}}}}}}}}}}}}
+-->{{#vardefine:isActive|{{{overrideIsActive|{{#invoke:ItemData|is_active|{{#var:itemName}}}}}}}}}<!--
- | Weapon = color: #3A2B08;
+-->{{#vardefine:isActive|{{#ifeq:{{#var:isActive}}|true|itembox-active}}}}<!--
- | Vitality = color: #233A00;
+-->{{#vardefine:isImbue|{{{overrideIsImbue|{{#invoke:ItemData|get_prop|{{#var:itemName}}|IsImbue}}}}}}}<!--
- | Spirit = color: #3C254E;
+-->{{#vardefine:isImbue|{{#ifeq:{{#var:isImbue}}|true|itembox-imbue}}}}<!--
- | color: #3A2B08;}}">[[File:{{{item_name|{{{1}}}}}}.png|50px|link={{#if:{{{link|}}}|{{{link}}}|{{{item_loc|{{{item_name|{{{1}}}}}}}}}}}]]</span>{{#if:{{{ignore|}}}||{{#ifeq: {{#invoke:ItemData|is_active|{{{item_name|{{{1}}}}}}}}|true|<div style="position: relative; display: flex; justify-content: center; align-items: center;"><div style="background-color: #161A13; color: #FFFFF5; border-radius:5px; padding: 2px 6px; font-size:10px; margin: 0; width: 48px; height: 16px; position: absolute; bottom: -14px; line-height: 12px; letter-spacing: -0.5px; font-family: 'Retail Demo Regular', serif;">'''ACTIVE'''</div></div>}}}}
-{{#if:{{{ignore|}}}||{{#if:{{#invoke:ItemData|get_component_name|{{{item_name|{{{1}}}}}}}}|<div style="position: relative; display: flex; justify-content: center; align-items: center;"><div style="background-color: #161A13; color: #FFFFF5; border-radius:50%; padding: 5px; font-size:10px; margin: 0; width: 20px; height: 20px; position: absolute; bottom: -7px; right: 3px;{{
+     lowGraphics=true is for callers that place dozens of cards on one page (the
-#switch: {{#if: {{{item_type|}}}|{{{item_type}}}|{{#invoke:ItemData|get_type|{{{item_name|{{{1}}}}}}}}}}
+     card navboxes). It swaps the paper texture from the normal-mode multiply,
- | Weapon = background-color: #FFF0D7; color: #151912;
+     which blends two images and so is re-rasterised every scrolled frame, to a
- | Vitality = background-color: #FFFFE7; color: #1C1E18;
+     transparent-paper overlay that is a single cacheable image. On the profiled
- | Spirit = background-color: #FFEFD7; color: #131610;
+     navbox this took the render thread's OpenGL work from ~230 ms/s to ~10 and
- | background-color: #FFF0D7; color: #151912;}}"><div style="display: flex; justify-content: center; align-items: center; width: 100%; height: 100%;">
+     roughly doubled the frame rate. The wear and icon masks are clips of a
-  <div style="position: relative; top: 4px; left: -13px;">
+     single image, not blends, so they cache once rasterised and stay at full
-    {{Icon|[[File:{{#invoke:ItemData|get_component_name|{{{item_name|{{{1}}}}}}}}.png|16px|link={{#invoke:ItemData|get_component_name|{{{item_name|{{{1}}}}}}}}]]}}
+     detail. The overlay itself is defined in [[Template:ItemBox/styles.css]] and
-  </div>
+     keyed off the same per-item texture-vN class, so a card keeps its paper
-</div></div></div>}}}}
+     across both modes.
-|- style="display:flex;justify-content: center; align-items: center;border-radius: 0px 0px 5px 5px; height:60px; font-size: 12px; {{
+-->{{#vardefine:lowGraphics|{{#ifeq:{{{lowGraphics|}}}|true|itembox-lowgfx}}}}<!--
-#switch: {{#if: {{{ignore|}}}|Weapon|{{#if: {{{item_type|}}}|{{{item_type}}}|{{#invoke:ItemData|get_type|{{{item_name|{{{1}}}}}}}}}}}}
- | Weapon = background-color: #FFF0D7; color: #151912;
+     Links.
- | Vitality = background-color: #FFFFE7; color: #1C1E18;
+-->{{#vardefine:linkTooltip|{{{overrideLinkTooltip|{{#var:itemName}}}}}}}<!--
- | Spirit = background-color: #FFEFD7; color: #131610;
+-->{{#vardefine:linkImage|{{{overrideLinkImage|{{#var:itemName}}}}}}}<!--
- | background-color: #FFF0D7; color: #151912;}}"
+-->{{#vardefine:linkClick|{{{overrideLinkClick|{{#var:itemName}}{{If lang}}}}}}}<!--
-! |{{#if:{{{link|}}}|[[{{{link}}}|{{{item_loc|{{{item_name|{{{1}}}}}}}}}]]|[[{{{item_loc|{{{item_name|{{{1}}}}}}}}}|{{{item_loc|{{{item_name|{{{1}}}}}}}}}]]}}
-|}</div></onlyinclude><noinclude>{{Documentation}}</noinclude>
+--><div class="itembox {{#var:showTierTag}} {{#var:tier}} {{#var:slot}} {{#var:isActive}} {{#var:isImbue}} {{#var:variants}} {{#var:lowGraphics}}" style="font-size:{{#expr: 10 * {{#if:{{{size|}}}|{{{size}}}|1}} }}px;">
+	<div class="itembox-background">
+		<div class="itembox-card">
+			<div class="itembox-icon-area">
+				<div class="itembox-icon">[[File:{{#var:linkImage}}.png|160px|link=]]</div>
+				<div class="itembox-tier-badge">
+					<div class="itembox-tier-badge-shadow"></div>
+					<div class="itembox-tier-badge-fill"></div>
+					<div class="itembox-tier-badge-number"></div>
+				</div>
+				<div class="itembox-imbue-tag">{{#invoke:Lang|get_string|item_info_imbue}}</div>
+			</div>
+			<!-- container-type is inline because TemplateStyles strips it; the name's cqw size measures against this box. -->
+			<div class="itembox-name-area" style="container-type: inline-size;">
+				<p class="itembox-name" style="font-size:{{#var:fontSize}};text-wrap:balance;">{{#var:displayName}}</p>
+			</div>
+			<div class="itembox-wear"></div>
+			<div class="itembox-texture"></div>
+			<div class="itembox-bevel"></div>
+			<div class="itembox-active-tag">{{#invoke:Lang|get_string|item_info_active}}</div>
+			<div class="itembox-outline"></div>
+		</div>
+	</div>
+	<div class="item-link-wrapper" data-item-name="{{#var:linkTooltip}}">[[{{#var:linkClick}}|<span></span>]]</div>
+</div></includeonly><noinclude>{{Documentation}}</noinclude>

Template:ItemBox: Difference between revisionsGive feedback

Vergir (talk | contribs)

Latest revision as of 19:14, 1 August 2026

Contents

Usage

Parameters

Examples

Basic

Tier tag

Size

Low graphics

Overrides

References

Navigation menu