Standard Mode
Template:Common Infobox/doc
Common Infobox is a design system for building infobox templates without manual styling. This design system includes a variety of semantic components that can be used without any manual styling other than colors. The Common Infobox styling is defined at Template:Common Infobox/styles.css
This page is intended as a guideline for template editors who are building or modifying infobox templates. For guidance on how to use a particular infobox in articles, refer to that infobox's individual template documentation.
Philosophy
Most infoboxes are constructed from the same few components: A title, an image, and a table. However, before the introduction of the Common Infobox styling, every infobox had to style each of these components manually. As a result, infoboxes across the wiki end up being styled in a variety of different ways, and any styling issues have to be corrected separately for each individual infobox. Some infoboxes even allow individual transclusions to provide styling information, meaning that styling issues can be caused by individual pages, not just individual infobox templates.
It is common for styling issues to only be applicable at certain resolutions, on certain devices (e.g. mobile), in certain browsers, or in certain skins. It is not reasonable to expect users to check any infobox styling changes they make across various devices, browsers, skins, and resolutions; and even if they do observe minor styling issues, they may not be equipped to solve them. Instead, by having a global set of styles used for a large number of different infoboxes, users editing or creating infobox templates do not need to worry about styling, as they can just use Common Infobox styling to easily assemble infoboxes. When styling issues are discovered in the Common Infobox styles, they can be updated in a single centralized location, automatically updating all instances across the wiki (instead of each individual infobox template needing to be updated).
Usage
In order to maximize the benefits of a global infobox style system, it is important to minimize the custom styling used on individual infoboxes. The infobox components provided by the Common Infobox design system should be sufficient for most infobox usages. In the rare cases that custom styling is required, custom infobox elements should still aim to utilize built-in Common Infobox functionality as much as possible.
In particular, it is important that articles that transclude infoboxes cannot provide styling information (except colors) to the infobox (such as image sizing, infobox width, etc.). Colors should be provided through dedicated template parameters, not by applying them to text provided to the infobox. (For example, instead of providing |name={{color|FFF|Page title}} as an infobox parameter, the text and the text color should be provided as separate parameters, or the text color should be determined automatically by the infobox styling.) Similarly, transclusions should not abuse {{!}} to pass additional parameters into the infobox. (For example, transclusions should not specify an image as |image=Example.png{{!}}250px to pass an additional size parameter into the infobox.)
Individual element types have their own guidelines for use, which are detailed in the sections below.
Note that the Common Infobox styling is intended for building templates, which can be transcluded into mainspace pages. Raw Common Infobox styling should not be placed directly in mainspace pages.
Outer element
The basic structure of a Common Infobox is an outer container <div class="common-infobox"> element, with the infobox components placed directly inside it. The Common Infobox stylesheet must also be included using TemplateStyles, by placing <templatestyles src="Template:Common Infobox/styles.css" /> at the top of the template.
Editors are strongly discouraged from applying any styling to the outer container other than colors, as this interferes with the universal nature of the design. Infobox templates that restyle the outer element are at risk of encountering styling issues when the Common Infobox styles are updated.
Color
Specifying a background-color on this element will apply that color throughout the infobox, and will automatically colorize the rest of infobox accordingly. This color should be the medium color template (e.g. {{red color}} rather than {{red color light}} or {{red color dark}}), as it will automatically be lightened and darkened as appropriate throughout the rest of the infobox.
Content
<templatestyles src="Template:Common Infobox/styles.css" />
<div class="common-infobox" style="background-color: #{{grass color}};">
Content
</div>
A border will be automatically added around the infobox based on the background-color, so it is normally not necessary to specify a separate border color. However, if the infobox should have a different color for its border, it can be manually specified using border-color. Do not set the border color using the border shorthand property, as this will inadvertently override the border styling that Common Infobox provides.
Content
<templatestyles src="Template:Common Infobox/styles.css" />
<div class="common-infobox" style="background-color: #{{electric color}}; border-color: #{{water color dark}};">
Content
</div>
Components
Title
The first element on an infobox will usually be the title element.
The title element consists of an outer <div> element (infobox-title), and inner sub-elements for the title in different languages. The English name (infobox-title-primary) should be placed first, the name in another language (infobox-title-ja or similar) second, and the translation of that foreign name (infobox-title-trans) last. For cases where one of these names does not exist, simply omit that sub-element.
Ensure that the foreign name has lang set on it, to ensure that it renders appropriately for that language. This is particularly important for Japanese and Chinese, to ensure that Unicode Han characters correctly render as Japanese kanji (lang="ja"), Traditional Chinese hanzi (lang="zh-Hant"), or Simplified Chinese hanzi (lang="zh-Hans"). The lang property only exists in HTML and not CSS, so it cannot be provided by the Common Infobox directly.
English
日本語
Japanese
<div class="common-infobox" style="background-color: #{{grass color}};">
<div class="infobox-title">
<div class="infobox-title-primary">English</div>
<div class="infobox-title-ja" lang="ja">日本語</div>
<div class="infobox-title-trans">Japanese</div>
</div>
</div>
In the vast majority of cases, the foreign language used will be Japanese. However, Common Infobox still supports the small number of cases in which another language needs to be displayed here instead.
English
简化字
Simplified Chinese
<div class="common-infobox" style="background-color: #{{grass color}};">
<div class="infobox-title">
<div class="infobox-title-primary">English</div>
<div class="infobox-title-zh" lang="zh-Hans">简化字</div>
<div class="infobox-title-trans">Simplified Chinese</div>
</div>
</div>
English
français
French
<div class="common-infobox" style="background-color: #{{grass color}};">
<div class="infobox-title">
<div class="infobox-title-primary">English</div>
<div class="infobox-title-fr" lang="fr">français</div>
<div class="infobox-title-trans">French</div>
</div>
</div>
Layout
Common Infobox provides two distinct means of arranging the names within the title element: tall and compact. In the tall layout, all of the names are stacked directly on top of each other; in the compact layout, the English name is placed on the left of the title element while the Japanese name and translation are placed on the right. The tall layout is better for longer names, as they may be forced to line-wrap in the compact layout.
The tall layout is used by default. To enable the compact layout, add the class infobox-title-compact to the title element.
English
日本語
Japanese
<div class="common-infobox" style="background-color: #{{grass color}};">
<div class="infobox-title infobox-title-compact">
<div class="infobox-title-en">English</div>
<div class="infobox-title-ja" lang="ja">日本語</div>
<div class="infobox-title-trans">Japanese</div>
</div>
</div>
Both layouts look the same if the Japanese name is missing, allowing the the Japanese name to be optional with either layout.
English
<div class="common-infobox" style="background-color: #{{grass color}};">
<div class="infobox-title infobox-title-compact">
<div class="infobox-title-en">English</div>
</div>
</div>
English
<div class="common-infobox" style="background-color: #{{grass color}};">
<div class="infobox-title infobox-title-tall">
<div class="infobox-title-en">English</div>
</div>
</div>
Icon
An icon can be added to the title area by assigning it the class infobox-icon. This ideally would be an image, but it could reasonably include other styling as well (e.g. a border around the image). The icon will render against the right edge of the title area.
While the icon can be used with either the tall or compact layout, it is generally recommended to use it with the tall layout, due to occupying the same space that the Japanese name would normally occupy in the compact layout.
In order to ensure that the presence of the floating icon does not interfere with the centering of the title, in the tall layout the icon is absolutely positioned. If the title is long enough, the icon could theoretically overlap with the text, as it does not flow with the adjacent text. If you observe this happening in an article, please leave a comment on the talk page.
English
日本語
Japanese
<div class="common-infobox" style="background-color: #{{grass color}};">
<div class="infobox-title infobox-title-compact">
<div class="infobox-title-en">English</div>
<div class="infobox-title-ja" lang="ja">日本語</div>
<div class="infobox-title-trans">Japanese</div>
<div class="infobox-icon">[[File:Grass-attack.png|20px|link=Grass (TCG)]]</div>
</div>
</div>
Image
Most infoboxes display a large image directly below the title.
The image element is a <div> element (infobox-image), with an image placed inside it. The element also supports an optional caption below the image (infobox-image-caption).
It is strongly recommended that templates do not make the image size an input parameter that can be configured differently on different pages, as this is part of the infobox's styling rather than the properties of an individual page. To prevent images being stretched beyond their native resolution, the image's display format can be set to frameless (see the example in #Tabbed images below). Infoboxes that expect to display portrait images may benefit from providing a maximum height for the infobox image as well as a maximum width (e.g. specifying an image's size as 350x200px restricts its width to up to 350px and its height to up to 200px).
Due to the Common Infobox's width, a width of 350px is typically a good width for the infobox image, although individual infobox templates may choose different image sizes to use.
The image should ideally be wrapped in a <div> before being placed in the infobox-image element, as this better supports cases where multiple images are used.
Bulbasaur
<div class="common-infobox" style="background-color: #{{grass color}};">
<div class="infobox-image">
<div>[[File:0001Bulbasaur.png|350px]]</div>
<div class="infobox-image-caption">Bulbasaur</div>
</div>
</div>
Multiple images and/or captions can be placed inside the same infobox-image element. Simply place as many of these sub-elements as is desired. (In the following example, <hr /> has been used to provide visual separation between the two images, but it is entirely optional.)
The Nintendo GameCube logo
An Indigo Nintendo GameCube
<div class="common-infobox" style="background-color: #{{grass color}};">
<div class="infobox-image">
<div>[[File:Nintendo GameCube Logo.png|350px]]</div>
<div class="infobox-image-caption">The Nintendo GameCube logo</div>
<hr/>
<div>[[File:GameCube.png|350px]]</div>
<div class="infobox-image-caption">An Indigo Nintendo GameCube</div>
</div>
</div>
Tabbed images
Multiple images can be placed in a scrollable gallery using TabberNeue. Simply put the Tabber element inside the infobox-image element, and place the images and their respective captions inside the desired tabs. Common Infobox will automatically style the tabs appropriately.
Zen Mode
Galarian form (Standard Mode)
Galarian form (Zen Mode)
<div class="common-infobox" style="background-color: #{{grass color}};">
<div class="infobox-image">
<tabber>
|-| Standard Mode =
<div>[[File:0555Darmanitan.png|frameless|350px]]</div>
<div class="infobox-image-caption">Standard Mode</div>
|-| Zen Mode =
<div>[[File:0555Darmanitan-Zen.png|frameless|350px]]</div>
<div class="infobox-image-caption">Zen Mode</div>
|-| Galarian form (Standard Mode) =
<div>[[File:0555Darmanitan-Galar.png|frameless|350px]]</div>
<div class="infobox-image-caption">Galarian form (Standard Mode)</div>
|-| Galarian form (Zen Mode) =
<div>[[File:0555Darmanitan-Galar Zen.png|frameless|350px]]</div>
<div class="infobox-image-caption">Galarian form (Zen Mode)</div>
</tabber>
</div>
</div>
Table
Tables form the core of most infoboxes. Tables can simply be placed inside a Common Infobox and they will be styled automatically, without any need for inline styles.
Pair table
Most data inside infoboxes is presented in simple key-value tables, which the pair table is optimised to present. To specify that a table is a pair-table, simply add class="pair-table" to the top of the table.
A pair table must have exactly two columns, where the left column consists of row headers and the right column consists of values. Pair tables should not have column headers.
| Type | Grass |
|---|---|
| HP | 110 |
| Evolution stage | Basic Pokémon |
| Species | Bulbasaur |
<div class="common-infobox" style="background-color: #{{grass color}};">
{| class="pair-table"
! {{TCG|Type}}
| {{TCG|Grass}}
|-
! {{TCG|HP}}
| 110
|-
! Evolution stage
| {{TCG|Basic Pokémon}}
|-
! Species
| {{TCG|Bulbasaur}}
|}
</div>
Freeform table
Tables that do not fit the strict requirements of pair tables can also be used. No class needs to be assigned to freeform tables, just ensure that they are not mistakenly given the pair-table class. Freeform tables can have any number of columns, although keep in mind that the infobox is fairly narrow.
However, it is important that rowspan is not used within the table, as this will interfere with the rounding of the bottom corners of the table.
| Card no. | Expansion | Pack(s) | Rarity |
|---|---|---|---|
| 002/226 | Genetic Apex | Mewtwo | ♦♦ |
| 211/155 | Celestial Guardians | Solgaleo | ✷ |
| 003/353 | Deluxe Pack: ex | Any | ♦♦ |
| 004/353 | Deluxe Pack: ex | Any | ♦♦ |
<div class="common-infobox" style="background-color: #{{grass color}};">
{|
! Card no.
! Expansion
! Pack(s)
! Rarity
|-
| 002/226
| {{TCGP|Genetic Apex}}
| Mewtwo
| ♦♦
|-
| 211/155
| {{TCGP|Celestial Guardians}}
| Solgaleo
| ✷
|-
| 003/353
| {{TCGP|Deluxe Pack: ex}}
| Any
| ♦♦
|-
| 004/353
| {{TCGP|Deluxe Pack: ex}}
| Any
| ♦♦
|}
</div>
Table with subheaders
Sometimes, it may be desirable to create a table with subheaders that act as dividers between rows. Subheaders can be created as header cells that colspan all columns.
When doing this, it is helpful for the column headers to be a different color to the subheaders. By adding the class subheader-table to the table, this changes the color of the column headers to a darker shade, to better contrast with the subheaders.
| Card no. | Pack(s) | Rarity |
|---|---|---|
| Genetic Apex | ||
| 002/226 | Mewtwo | ♦♦ |
| Celestial Guardians | ||
| 211/155 | Solgaleo | ✷ |
| Deluxe Pack: ex | ||
| 003/353 | Any | ♦♦ |
| 004/353 | Any | ♦♦ |
<div class="common-infobox" style="background-color: #{{grass color}};">
{| class="subheader-table"
! Card no.
! Pack(s)
! Rarity
|-
! colspan=3 | {{TCGP|Genetic Apex}}
|-
| 002/226
| Mewtwo
| ♦♦
|-
! colspan=3 | {{TCGP|Celestial Guardians}}
|-
| 211/155
| Solgaleo
| ✷
|-
! colspan=3 | {{TCGP|Deluxe Pack: ex}}
|-
| 003/353
| Any
| ♦♦
|-
| 004/353
| Any
| ♦♦
|}
</div>
Table caption
Table captions can be added using the standard MediaWiki syntax, and will be automatically styled by the Common Infobox. Table captions can be used regardless of whether the table is a pair table or freeform table.
| Type | Grass |
|---|---|
| HP | 110 |
| Evolution stage | Basic Pokémon |
| Species | Bulbasaur |
<div class="common-infobox" style="background-color: #{{grass color}};">
{| class="pair-table"
|+ TCG properties
|-
! {{TCG|Type}}
| {{TCG|Grass}}
|-
! {{TCG|HP}}
| 110
|-
! Evolution stage
| {{TCG|Basic Pokémon}}
|-
! Species
| {{TCG|Bulbasaur}}
|}
</div>
Table captions are useful when stacking multiple tables, to highlight the breaks between the tables.
| Japan | July 15, 2006 |
|---|---|
| United States | March 23, 2007 |
| Japan | December 22, 2006 |
|---|---|
| United States | April 3, 2007 |
<div class="common-infobox" style="background-color: #{{grass color}};">
{| class="pair-table"
|+ Premiere
|-
! Japan
| July 15, 2006
|-
! United States
| March 23, 2007
|}
{| class="pair-table"
|+ Home video
|-
! Japan
| December 22, 2006
|-
! United States
| April 3, 2007
|}
</div>
Horizontal rule
Horizontal rules can be added to visually separate infobox elements. They can be added using <hr />
<div class="common-infobox" style="background-color: #{{grass color}};">
{|
! [[Height]]
| 2'04"
| 0.7 m
|-
! [[Weight]]
| 15.2 lbs.
| 6.9 kg
|}
<hr />
{| class="pair-table"
|+ {{pkmn|Breeding}}
|-
! [[Egg group]]s
| [[{{{egg group 1|Unknown}}} (Egg Group)|{{{egg group 1|Unknown}}}]] {{#if: {{{egg group 2|}}} | and [[{{{egg group 2|Unknown}}} (Egg Group)|{{{egg group 2|Unknown}}}]] | }}
|-
! [[Egg cycle]]s
| {{{egg cycles|Unknown}}} {{#if: {{{egg cycles-note|}}} | <div class="infobox-note">{{{egg cycles-note}}}</div> | }}
|}
</div>
Custom elements
To support custom infobox elements, the Common Infobox styles provide several classes that support styling custom elements similarly to predefined components. Custom elements should be used sparingly.
Infobox element
To define a custom element, simply add the class infobox-element-content to the content area (i.e. the area excluding the subheader) of that element. This adds some basic styling, such as a background color and rounded corners, to help ensure the element aligns with the styling of the rest of the infobox.
This can be placed directly inside the root-level infobox, although depending on the context, it may make more sense to place it inside another element instead.
Custom element
<div class="common-infobox" style="background-color: #{{grass color}};">
<div class="infobox-element-content">
<div>Custom element</div>
</div>
</div>
Infobox text element
An infobox text element is very similar to a generic infobox element, but has a background that better contrasts with the text. To define a custom text element, simply add the class infobox-text-element to the content area (i.e. the area excluding the subheader) of that element.
This can be placed directly inside the root-level infobox, although depending on the context, it may make more sense to place it inside another element instead.
Custom element
<templatestyles src="Template:Common Infobox/styles.css" />
<div class="common-infobox" style="background-color: #{{grass color}};">
<div class="infobox-text-element">
<div>Custom element</div>
</div>
</div>
Subheader
The subheader mimics the styling of table headers in the Common Infobox. To define a subheader, simply add the class subheader to the subheader.
The subheader will typically be used with one of the two generic infobox elements, to create a custom box inside the infobox styled similarly to a table.
Custom header
Custom element
<div class="common-infobox" style="background-color: #{{grass color}};">
<div>
<div class="subheader">Custom header</div>
<div class="infobox-element-content" style="text-align: center;">
<div>Custom element</div>
</div>
</div>
</div>
Custom header
Custom element
<div class="common-infobox" style="background-color: #{{grass color}};">
<div>
<div class="subheader">Custom header</div>
<div class="infobox-text-element" style="text-align: center;">
<div>Custom element</div>
</div>
</div>
</div>
Infobox array
Sometimes, it is useful to display multiple infobox elements inline in a single row. An infobox array allows a collection of elements (regardless of their content) to all be displayed in a single row, and can be created by applying the class infobox-array to the wrapper element.
In order to allow the elements to all align their heights, add the class infobox-element to the element that wraps each header and content area.
Custom header
Custom element
Custom header
Custom element with a large amount of text that line wraps
<templatestyles src="Template:Common Infobox/styles.css" />
<div class="common-infobox" style="background-color: #{{grass color}};">
<div class="infobox-array">
<div class="infobox-element">
<div class="subheader">Custom header</div>
<div class="infobox-element-content" style="text-align: center;">
<div>Custom element</div>
</div>
</div>
<div class="infobox-element">
<div class="subheader">Custom header</div>
<div class="infobox-text-element" style="text-align: center;">
<div>Custom element with a large amount of text that line wraps</div>
</div>
</div>
</div>
</div>