Template:Box: Difference between revisions

Latest revision as of 16:14, 11 February 2025

{{{title}}}

{{{content}}}

The box template allows you to highlight something with a coloured box.

Template parameters[Edit template data]
This template prefers block formatting of parameters.
Parameter		Description	Type	Status
Title	`title`	Title of the box. Example Selection	String	required
Content	`content`	Content of the box. Example {{clr}}{{Template:Box/Sample}}	Content	required
Link	`link`	Wikipedia page title for editing the content. Example Template:Box/Sample	Page name	suggested
Title background color	`background-title-color`	CSS color of the title bar background. Default var(--background-color-base) Example #447FF5	String	suggested
Icon	`icon`	Name of an icon file. Example Circle-icons-chat.svg	File	optional
Trailing Icon	`trailing-icon`	An icon to display after, rather than before, the title.	File	optional
Title color	`title-color`	CSS color of the title text. Default var(--color-base) Example #339966	String	optional
Style	`style`	Additional CSS style for the container.	String	optional
Link color	`link-color`	CSS color of the 'Edit' link. Default var(--color-progressive) Example #339966	String	optional
Content background color	`background-content-color`	CSS color of the box content background. Default var(--background-color-base) Example #339966	String	optional
Link-text	`Link-text`	Default title: edit, can be changed Default edit	Unknown	optional
background-color	`background-color`	no description	Unknown	optional
Title background color on hover	`background-title-color-hover`	When hovering with the mouse, changes the background color of the title. Default {{{background-title-color}}}	Unknown	optional
title-color-hover	`title-color-hover`	no description	Unknown	optional
Flex	`flex`	Integration into the dynamic column/row grid. The first number indicates the proportion at which the box can expand, the second indicates the proportion at which it can shrink, the third indicates the minimum width in px/em of the box Default 0 1 auto	String	optional
Center title	`center`	If specified, it allows centering the title.	Unknown	optional
Class	`class`	CSS classes to apply to the box. Suggested values `ambox` `hatnote` `dablink` `side-box`	String	optional

@@ Line 1: / Line 1: @@
-<div style="box-shadow: 0 0 0.2em #999999; border-radius: 0.2em; margin: 0.5em 0.5em 1em 0.5em; background: {{{background-content-color|#f8f9fa}}}; {{{style|}}};">
+<div class="{{{class|}}}" style="display: block; box-shadow: 0 0 0.2em #999999; border-radius: 0.2em; margin: 0.5em 0.5em 1em 0.5em; background: {{{background-content-color|var(--background-color-base)}}}; {{{style|}}};">
    <!-- Title Box -->
-   <div style="background: {{{background-title-color|#eaecf0}}}; border-radius: 0.2em 0.2em 0 0; padding: 0.5em 1em 0.5em 1em; display: flex; align-items: center; {{#if:{{{center|}}}|justify-content: space-between;}}">
+   <div style="background: {{{background-title-color|var(--background-color-neutral)}}}; border-radius: 0.2em 0.2em 0 0; padding: 0.5em 1em 0.5em 1em; display: flex; align-items: center; {{#if:{{{center|}}}|justify-content: space-between;}}">
      <!-- Icon -->
-     {{#if:{{{icon|}}}|<span style="opacity: 0.8; display: flex; align-items: center; margin-right: 0.5em; line-height: 3.5em;">[[File:{{{icon}}}|3.5em|left|link=|alt=]]</span>&#32;}}
+     {{#if:{{{icon|}}}|<span style="opacity: 0.8; display: flex; align-items: center; margin-right: 0.5em; line-height: 50pxm;">[[File:{{{icon}}}|50px|left|link=|alt=]]</span>&#32;}}
      <!-- Title -->
-     <div style="color: {{{title-color|#000000}}}; font-weight: bold; line-height: 3.5em;"><big>{{{title}}}</big></div>
+     <div style="color: {{{title-color|var(--color-base)}}}; font-weight: bold; line-height: 50px;"><big>{{{title}}}</big></div>
      <!-- Link -->
-     {{#if:{{{link|}}}|<div style="float: right; font-size: 0.7em;">[[{{{link}}}|<span style="color: {{{link-color|{{{title-color|#000000}}}}}};">{{{Link-text|{{{link-text|Link}}}}}}</span>]]</div>}}
+     {{#if:{{{link|}}}|<div style="float: right; font-size: 0.7em;">[[{{{link}}}|<span style="color: {{{link-color|{{{title-color|var(--color-progressive)}}}}}};">{{{Link-text|{{{link-text|Link}}}}}}</span>]]</div>}}
      <!-- Trailing Icon -->
-     {{#if:{{{trailing-icon|}}}|<span style="opacity: 0.8; display: flex; align-items: center; margin-left: 0.5em; line-height: 3.5em;">[[File:{{{trailing-icon}}}|3.5em|left|link=|alt=]]</span>&#32;}}
+     {{#if:{{{trailing-icon|}}}|<span style="opacity: 0.8; display: flex; align-items: center; margin-left: 0.5em; line-height: 50px;">[[File:{{{trailing-icon}}}|50px|left|link=|alt=]]</span>&#32;}}
    </div>
    <!-- Content Box -->
-   <div style="padding: 1em; padding-left: 1em;">
+   <div style="padding: 1em; padding-left: 1em; color: var(--color-base);">
 <!---->{{{content}}}{{clr}}
    </div>
@@ Line 49: / Line 49: @@
 		"title-color": {
 			"label": "Title color",
-			"description": "Hexadecimal color code of the title text.",
+			"description": "CSS color of the title text.",
 			"example": "#339966",
 			"type": "string",
-			"default": "#FFFFFF"
+			"default": "var(--color-base)"
 		},
 		"style": {
@@ Line 61: / Line 61: @@
 		"link-color": {
 			"label": "Link color",
-			"description": "Hexadecimal color code of the 'Edit' link.",
+			"description": "CSS color of the 'Edit' link.",
 			"example": "#339966",
 			"type": "string",
-			"default": "#999999"
+			"default": "var(--color-progressive)"
 		},
 		"background-title-color": {
 			"label": "Title background color",
-			"description": "Hexadecimal color code of the title bar background.",
+			"description": "CSS color of the title bar background.",
 			"example": "#447FF5",
 			"type": "string",
-			"default": "#339966",
+			"default": "var(--background-color-base)",
 			"suggested": true
 		},
 		"background-content-color": {
 			"label": "Content background color",
-			"description": "Hexadecimal color code of the box content background.",
+			"description": "CSS color of the box content background.",
 			"example": "#339966",
 			"type": "string",
-			"default": "#F8F9FA"
+			"default": "var(--background-color-base)"
 		},
 		"Link-text": {
@@ Line 106: / Line 106: @@
 			"description": "An icon to display after, rather than before, the title.",
 			"type": "wiki-file-name"
+		},
+		"class": {
+			"label": "Class",
+			"description": "CSS classes to apply to the box.",
+			"type": "string",
+			"suggestedvalues": [
+				"ambox",
+				"hatnote",
+				"dablink",
+				"side-box"
+			]
 		}
 	},
@@ Line 125: / Line 136: @@
 		"title-color-hover",
 		"flex",
-		"center"
+		"center",
+		"class"
 	],
 	"format": "block"