Typography - ZUI Documentation

Summary

Typography is not a specific pattern. This page is merely a placeholder to show how all normal HTML elements look like.

There are no attributes defined for this pattern.

Name	Description
`zui-text-left`	Aligns the textual content to the left side.
`zui-text-right`	Aligns the textual content to the right side.
`zui-text-center`	Aligns the textual content in the center.
`zui-text-justify`	Aligns the textual content to the left and right side.

Name	Description
`zui-anchor-color`	The color of anchors.
`zui-anchor-color-disabled`	The color of disabled anchors.
`zui-anchor-text-decoration`	The text decoration of anchors.
`zui-anchor-text-decoration-hover`	The text decoration of anchors when hovered.
`zui-anchor-cursor-disabled`	The cursor used for anchors that are disabled.
`zui-blockquote-border-size`	The border size of blockquotes.
`zui-blockquote-border-style`	The border style of blockquotes.
`zui-blockquote-border-color`	The border color of blockquotes.
`zui-blockquote-color`	The textual color of blockquotes.
`zui-blockquote-margin`	The margin of blockquotes.
`zui-blockquote-padding`	The padding of blockquotes.
`zui-body-background`	The background color of the body.
`zui-body-font-color`	The font color of the body.
`zui-body-font-family`	The font family of the body.
`zui-body-font-size`	The font size of the body.
`zui-body-font-style`	The font style of the body.
`zui-body-font-weight`	The font weight of the body.
`zui-body-line-height`	The line height of the body.
`zui-horizontal-line-selector`	The selector that matches a horizontal line.
`zui-horizontal-line-background`	The background of the horizontal line. Usually just the color.
`zui-horizontal-line-border`	The border of the horizontal line. Usually just the size.
`zui-horizontal-line-height`	The height of the horizontal line.
`zui-horizontal-line-margin`	The margin of the horizontal line.
`zui-list-margin`	The margin of lists

Example

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi a rhoncus arcu, vitae mollis diam. Cras sodales magna cursus libero porttitor mattis. Duis sollicitudin vulputate nulla et congue. Maecenas porta libero quis lorem consectetur finibus. Duis nec euismod lectus. Phasellus consequat vulputate suscipit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean aliquet nunc non velit sagittis placerat. Quisque nec felis enim. Morbi ut tincidunt nisi, vel dapibus est. Pellentesque ipsum dolor, malesuada et leo et, pulvinar lacinia sem. Vivamus bibendum ipsum ante, eu consectetur enim ullamcorper luctus. Nam sollicitudin varius nisl vitae tempus. Quisque tempus venenatis quam eget sollicitudin.

All that is gold does not glitter, not all those who wander are lost; The old that is strong does not wither, deep roots are not reached by the frost.

From the ashes a fire shall be woken, a light from the shadows shall spring; Renewed shall be blade that was broken, the crownless again shall be king.
J.R.R. Tolkien, The Fellowship of the Ring

Maecenas cursus luctus metus, et suscipit urna. Sed lacinia nec turpis in aliquet. Curabitur porttitor tortor in ornare aliquam. Phasellus eu tortor scelerisque velit faucibus tristique a nec eros. Nullam aliquam felis tortor, vel ultricies dolor tristique et. Etiam semper, tortor at iaculis commodo, dolor quam lobortis risus, in facilisis massa elit non odio. Donec lacinia augue quis massa molestie, blandit egestas eros vehicula. Praesent risus nibh, placerat quis felis id, commodo lacinia felis. Morbi non enim non felis convallis tempus sed et justo. Cras odio odio, blandit eu massa vitae, sagittis maximus diam. Mauris ac vehicula tellus. Praesent mauris ipsum, rhoncus non hendrerit non, aliquam non est. Donec tempor convallis elit, ut maximus justo auctor eu. Suspendisse a sapien egestas, blandit odio a, consequat justo.

Item
Item
Item
1. Item
2. Item
3. Item
Item
Item

Item
Item
Item
1. Item
2. Item
3. Item
Item
Item

Coffee: Black hot drink
Milk: White cold drink

Markup

Just use plain HTML.