Help:Infoboxes/Tags

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 tagsEdit

`infobox`Edit

Attributes	`theme` `theme-source` `layout` `accent-color-source` `accent-color-text-source` `accent-color-default` `accent-color-text-default`
Child tags	`title` `image` `header` `navigation` `data` `group`

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

Input	Output
<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`Edit

Attributes	`source`
Child tags	`default` `format`

States infobox title. Images used in title tags do not appear on mobile^[2].

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

`data`Edit

Attributes	`source` `span` `layout`
Child tags	`default` `label` `format`

Standard key value tag.

Input

Output

<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 modifiersEdit

`label`Edit

Attributes	None
Child tags	None

Label tag, can be used only inside other tags, check child tags column for more info. Accepts wikitext.

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

`default`Edit

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.

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

`format`Edit

Attributes	None
Child tags	None

Format tag, can be used only inside other tags, check child tags column for more info. Accepts wikitext.

Input

Output

<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 tagsEdit

`image`Edit

Attributes	`source`
Child tags	`alt` `caption` `default`

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 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>.

Input

Output

<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`Edit

Attributes	`source`
Child tags	`default`

Can be used only inside image tag.

Input

Output

<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`Edit

Attributes	`source`
Child tags	`default` `format`

Can be used only inside image tag.

Input	Output
<image source="image"> <caption source="caption"> <default>My caption</default> </caption> </image>	<figcaption class="pi-item-spacing pi-caption">My caption</figcaption>

Other tagsEdit

`group`Edit

Attributes	`layout` `show` `collapse` `row-items`
Child tags	`data` `header` `image` `title` `navigation`

Used for grouping fields, can provide 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.

Default groupEdit

Input

Output

<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 groupEdit

Input

Output

<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>

Smart groupEdit

Input

Output

<group row-items="3">
    <header>Section Header</header>
    <data source="row3">
      <label>Label</label>
    </data>
    <data source="row4">
      <label>Label</label>
    </data>
    <data source="row5">
      <label>Label</label>
    </data>
    <data source="row6">
      <label>Label</label>
    </data>
    <data source="row7">
      <label>Label</label>
    </data>
    <data source="row8" layout="default">
      <label>Label</label>
    </data>
    <data source="row9" layout="default">
      <label>Label</label>
    </data>
  </group>

<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">
 
                <h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing" style="width: calc(1 / 3 * 100%);">Label</h3>
 
                <h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing" style="width: calc(1 / 3 * 100%);">Label</h3>
 
                <h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing" style="width: calc(1 / 3 * 100%);">Label</h3>
 
        </section>
 
    <section class="pi-smart-group-body">
 
            <div class="pi-smart-data-value pi-data-value pi-font pi-item-spacing" style="width: calc(1 / 3 * 100%);">CCC</div>
 
            <div class="pi-smart-data-value pi-data-value pi-font pi-item-spacing" style="width: calc(1 / 3 * 100%);">DDD</div>
 
            <div class="pi-smart-data-value pi-data-value pi-font pi-item-spacing" style="width: calc(1 / 3 * 100%);">EEE</div>
 
    </section>
</section>
<section class="pi-item pi-smart-group pi-border-color">
 
        <section class="pi-smart-group-head">
 
                <h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing" style="width: calc(1 / 2 * 100%);">Label</h3>
 
                <h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing" style="width: calc(1 / 2 * 100%);">Label</h3>
 
        </section>
 
    <section class="pi-smart-group-body">
 
            <div class="pi-smart-data-value pi-data-value pi-font pi-item-spacing" style="width: calc(1 / 2 * 100%);">FFF</div>
 
            <div class="pi-smart-data-value pi-data-value pi-font pi-item-spacing" style="width: calc(1 / 2 * 100%);">GGG</div>
 
    </section>
</section>
 
<div class="pi-item pi-data pi-item-spacing pi-border-color">
 
		<h3 class="pi-data-label pi-secondary-font">Label</h3>
 
	<div class="pi-data-value pi-font">HHH</div>
</div>
 
<div class="pi-item pi-data pi-item-spacing pi-border-color">
 
		<h3 class="pi-data-label pi-secondary-font">Label</h3>
 
	<div class="pi-data-value pi-font">III</div>
</div>
</section>

`header`Edit

Attributes	None
Child tags	None

Header tag denotes the beginning of a section or group of tags.

Input

Output

<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>

`navigation`Edit

Attributes	None
Child tags	None

Used for providing any wikitext.

Input	Output
<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>

ReferencesEdit

[0] Wikibooks xml introduction

[1] Portability Hub Office Hours, 2015-11-26

[1]

[2]

Fandom

Help:Infoboxes/Tags

Help:Infoboxes/Tags

< Help:Infoboxes

Basic tagsEdit

`infobox`Edit

`title`Edit

`data`Edit

Output modifiersEdit

`label`Edit

`default`Edit

`format`Edit

Image tagsEdit

`image`Edit

`alt`Edit

`caption`Edit

Other tagsEdit

`group`Edit

Default groupEdit

Horizontal groupEdit

Smart groupEdit

`header`Edit

`navigation`Edit

ReferencesEdit

Fandom

Help:Infoboxes/Tags

Basic tagsEdit

infoboxEdit

titleEdit

dataEdit

Output modifiersEdit

labelEdit

defaultEdit

formatEdit

Image tagsEdit

imageEdit

altEdit

captionEdit

Other tagsEdit

groupEdit

Default groupEdit

Horizontal groupEdit

Smart groupEdit

headerEdit

navigationEdit

ReferencesEdit

`infobox`Edit

`title`Edit

`data`Edit

`label`Edit

`default`Edit

`format`Edit

`image`Edit

`alt`Edit

`caption`Edit

`group`Edit

`header`Edit

`navigation`Edit