Template:Classed heading/doc

Usage

This generates a HTML heading element for use in applying semantically-correct headings to works when == Equals syntax == is insufficient (perhaps because you want to apply a class, or have multiple lines).

It explicitly has no support for direct CSS formatting: it is designed for use with classes and/or index-specific CSS.

By default, the headings have the normal MediaWiki font sizes for headings, but are centred, not bolded and do not have an underline.

• level The heading level (default: 2)
• class Optional CSS classes (use this if you have multiple heading styles in a single work). The top-level heading element always has class .wst-heading as well as additional classes.
• id Optional ID (used as an anchor). If not given the contents of the first line is used. This parameter should also be used to add an suitable simple id, if markup or complex formatting is used in the first line (such as a footnote directly associated with the heading.)
• 1, 2, etc. The lines of the header. Each line is in a span under the default span with class .wst-heading-line and can be targeted with :nth-child as needed.

Example

{{classed heading|l=2|Line 1|Line 2}}
{{lorem ipsum}}

Line 1Line 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Example

{{classed heading|l=3|Line 1|Line 2}}
{{lorem ipsum}}

Line 1Line 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Common CSS examples

There are a few common styling choices you may wish to replicate. You can target specific levels using the hN tag names.

Margin/leading underneath the heading

Example: Page:Ayn Rand Anthem.pdf/21 (using Index:Ayn Rand Anthem.pdf/styles.css)

h3 .wst-heading-line {
    margin-bottom: 1.5em;
}

Small-caps for the second line onwards

h3 .wst-heading-line:nth-child(n+2) {
    font-variant: small-caps;
}

Also consider all-small-caps if you want Proper Nouns to appear in "all small caps", including the first letters: e.g. Oxford.

Left-aligned titles

Example: Page:The Sundering Flood - Morris - 1898.djvu/15 (using Index:The Sundering Flood - Morris - 1898.djvu/styles.css)

h3 .wst-heading {
    text-align: left;
}

Template data

This is the TemplateData documentation for this template used by VisualEditor and other tools.

Classed heading

Add an HTML header with optional classes

Template parameters

This template prefers inline formatting of parameters.

Parameter		Description	Type	Status
level	level l	The level of the heading (1 is the "biggest" heading) Default 3 Example 3	Number	suggested
1	1	First line of heading Example Chapter 1	Line	required
2	2	Second line of the heading Example Down the Rabbit-Hole	Line	optional
class	class	Optional class to use to target specific CSS Example chapter_heading	Line	optional
id	id	ID of the header - can be used for linking to sections Default Contents of the first line (parameter 1) Example chapter1	Unknown	optional