Template:Main Page/Card: Difference between revisions

Browse history interactively

← Older edit

VisualWikitext

Latest revision as of 15:36, 6 May 2026

Template documentation
Note: parts of or the entire template might not be visible without values provided.

Main

Usage

This template uses CSS found at Template:Main Page/styles.css.

Template that creates cards for {{Main Page}}.

Syntax

{{Main Page/Card|icon = |link = |text = }}

icon – Icon for the card excluding the file extension. Shorthand for images with the Icon suffix.
image – Image for the card excluding the file extension.
ext – Extension of the image. Default: png.
link – Link of the card.
text – Text displayed on the card. Default: link.
invert – Set to apply a filter to the image for either day/light or night/dark mode. Available values:
- Day – Invert the image in day/light mode. Will invert light-colored icons to gray in day/light mode.
- Night – Invert the image in night/dark mode. Will invert dark-colored icons to white in night/dark mode.

Example

<div class="mp-navigation-wrapper mp-card-navigation">
{{Main Page/Card|icon = Kabuto Beetle|link = Insect|text = Insects}}
{{Main Page/Card|icon = Sanke Koi|link = Fish}}
{{Main Page/Card|icon = Hexia|link = Galaxy|text = Galaxies|invert = Day}}
{{Main Page/Card|image = CSS Logo|ext = svg|link = :File:CSS Logo.svg|text = CSS|invert = Night}}
</div>

Template Data

Template that creates cards for the Main Page.

Template parameters[Edit template data]
This template prefers inline formatting of parameters.
Parameter		Description	Type	Status
Icon	`icon`	Icon for the card excluding the file extension. Shorthand for files with the {{F\|Icon}} suffix. Example Kabuto Beetle	File	suggested
Image	`image`	Image for the card excluding the file extension. Example Kabuto Beetle Icon	File	optional
Extension	`ext`	Extension of the image. Default png	String	optional
Link	`link`	Link of the card. Example Insect	Page name	required
Text	`text`	Text displayed on the card. Default <link> Example Insects	String	optional
Invert	`invert`	Set to apply a filter to the image for either day/light or night/dark mode. Example Day, Night	String	optional

@@ Line 1: / Line 1: @@
 <includeonly><!--
 --><div class="mp-card"><!--
-    --><div class="mp-card-image">[[File:{{{image|}}}.{{{ext|png}}}|60x60px|alt=|link={{{link|}}}]]</div><!--
+    --><div class="mp-card-image"><!--
+     -->[[File:{{{image|{{{icon|Unknown}}} Icon}}}.{{{ext|png}}}|60x60px|alt={{{text|{{{link|}}}}}}|link={{{link|}}}<!--
+	   -->|class={{#switch:{{lc:{{{invert|}}}}}<!--
+	          -->|day|light=day-invert-image<!--
+			  -->|night|dark=night-invert-image<!--
+			  -->|#default=<!--
+			  -->}}<!--
+	 -->]]<!--
+   --></div><!--
     --><div class="mp-card-text">[[{{{link|}}}|{{{text|{{{link|}}}}}}]]</div><!--
 --></div></includeonly><noinclude>{{Documentation|type=Main Page|content=
@@ Line 9: / Line 17: @@
 ==Syntax==
 <syntaxhighlight lang="wikitext" copy>
-{{Main Page/Card|image = |link = |text = }}
+{{Main Page/Card|icon = |link = |text = }}
 </syntaxhighlight>
-* {{F|image}} &ndash; Destination filename ('''excluding''' the file extension).
+* {{F|icon}} &ndash; Icon for the card {{Color|Old|excluding}} the file extension. Shorthand for images with the {{F|Icon}} suffix.
-* {{F|ext}} &ndash; Extension for filename. Default: {{F|png}}.
+* {{F|image}} &ndash; Image for the card {{Color|Old|excluding}} the file extension.
+* {{F|ext}} &ndash; Extension of the image. Default: {{F|png}}.
 * {{F|link}} &ndash; Link of the card.
-* {{F|text}} &ndash; Text displayed on the highlight card. Default: {{F|link|v=1}}.
+* {{F|text}} &ndash; Text displayed on the card. Default: {{F|link|v=1}}.
+* {{F|invert}} &ndash; Set to apply a filter to the image for either day/light or night/dark mode. Available values:
+** {{F|Day}} &ndash; Invert the image in day/light mode. Will invert light-colored icons to gray in day/light mode.
+** {{F|Night}} &ndash; Invert the image in night/dark mode. Will invert dark-colored icons to white in night/dark mode.
 ==Example==
 {{Example|<nowiki>
-<templatestyles src="Template:Main Page/styles.css" />
 <div class="mp-navigation-wrapper mp-card-navigation">
-{{Main Page/Card|image = Kabuto Beetle Icon|link = Insect|text = Insects}}
+{{Main Page/Card|icon = Kabuto Beetle|link = Insect|text = Insects}}
-{{Main Page/Card|image = Sanke Koi Icon|link = Fish}}
+{{Main Page/Card|icon = Sanke Koi|link = Fish}}
-{{Main Page/Card|image = Bean-Shaped Fist Crab Icon|link = Shore-Dweller|text = Shore-Dwellers}}
+{{Main Page/Card|icon = Hexia|link = Galaxy|text = Galaxies|invert = Day}}
+{{Main Page/Card|image = CSS Logo|ext = svg|link = :File:CSS Logo.svg|text = CSS|invert = Night}}
 </div>
 </nowiki>}}
@@ Line 30: / Line 42: @@
 {
 	"params": {
+		"icon": {
+			"label": "Icon",
+			"description": "Icon for the card excluding the file extension. Shorthand for files with the {{F|Icon}} suffix.",
+			"example": "Kabuto Beetle",
+			"type": "wiki-file-name",
+			"suggested": true
+		},
 		"image": {
 			"label": "Image",
-			"description": "Destination filename (excluding the extension).",
+			"description": "Image for the card excluding the file extension.",
-			"example": "Kabuto Beetle Icon.png",
+			"example": "Kabuto Beetle Icon",
-			"type": "wiki-file-name",
+			"type": "wiki-file-name"
-			"required": true
 		},
 		"ext": {
 			"label": "Extension",
-			"description": "Extension for filename.",
+			"description": "Extension of the image.",
 			"default": "png",
 			"type": "string"
@@ Line 56: / Line 74: @@
 			"type": "string",
 			"default": "<link>"
+		},
+		"invert": {
+			"label": "Invert",
+			"description": "Set to apply a filter to the image for either day/light or night/dark mode.",
+			"example": "Day, Night",
+			"type": "string"
 		}
 	},
 	"description": "Template that creates cards for the Main Page.",
 	"paramOrder": [
+		"icon",
 		"image",
 		"ext",
 		"link",
-		"text"
+		"text",
+		"invert"
 	],
 	"format": "inline"
 }
 </templatedata>
+<templatestyles src="Template:Main Page/styles.css" />
 }}</noinclude>

Stevium (talk | contribs)

Latest revision as of 15:36, 6 May 2026

Syntax

Example

Template Data