Module:Box/doc

Generic box with automatic dark mode based on tint colors.

Functions

Self-Contained Box

{{#invoke:Box|main
|background=false
|body=Body
|compact=false
|outer=false
|tintColor=#f8f2fb
|vfill=false
|vspace=false
}}

Use main if you want a self-contained box.

background (default: false)

Whether to set tint color as a background color.

body (default: empty)

Set the body text. Inline wikitext can be used. For block wikitext (e.g., header), use open and close.

compact (default: false)

Whether to make the box more compact. This should be set to true if box is used for layout purposes.

outer (default: false)

Whether to use the "outer border" styling (see example below)

tintColor (default: #999999)

Set the tint color. This should be set to the lightest color of the element (e.g., background). Border color and dark mode colors will derive from this value. In particular, border will use a darkened value of the tint color, and dark mode will use a brightness-inverted value of the respective light tint.

vfill (default: false)

Fill 100% of the height (intended to be used with Module:Layout)

vspace (default: false)

Whether to add a small space after the box. Useful when box is used for notices, etc.

Open/Close Box

{{#invoke:Box|open
|background=false
|compact=false
|outer=false
|tintColor=#f8f2fb
|vfill=false
|vspace=false
}}

Body

{{#invoke:Box|close
|outer=false
}}

Use open and close if you want to use the box for layout purposes.

background (default: false)

Whether to set tint color as a background color.

compact (default: false)

Whether to make the box more compact. This should be set to true if box is used for layout purposes.

outer (default: false)

Whether to use the "outer border" styling (see example below). see example below). Note that this should be set to the same value in both open and close.

tintColor (default: #999999)

Set the tint color. This should be set to the lightest color of the element (e.g., background). Border color and dark mode colors will derive from this value. In particular, border will use a darkened value of the tint color, and dark mode will use a brightness-inverted value of the respective light tint.

vfill (default: false)

Fill 100% of the height (intended to be used with Module:Layout)

vspace (default: false)

Whether to add a small space after the box. Useful when box is used for notices, etc.

Examples

Plain Box

{{#invoke:Box|main|body=Body}}

Body

{{#invoke:Box|main|body=Body|tintColor=#f8f2fb}}

Body

{{#invoke:Box|main|body=Body|tintColor=#e4efff}}

Body

{{#invoke:Box|open|tintColor=#e4efff|compact=true}}
{{#invoke:Box|main|body=Title|background=true|tintColor=#e4efff}}
Body
{{#invoke:Box|close}}

Title

Body

Outer Box

{{#invoke:Box|main|body=Body|outer=true}}

Body

{{#invoke:Box|main|body=Body|outer=true|tintColor=#f8f2fb}}

Body

{{#invoke:Box|main|body=Body|outer=true|tintColor=#e4efff}}

Body

{{#invoke:Box|open|tintColor=#e4efff|outer=true|compact=true}}
{{#invoke:Box|main|body=Title|background=true|tintColor=#e4efff}}
Body
{{#invoke:Box|close}}

Title

Body