Community Central

READ MORE

Community Central
Community Central

Portable infoboxes include a wide variety of tags and options that you can use to make the infobox display how you want. Below we have listed all the standard tags, with sample wikitext and output HTML, to help you identify what you need to use, and how to give it a CSS makeover (see also Help:Infoboxes/CSS). Note that parser functions can also be used.

All infobox fields should be declared using XML convention, with attributes used for field configuration.

infobox[]

The <infobox> tag holds all others and delimits the scope of the infobox.

Valid tags[]

Parent tags Child tags
None
  • <title>
  • <image>
  • <header>
  • <navigation>
  • <data>
  • <group>
  • <panel>

Attributes[]

theme
The name of the theme to apply. Adds a class to the infobox of the form .pi-theme-$1, with spaces transformed into hyphens (-). Does not overwrite theme-source or type.
theme-source
The name of the parameter to use as a theme. Adds a class to the infobox of the form .pi-theme-$1, with spaces transformed into hyphens (-). Does not overwrite theme or type.
type
The name of the type to apply. Adds a class to the infobox of the form .type-$1, with spaces transformed into hyphens (-). Does not overwrite theme or theme-source.
accent-color-source
The name of the parameter to use as an accent color.
accent-color-default
The default accent color. Accepts a 3- or 6-digit hexadecimal color code, e.g. #f00 or #ff0000.
accent-color-text-source
The name of the parameter to use as a text accent color.
accent-color-text-default
The default text accent color. Accepts a 3- or 6-digit hexadecimal color code, e.g. #f00 or #ff0000.
layout
Possible values: default, stacked.
name
Internal name for the element and its children. Assigned to the data-item-name attribute in the resulting HTML.

HTML output[]

Input
<infobox>
    <title source="title_source" />
</infobox>
Output
<aside class="portable-infobox pi-background pi-border-color pi-theme-wikia pi-layout-default">
    <h2 class="pi-item pi-item-spacing pi-title pi-secondary-background" data-source="title_source">Title</h2>
</aside>

title[]

The <title> tag states infobox title. Images used in <title> tags do not appear on mobile.

Valid tags[]

Parent tags Child tags
  • <infobox>
  • <group>
  • <section>
  • <default>
  • <format>

Attributes[]

source
The name of the parameter to use.
name
Internal name for the element and its children. Assigned to the data-item-name attribute in the resulting HTML.

HTML output[]

Input
<title source="title_source">
    <default>{{PAGENAME}}</default>
</title>
Output
<h2 class="pi-item pi-item-spacing pi-title pi-secondary-background" data-source="title_source">Page name</h2>

data[]

The <data> tag is the standard key-value tag.

Valid tags[]

Parent tags Child tags
  • <infobox>
  • <group>
  • <section>
  • <default>
  • <label>
  • <format>

Attributes[]

source
The name of the parameter to use.
span
The number of columns to span. Only available in smart groups.
layout
Possible values: default. Only available in smart groups.
name
Internal name for the element and its children. Assigned to the data-item-name attribute in the resulting HTML.

HTML output[]

Input
<data source="name">
    <label>First name</label>
    <default>John</default>
</data>
Output
<div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="name">
    <h3 class="pi-data-label pi-secondary-font">First name</h3>
    <div class="pi-data-value pi-font">John</div>
</div>

label[]

The <label> tag can be used only inside other tags, check child tags column for more info. Accepts wikitext. On mobile, HTML tags in <label> will be removed, leaving only their contents.

Valid tags[]

Parent tags Child tags
  • <data>
  • <section>
None

Attributes[]

None.

HTML output[]

Input
<label>First name</label>
Output
<h3 class="pi-data-label pi-secondary-font">First name</h3>

default[]

The <default> tag text is used when "source" data is not specified, can be used only inside other tags, check child tags column for more info. Accepts wikitext.

Valid tags[]

Parent tags Child tags
  • <title>
  • <data>
  • <image>
  • <alt>
  • <caption>
None

Attributes[]

None.

HTML output[]

Input
<default>John</default>
Output
<div class="pi-data-value pi-font">John</div>

format[]

The <format> tag can be used only inside other tags, check child tags column for more info. Accepts wikitext.

Valid tags[]

Parent tags Child tags
  • <title>
  • <data>
  • <caption>
None

Attributes[]

None.

HTML output[]

Input
<data source="dollars">
    <label>Regular price</label>
    <format>${{{dollars}}}</format>
</data>
Output
<div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="dollars">
    <h3 class="pi-data-label pi-secondary-font">Regular price</h3>
    <div class="pi-data-value pi-font">$15</div>
</div>

image[]

The <image> tag is used to insert images or video inside an infobox. It can only be styled using the community's CSS, and cannot be manually resized. Images are normalized, such that [[File:Example.jpg]] and Example.jpg do the same thing. Multiple images can be passed by using a <gallery> tag.

Here, the <default> tag is used to specify an image to be used when no image has been chosen on an article. For example, <default>Example.jpg</default>.

Valid tags[]

Parent tags Child tags
  • <infobox>
  • <group>
  • <section>
  • <alt>
  • <caption>
  • <default>

