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[1].
Basic tags
infobox
| Attributes |
|
|---|---|
| Child tags |
|
The tag which holds all others and delimits the scope of the infobox.
<infobox>
<title source="title_source" />
</infobox>
<aside class="portable-infobox pi-background pi-theme-wikia pi-layout-default">
<h2 class="pi-item pi-item-spacing pi-title">Title</h2>
</aside>
title
| Attributes |
|
|---|---|
| Child tags |
|
States infobox title. Images used in title tags do not appear on mobile[2].
<title source="title_source">
<default>{{PAGENAME}}</default>
</title>
<h2 class="pi-item pi-item-spacing pi-title">Page name</h2>
data
| Attributes |
|
|---|---|
| Child tags |
|
Standard key value tag.
<data source="name">
<label>First name</label>
<default>John</default>
</data>
<div class="pi-item pi-item-spacing pi-data pi-border-color">
<h3 class="pi-secondary-font pi-data-label">First name</h3>
<div class="pi-font pi-data-value">John</div>
</div>
Output modifiers
label
| Attributes | None |
|---|---|
| Child tags | None |
Label tag, can be used only inside other tags, check child tags column for more info. Accepts wikitext.
default
| Attributes | None |
|---|---|
| Child tags | None |
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.
format
| Attributes | None |
|---|---|
| Child tags | None |
Format tag, can be used only inside other tags, check child tags column for more info. Accepts wikitext.
<data source="dollars">
<label>Regular price</label>
<format>${{{dollars}}}</format>
</data>
<div class="pi-item pi-item-spacing pi-data pi-border-color">
<h3 class="pi-secondary-font pi-data-label">Regular price</h3>
<div class="pi-font pi-data-value">$15</div>
</div>
Image tags
image
| Attributes |
|
|---|---|
| Child tags |
|
Image tag, used to insert images or video inside an infobox. It can only be styled using the community's CSS, and cannot be manually resized. Multiple images can be passed by {{#NewWindowLink:http://community.wikia.com/index.php?title=Thread:935527%7Cusing 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>
<image source="image" />
<figure class="pi-item pi-image">
<a href=".../File:Image.jpg" class="image image-thumbnail" title="">
<img src="Image.jpg" class="pi-image-thumbnail" alt="" width="" height="" data-image-key="Image.jpg" data-image-name="Image.jpg">
</a>
</figure>
alt
| Attributes |
|
|---|---|
| Child tags |
|
Can be used only inside image tag.
<image source="image">
<alt source="alternative_title">
<default>Default alt text</default>
</alt>
</image>
<figure class="pi-item pi-image">
<a href=".../File:Image.jpg" class="image image-thumbnail" title="Default alt text">
<img src="Image.jpg" class="pi-image-thumbnail" alt="Default alt text" width="" height="" data-image-key="Image.jpg" data-image-name="Image.jpg">
</a>
</figure>
caption
| Attributes |
|
|---|---|
| Child tags |
|
Can be used only inside image tag.
<image source="image">
<caption source="caption">
<default>My caption</default>
</caption>
</image>
<figcaption class="pi-item-spacing pi-caption">My caption</figcaption>
Other tags
group
| Attributes |
|
|---|---|
| Child tags |
|
Used for grouping fields, can provide header for each group. Group won't be rendered (including header) when all fields are empty. However, if the attribute show="incomplete" is used, it will render all of the group's fields if at least one field is not empty.
Default group
<group>
<header>Group name</header>
<data source="value1" />
</group>
<section class="pi-item pi-group pi-border-color">
<h2 class="pi-item pi-secondary-font pi-item-spacing pi-secondary-background pi-header">Group name</h2>
<div class="pi-item pi-item-spacing pi-data pi-border-color">
<div class="pi-font pi-data-value">Data value</div>
</div>
</section>
Horizontal group
<group layout="horizontal">
<header>Group name</header>
<data source="value1">
<label>Data label</label>
</data>
</group>
<section class="pi-item pi-group pi-border-color">
<table class="pi-horizontal-group">
<caption class="pi-secondary-font pi-secondary-background pi-item-spacing pi-header">Group name</caption>
<thead>
<tr>
<th class="pi-secondary-font pi-horizontal-group-item pi-data-label pi-border-color pi-item-spacing">Data label</th>
</tr>
</thead>
<tbody>
<tr>
<td class="pi-font pi-horizontal-group-item pi-data-value pi-border-color pi-item-spacing">Data value</td>
</tr>
</tbody>
</table>
</section>
header
| Attributes | None |
|---|---|
| Child tags | None |
Header tag denotes the beginning of a section or group of tags.
<header>Header Text</header>
- Default group
<h2 class="pi-item pi-secondary-font pi-item-spacing pi-secondary-background pi-header">Header Text</h2>
- Horizontal group
<caption class="pi-secondary-font pi-secondary-background pi-item-spacing pi-header">Header Text</caption>
| Attributes | None |
|---|---|
| Child tags | None |
Used for providing any wikitext.
<navigation>[[Link]]</navigation>
<nav class="pi-item-spacing pi-secondary-background pi-secondary-font pi-navigation">
<a href="/wiki/Link" title="Link">Link</a>
</nav>