Documentation
Typography
Documentation and examples for common text utilities to control alignment, wrapping, weight, and more.
Headings
H1 Heading
H2 Heading
H3 Heading
H4 Heading
H5 Heading
H6 Heading
Paragraphs
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum.
Semantic text elements
abbr
Bold
strong
b
Citation
cite
Hello World!
code
del
Emphasis
em
Italic
i
Inserted
ins
Ctrl + S
kbd
Highlighted
mark
s
Sample
samp
Text Subscripted
sub
Text Superscripted
sup
time
Underline
u
x = y + 2
var
Horizontal rules
Horizontal rules with label
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Optimized for different alphabets
Tabler has been optimized to correctly display content in any language. The Tabler supports most Asian, African and Middle Eastern languages.
Chinese
汉字
Japanese
日本語の表記体系
Korean
한글
Cyrillic
Кириллица
Greek
Eλληνική
Georgian
ქართული დამწერლობა
Armenian
Հայերենի այբուբեն
Arabic
الحروف العربية
Hebrew
אלפבית עברי
Thai
อักษรไทย
Text transform
Transform text in components with text capitalization classes.
Lowercased text.
Uppercased text.
Capitalized text.
Letter spacing
Utilities for controlling the tracking (letter spacing) of an element.
Lorem ipsum dolor sit amet. Tight letter spacing.
Lorem ipsum dolor sit amet. Normal letter spacing.
Lorem ipsum dolor sit amet. Wide letter spacing.
Line Height
Utilities for controlling the leading (line height) of an element.
Lorem ipsum dolor sit amet.
Dolor sit amet.
Lorem ipsum dolor sit amet.
Dolor sit amet.
Lorem ipsum dolor sit amet.
Dolor sit amet.
Lorem ipsum dolor sit amet.
Dolor sit amet.
Antialiasing
Utilities for controlling the font smoothing of an element.
Use the .antialiased
utility to render text using subpixel antialiasing or use the .subpixel-antialiased
render without antialiasing.
Markdown elements
When you can’t use the CSS classes you want, or when you just want to directly use HTML tags, use .markdown
as container. It can handle almost any HTML tag.
Hello World
Lorem ipsum[1] dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque. Subscript works as well!
Second level
Curabitur accumsan turpis pharetra augue tincidunt blandit. Quisque condimentum maximus mi, sit amet commodo arcu rutrum id. Proin pretium urna vel cursus venenatis. Suspendisse potenti. Etiam mattis sem rhoncus lacus dapibus facilisis. Donec at dignissim dui. Ut et neque nisl.
- In fermentum leo eu lectus mollis, quis dictum mi aliquet.
- Morbi eu nulla lobortis, lobortis est in, fringilla felis.
- Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.
- Ut non enim metus.