Template:Content Box: Difference between revisions

Revision as of 14:34, 7 April 2024

This allows the creation of a segmented off div with styling.

Allows for the creation of segemented boxes with variying styles

Template parameters[Edit template data]
Parameter		Description	Type	Status
Background Colour	`bg-color`	Sets the colour of the Content Box. Must be hex. Defaults to #99AEBB, a dark gray. Default #99AEBB	String	optional
Border Style	`bd-style`	Sets the style for the border. Defaults to dotted. Other styles can be found https://developer.mozilla.org/en-US/docs/Web/CSS/border-style. Suggested values `dotted` `none` `solid` Default dotted	String	optional
Content	`content`	What should be rendered in the content box. Can be other divs.	Content	optional

{{{content}}}

@@ Line 1: / Line 1: @@
-<div style="background-color: #99AEBB; border-style: dotted;">
+<noinclude>
-{{{1}}}
+== Usage ==
+This allows the creation of a segmented off div with styling.
+<templatedata>
+{
+    "description": "Allows for the creation of segemented boxes with variying styles",
+    "params": {
+        "bg-color": {
+            "label": "Background Colour",
+            "description": "Sets the colour of the Content Box. Must be hex. Defaults to #99AEBB, a dark gray.",
+            "type": "string",
+            "default": "#99AEBB"
+        },
+        "bd-style": {
+            "label": "Border Style",
+            "description": "Sets the style for the border. Defaults to dotted. Other styles can be found https://developer.mozilla.org/en-US/docs/Web/CSS/border-style.",
+            "type": "string",
+            "default": "dotted",
+            "suggestedvalues": ["dotted","none","solid"]
+        },
+        "content": {
+            "label": "Content",
+            "description": "What should be rendered in the content box. Can be other divs.",
+            "type": "content"
+        }
+    }
+}
+</templatedata>
+</noinclude>
+<div style="background-color: {{{bg-color|#99AEBB}}}; border-style: {{{bd-style|dotted}}};">
+{{{content}}}
 </div>