Template:Flat list

Template documentation follows
Note: the template above may sometimes be partially or fully invisible.
Visit "Template:Flat list/doc" to edit its documentation if it is available. (How does this work?)

This template provides a WCAG/ISO standards-compliant accessible alternative to comma-, dash- or other single character-delimited lists, per Manual of Style/Lists § Horizontal lists and Manual of Style:Accessibility § Horizontal lists.

Lists output by {{Flat list}} and {{Horizontal list}} are semantically and visually identical, differing only in the underlying wiki-markup they expect as input to create the lists.

Usage

{{Flat list}} starts a horizontal list, such as:

• cat
• dog
• horse
• cow
• sheep
• pig

{{Flat list|
* [[cat]]
* [[dog]]
* [[horse]]
* [[cow]]
* [[sheep]]
* [[pig]]
}}

If this template is used with no parameters, {{End flat list}} is required. For navigation boxes using {{Navbox}}, one can set |listclass=hlist and achieve the same styling without using this template. For image captions, list (i.e. leading asterisk) markup does not work, so consider using {{Horizontal list}} instead.

Parameters

This is the TemplateData for this template used by TemplateWizard, VisualEditor and other tools. See a monthly parameter usage report for Template:Flat list in articles based on its TemplateData.

TemplateData for Flat list

Used to create horizontal bulleted lists.

Parameter		Description	Type	Status
Content	1	The list to wrap.	Content	suggested
Extra Classes	class	Adds extra CSS classes to the containing div.	String	optional
CSS Style	style	Adds extra CSS properties to the containing div. Complex styles should not be used in articles (per MOS:DEVIATIONS) but may be acceptable on user, project and talk pages. Example border: solid 1px silver; background: lightyellow; color: black;	String	optional
Indent	indent	Indents the list by a number of standard indents (one indent being 1.6em). (Useful in an indented discussion thread.) Example 2	Number	optional

Format: block

Examples

{{Flat list|
* [[cat]]
* [[dog]]
* [[horse]]
* [[cow]]
* [[sheep]]
* [[pig]]
}}

produces:

• cat
• dog
• horse
• cow
• sheep
• pig

Alternative syntax

{{Start flat list}}
* [[cat]]
* [[dog]]
* [[horse]]
* [[cow]]
* [[sheep]]
* [[pig]]
{{End flat list}}

produces:

• cat
• dog
• horse
• cow
• sheep
• pig

Syntax for ordered lists

{{Flat list|
# [[first]]
# [[second]]
# [[3|third]]
# [[fourth]]
# [[fifth]]
# [[sixth]]
}}

produces:

1. first
2. second
3. third
4. fourth
5. fifth
6. sixth

Using optional parameters

{{Flat list|indent=2|class=nowraplinks|style=background-color: var(--background-color-notice-subtle, lightgray); border: thin solid silver; color: var(--color-base, black);|
* [[Alpine skiing at the 1936 Winter Olympics]]
* [[Alpine skiing at the 1948 Winter Olympics]]
* [[Alpine skiing at the 1952 Winter Olympics]]
* [[Alpine skiing at the 1956 Winter Olympics]]
* [[Alpine skiing at the 1960 Winter Olympics]]
* [[Alpine skiing at the 1964 Winter Olympics]]
}}

produces:

• Alpine skiing at the 1936 Winter Olympics
• Alpine skiing at the 1948 Winter Olympics
• Alpine skiing at the 1952 Winter Olympics
• Alpine skiing at the 1956 Winter Olympics
• Alpine skiing at the 1960 Winter Olympics
• Alpine skiing at the 1964 Winter Olympics

Generating an inline list preceded by text

In some situations, it may be useful to present an inline list preceded by other text. Normally, this template is rendered as a block element that starts on a new line. In order to prevent that new line, use |class=inline and wrap the preceding text and this template in <div>...</div> tags (div tags are not necessary if the template is inside a table cell).

Without div tags (normal usage; note that class=inline does not work)

Here's a list: {{flat list
|class=inline
|1=
* foo
* bar
* baz
}}

produces:

Here's a list:

• foo
• bar
• baz

With div tags (class=inline works)

<div>Here's a list: {{flat list
|class=inline
|1=
* foo
* bar
* baz
}}</div>

produces:

Here's a list:

• foo
• bar
• baz

Technical details

This template uses the .hlist CSS class defined in Template:Hlist/styles.css to generate horizontal lists. It causes ordinary HTML list items to be displayed inline (horizontally), where normally they would be displayed as block elements (vertically). The class also generates the interpuncts between list items and parentheses around nested lists.

Wikitext	Expanded template	HTML
{{Flat list| * cat * dog * horse * cow * sheep * pig }}	'"`UNIQ--templatestyles-0000002F-QINU`"'<div class="hlist " > * cat * dog * horse * cow * sheep * pig </div>	<div class="hlist"><ul> <li>cat</li> <li>dog</li> <li>horse</li> <li>cow</li> <li>sheep</li> <li>pig</li> </ul></div>

Maintenance categories

• Category:Pages using flat list with unknown parameters (0)

See also

• {{End flat list}}
• {{Horizontal list}}
• {{Plain list}} and {{Unbulleted list}}
• {{Bulleted list}}
• {{Ordered list}}
• {{Nowrap}}
• {{Page list}}
• Manual of Style:Accessibility § Horizontal lists

Horizontal list {{horizontal list|item1 |item2 }} item1 item2		Horizontal list {{flat list| * item1 * item2}} item1 item2		Horizontal list {{comma-separated list|item1 |item2 }} item1 item2
Bulleted list {{bulleted list|item1 |item2 }} item1 item2		Numeric ordered list {{Ordered list|first |second }} first second		Alphabetic ordered list {{Ordered list|list_style_type=lower-alpha |first |second }} first second
Unbulleted list {{unbulleted list|item1 |item2 }} item1 item2		Unbulleted list {{plain list| * item1 * item2}} item1 item2		Glossary or definition list {{glossary}} {{term|first term}} {{defn|first description}} {{term|second term}} {{defn|second description}} {{glossary end}} first term first description second term second description
Bulleted list to flow around an image [[File:Bad Title Example.png|left|thumb|100px]] {{flowing list| *item1 *item2}} item1 item2		Ordered list in columns {{columns list|colwidth=5em| # first # second}} first second