Attributes[]

source
The name of the parameter to use.
name
Internal name for the element and its children. Assigned to the data-item-name attribute in the resulting HTML.

HTML output[]

Input
<image source="image" />
Output
<figure class="pi-item pi-image" data-source="image">
    <a class="image image-thumbnail" href=".../Image.jpg/revision/latest/..." title="">
        <img class="pi-image-thumbnail" src="...Image.jpg..." srcset="...Image.jpg... 2x" alt="" data-image-key="Image.jpg" data-image-name="Image.jpg" width="" height="">
    </a>
</figure>

alt[]

The <alt> tag can be used only inside <image> tag.

Valid tags[]

Parent tags Child tags
  • <image>
  • <default>

Attributes[]

source
The name of the parameter to use.

HTML output[]

Input
<image source="image">
    <alt source="alternative_title">
        <default>Default alt text</default>
    </alt>
</image>
Output
<figure class="pi-item pi-image" data-source="image">
    <a class="image image-thumbnail" href=".../Image.jpg/revision/latest/..." title="Default alt text">
        <img class="pi-image-thumbnail" src="...Image.jpg..." srcset="...Image.jpg... 2x" alt="Default alt text" data-image-key="Image.jpg" data-image-name="Image.jpg" width="" height="">
    </a>
</figure>

caption[]

The <caption> tag can be used only inside <image> tag.

Valid tags[]

Parent tags Child tags
  • <image>
  • <default>
  • <format>

Attributes[]

source
The name of the parameter to use.

HTML output[]

Input
<image source="image">
    <caption source="caption">
        <default>My caption</default>
    </caption>
</image>
Output on desktop
<figcaption class="pi-item-spacing pi-caption">My caption</figcaption>
Output on mobile
No output. The caption tag is ignored and does not appear on mobile browsers.

group[]

The <group> tag is used for grouping fields, and optionally accepts a header for each group. A group won't be rendered (including any headers) if all fields are empty. However, if the show attribute is set to incomplete, it will render all of the group's fields if at least one field is not empty.

Valid tags[]

Parent tags Child tags
  • <infobox>
  • <group>
  • <section>
  • <data>
  • <header>
  • <image>
  • <title>
  • <group> (not available in horizontal groups, but allowed in smart groups)
  • <navigation>
  • <panel>

Attributes[]

layout
Possible values: default, horizontal.
show
Possible values: default, incomplete.
collapse
Possible values: open, closed. Only available if the group's first child is a <header> tag.
row-items
Turns the group into a smart group spanning n columns. Smart groups arrange their cells (<data> tags) horizontally, and automatically wrap to a new row once the current one exceeds that limit. Cells are stretched to take up as much space as possible on the last row.
name
Internal name for the element and its children. Assigned to the data-item-name attribute in the resulting HTML.

HTML output[]

Default group[]

Input
<group>
    <header>Group name</header>
    <data source="value1" />
</group>
Output
<section class="pi-item pi-group pi-border-color">
    <h2 class="pi-item pi-header pi-secondary-font pi-item-spacing pi-secondary-background">Group name</h2>
    <div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="value1">
        <div class="pi-data-value pi-font">Data value</div>
    </div>
</section>

Horizontal group[]

Input
<group layout="horizontal">
    <header>Group name</header>
    <data source="value1">
        <label>Data label</label>
    </data>
</group>
Output
<section class="pi-item pi-group pi-border-color">
    <table class="pi-horizontal-group">
        <caption class="pi-header pi-secondary-font pi-secondary-background pi-item-spacing">Group name</caption>
        <thead>
            <tr>
                <th class="pi-horizontal-group-item pi-data-label pi-secondary-font pi-border-color pi-item-spacing" data-source="value1">Data label</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="pi-horizontal-group-item pi-data-value pi-font pi-border-color pi-item-spacing" data-source="value1">Data value</td>
            </tr>
        </tbody>
    </table>
</section>

Smart group[]

Input
<group row-items="3">
    <header>Section Header</header>
    <data source="value 1">
        <label>Label 1</label>
    </data>
    <data source="value 2">
        <label>Label 2</label>
    </data>
    <data source="value 3">
        <label>Label 3</label>
    </data>
    <data source="value 4" layout="default">
        <label>Label 4</label>
    </data>
    <data source="value 5">
        <label>Label 5</label>
    </data>
    <data source="value 6">
        <label>Label 6</label>
    </data>
