Template:Typography

A template for customizing text with various colors and formats.

Usage

Required parameters only, in horizontal format

{{Typography|text=}}

Full parameter set in horizontal format

{{Typography|tag=|id=|style=|type=|emphasis=|inverse=|color=|truncate=|smooth=|text=}}

A template for customizing text with various colors and formats.

Template parameters[Edit template data]

This template prefers inline formatting of parameters.

Parameter		Description	Type	Status
element tag	tag	Tag/element type that will wrap the output text. Valid values can be seen in Community Central.* Default span	String	suggested
id	id	Id of the resulting HTML element.	String	optional
style	style	Inline CSS styles of the resulting HTML element.	String	optional
text type	type	Type scale of the resulting text. You can see each type scale in the Sandbox's typography system section.** Valid values: headline1 (h1), headline2 (h2), headline3 (h3), headline4 (h4), headline5 (h5), headline6 (h6), subtitle1 (s1), subtitle2 (s2), body1 (b1), body2 (b2), caption (c), button (b), overline (o), footnote (f).	String	optional
text emphasis	emphasis	The opacity level of the resulting text. You can see examples in the Sandbox's hierarchy section.*** Valid values: on-background (onbg), primary (p, high [h]), secondary (s, medium [m]), and disabled (d).	String	optional
insert text color	inverse	If set to "yes", it will set the text's color to be the opposite one (doesn't apply to text that uses the color parameter).	String	optional
text color	color	Color of the resulting text. Examples can be seen in the Sandbox's color section.**** Valid values: red, pink, purple, deep-purple, indigo, blue, light-blue, cyan, teal, green, light-green, lime, yellow, amber, orange, deep-orange, brown, grey, gray, blue-grey, and blue-gray.	String	optional
truncate text	truncate	Whether the text will truncate showing ellipsis at the end of it if it's length is higher than the container's width and height. Valid values: ellipsis (e), ellipsis-flex (ef) Use "ellipsis-flex" (or "ef") if the container is a flex element.	String	optional
smooth text	smooth	If set to "yes", it will apply anti-aliasing when fonts are rendered.*****	String	optional
text	text	String with the resulting text. May include wikitext/html.	String	required

References

1. * Allowed HTML tags
2. ** Project:Sandbox § Typography system
3. *** Project:Sandbox § Hierarchy
4. **** Project:Sandbox § Colors
5. ***** font-smooth information on MDC Web Docs