</group>
Output
<section class="pi-item pi-group pi-border-color">
    <h2 class="pi-item pi-header pi-secondary-font pi-item-spacing pi-secondary-background">Section Header</h2>
    <section class="pi-item pi-smart-group pi-border-color">
        <section class="pi-smart-group-head pi-border-color">
            <h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing pi-border-color" style="width: calc(1 / 3 * 100%);" data-source="value 1">Label 1</h3>
            <h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing pi-border-color" style="width: calc(1 / 3 * 100%);" data-source="value 2">Label 2</h3>
            <h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing pi-border-color" style="width: calc(1 / 3 * 100%);" data-source="value 3">Label 3</h3>
        </section>
        <section class="pi-smart-group-body pi-border-color">
            <div class="pi-smart-data-value pi-data-value pi-font pi-item-spacing pi-border-color" style="width: calc(1 / 3 * 100%);" data-source="value 1">AAA</div>
            <div class="pi-smart-data-value pi-data-value pi-font pi-item-spacing pi-border-color" style="width: calc(1 / 3 * 100%);" data-source="value 2">BBB</div>
            <div class="pi-smart-data-value pi-data-value pi-font pi-item-spacing pi-border-color" style="width: calc(1 / 3 * 100%);" data-source="value 3">CCC</div>
        </section>
    </section>
    <div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="value 4">
        <h3 class="pi-data-label pi-secondary-font">Label 4</h3>
        <div class="pi-data-value pi-font">DDD</div>
    </div>
    <section class="pi-item pi-smart-group pi-border-color">
        <section class="pi-smart-group-head pi-border-color">
            <h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing pi-border-color" style="width: calc(1 / 2 * 100%);" data-source="value 5">Label 5</h3>
            <h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing pi-border-color" style="width: calc(1 / 2 * 100%);" data-source="value 6">Label 6</h3>
        </section>
        <section class="pi-smart-group-body pi-border-color">
            <div class="pi-smart-data-value pi-data-value pi-font pi-item-spacing pi-border-color" style="width: calc(1 / 2 * 100%);" data-source="value 5">EEE</div>
            <div class="pi-smart-data-value pi-data-value pi-font pi-item-spacing pi-border-color" style="width: calc(1 / 2 * 100%);" data-source="value 6">FFF</div>
        </section>
    </section>
</section>

header[]

The <header> tag denotes the beginning of a section or group of tags.

Valid tags[]

Parent tags Child tags
  • <infobox>
  • <group>
  • <panel>
  • <section>
None

Attributes[]

name
Internal name for the element and its children. Assigned to the data-item-name attribute in the resulting HTML.

HTML output[]

Input
<header>Header Text</header>
Default group output
<h2 class="pi-item pi-header pi-secondary-font pi-item-spacing pi-secondary-background">Header Text</h2>
Horizontal group output
<caption class="pi-header pi-secondary-font pi-secondary-background pi-item-spacing">Header Text</caption>

navigation[]

The <navigation> tag is generally used for providing page links for navigation. It accepts any wikitext.

Valid tags[]

Parent tags Child tags
None

Attributes[]

name
Internal name for the element and its children. Assigned to the data-item-name attribute in the resulting HTML.

HTML output[]

Input
<navigation>[[Link]]</navigation>
Output
<nav class="pi-navigation pi-item-spacing pi-secondary-font">
    <a href="/wiki/Link" title="Link">Link</a>
</nav>

panel[]

The <panel> tag is used to create tabbed interfaces, where the contents of each tab is wrapped in a <section> tag.

Valid tags[]

Parent tags Child tags
  • <infobox>
  • <group>
  • <header>
  • <section>

Attributes[]

name
Internal name for the element and its children. Assigned to the data-item-name attribute in the resulting HTML.

HTML output[]

Input
<panel>
    <section>
        <label>A</label>
        <data source="one" />
        <data source="two" />
    </section>
    <section>
        <label>B</label>
        <data source="three" />
        <data source="four" />
    </section>
</panel>
Output
<section class="pi-item pi-panel pi-border-color wds-tabber">
    <div class="wds-tabs__wrapper">
        <div class="wds-tabs__arrow-left" />
        <ul class="wds-tabs">
            <li class="wds-tabs__tab wds-is-current">
                <div class="wds-tabs__tab-label">A</div>
            </li>
            <li class="wds-tabs__tab">
                <div class="wds-tabs__tab-label">B</div>
            </li>
        </ul>
        <div class="wds-tabs__arrow-right" />
    </div>
    <div class="wds-tab__content wds-is-current">
        <div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="one">
            <div class="pi-data-value pi-font">1st</div>
        </div>
        <div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="two">
            <div class="pi-data-value pi-font">2nd</div>
        </div>
    </div>
    <div class="wds-tab__content">
        <div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="three">
            <div class="pi-data-value pi-font">3rd</div>
        </div>
        <div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="four">
            <div class="pi-data-value pi-font">4th</div>
        </div>
    </div>
</section>

section[]

The <section> tag represents the contents of a tab. The clickable toggle is represented by a <label> tag. Labels default to their zero-based index if omitted; if all tabs within a panel are unlabeled, then they are stacked vertically.

Valid tags[]

Parent tags Child tags
  • <panel>
  • <title>
  • <data>
  • <label>
  • <image>
  • <group>
  • <header>
  • <navigation>

Attributes[]

name
Internal name for the element and its children. Assigned to the data-item-name attribute in the resulting HTML.

HTML output[]

Input
<section>
    <label>A</label>
    <data source="one" />
    <data source="two" />
</section>
Output
<div class="wds-tab__content">
    <div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="one">
        <div class="pi-data-value pi-font">1st</div>
    </div>
    <div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="two">
        <div class="pi-data-value pi-font">2nd</div>
    </div>
</div>