Typography

Titles & Paragraphs

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex odio eligendi officia dolorem maxime, voluptatum facere minus unde at suscipit maiores cumque eos. Officiis, dolore? Cumque dolor reprehenderit, voluptatem repudiandae. Laborum ratione unde, provident facilis veniam amet doloribus suscipit aliquid esse ad natus repudiandae dolorum animi, consequuntur cumque at dicta, officia quas. Unde, suscipit molestias odio tempore id alias, aliquam illum fugiat accusantium provident quae autem soluta velit, maxime delectus! Velit fuga, est vitae. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores inventore possimus similique repellat, nostrum veritatis, non saepe cumque, eligendi vel libero in laborum laboriosam, consectetur quisquam nihil perferendis soluta at. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi recusandae ab, natus corrupti, voluptates officia quisquam quos beatae culpa rem architecto, deserunt officiis dicta iste accusamus ducimus doloremque minima nam!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam vitae nesciunt repudiandae rem, quae tenetur id, nobis vel esse adipisci consequuntur eos officia, alias nemo exercitationem repellat velit molestias voluptates.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita dolorem odio deleniti dolores, error vel accusamus ipsa adipisci esse libero optio iusto minus, ullam temporibus placeat ea? Quidem nihil, perspiciatis!

H1 Proin gravida nibh vel velit auctor aliquetoin

H2 Aenean sollicitudin, lorem quis bibendum auctor elit

H3 Duis sed odio sit amet nibh vulputate cursus a sit amet.

H4 Morbi accumsan ipsum velit.

H5 Nam nec tellus a odio tincidunt auctor a ornare odio.

H6 Sed non neque elit. Sed ut imperdiet nisi.

H1 Proin gravida nibh vel velit auctor aliquetoin

H2 Aenean sollicitudin, lorem quis bibendum auctor

H3 Duis sed odio sit amet nibh vulputate cursus a sit amet.

H4 Morbi accumsan ipsum velit.

H5 Nam nec tellus a odio tincidunt auctor a ornare odio.

H6 Sed non neque elit. Sed ut imperdiet nisi.

Lists

Proin gravida nibh vel velit auctor aliquet
Duis sed odio sit amet nibh vulputate cursus a sit amet mauris.
- Morbi accumsan ipsum velit. Nam nec tellus aitae ass aptent taciti sociosqu ad litora torquent
- per conubia nostra, per inceptos himenaeos.
  - Mauris in erat justo.
  - Proin gravida nibh vel velit auctor aliquet
- Duis sed odio sit amet nibh vulputate cursus a sit amet mauris.
- Morbi accumsan ipsum velit. Nam nec tellus aitae ass aptent taciti sociosqu ad litora
Yorquent per conubia nostra, per inceptos himenaeos.
Mauris in erat justo.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis nam id facilis, provident doloremque placeat eveniet molestias laboriosam. Optio esse ipsa, neque, hic culpa laborum quisquam magni consequatur quaerat voluptates!

Proin gravida nibh vel velit auctor aliquet
Duis sed odio sit amet nibh vulputate cursus a sit amet mauris.
1. Morbi accumsan ipsum velit. Nam nec tellus aitae ass aptent taciti sociosqu ad litora torquent
2. per conubia nostra, per inceptos himenaeos.
  1. Mauris in erat justo.
  2. Proin gravida nibh vel velit auctor aliquet
3. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris.
4. Morbi accumsan ipsum velit. Nam nec tellus aitae ass aptent taciti sociosqu ad litora
Yorquent per conubia nostra, per inceptos himenaeos.
Mauris in erat justo.

Quotes

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Someone famous

Description lists

Description lists: A description list defines terms and their corresponding descriptions.
This is a term: This is a description.
This is a term: This is a description.

Code

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>Sample document</title>
</head>
<body>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque architecto eius nemo voluptatem assumenda, impedit adipisci beatae modi hic nostrum natus fugiat illo rem quia, consequuntur blanditiis tempora nihil. Voluptatibus.</p>
</body>
</html>

function $initHighlight(block, cls) {
	try {
		if (cls.search(/\bno\-highlight\b/) != -1)
			return process(block, true, 0x0F) +
						` class="${cls}"`;
	} catch (e) {
		/* handle exception */
	}
	for (var i = 0 / 2; i < classes.length; i++) {
		if (checkCondition(classes[i]) === undefined)
			console.log('undefined');
	}
}

export  $initHighlight;

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>Document</title>
	</head>
	<body>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque architecto eius nemo voluptatem assumenda, impedit adipisci beatae modi hic nostrum natus fugiat illo rem quia, consequuntur blanditiis tempora nihil. Voluptatibus.</p>
	</body>
</html>

Tables

Unstyled

Unstyled table

Name	Phone	Address	City	State
Name	Phone	Address	City	State
Cecil Robertson	208-457-7742	3243 Oak Ridge Ln	Louisville	Kentucky
Irene Holland	317-471-0278	12 Blossom Hill Rd	Miami	Florida
Elizabeth Richardson	171-969-6566	261 James St	Colorado Springs	Colorado

Without modifers

Table wihout modifers

Name	Phone	Address	City	State
Name	Phone	Address	City	State
Cecil Robertson	208-457-7742	3243 Oak Ridge Ln	Louisville	Kentucky
Irene Holland	317-471-0278	12 Blossom Hill Rd	Miami	Florida
Elizabeth Richardson	171-969-6566	261 James St	Colorado Springs	Colorado

Header dividers

Add dividers to thead and tfoot, set the header-dividers modifer

Name	Phone	Address	City	State
Name	Phone	Address	City	State
Cecil Robertson	208-457-7742	3243 Oak Ridge Ln	Louisville	Kentucky
Irene Holland	317-471-0278	12 Blossom Hill Rd	Miami	Florida
Elizabeth Richardson	171-969-6566	261 James St	Colorado Springs	Colorado

Hoverable

Add hover state on the table rows, set the hoverable modifer

Name	Phone	Address	City	State
Name	Phone	Address	City	State
Cecil Robertson	208-457-7742	3243 Oak Ridge Ln	Louisville	Kentucky
Irene Holland	317-471-0278	12 Blossom Hill Rd	Miami	Florida
Elizabeth Richardson	171-969-6566	261 James St	Colorado Springs	Colorado

Vertical lines

To draw only vertical borders, set the vertical modifer

Name	Phone	Address	City	State
Name	Phone	Address	City	State
Cecil Robertson	208-457-7742	3243 Oak Ridge Ln	Louisville	Kentucky
Irene Holland	317-471-0278	12 Blossom Hill Rd	Miami	Florida
Elizabeth Richardson	171-969-6566	261 James St	Colorado Springs	Colorado

Horizontal lines

To draw only horizontal borders, set the horizontal modifer

Name	Phone	Address	City	State
Name	Phone	Address	City	State
Cecil Robertson	208-457-7742	3243 Oak Ridge Ln	Louisville	Kentucky
Irene Holland	317-471-0278	12 Blossom Hill Rd	Miami	Florida
Elizabeth Richardson	171-969-6566	261 James St	Colorado Springs	Colorado

All borders

To draw all borders, set the bordered modifer

Name	Phone	Address	City	State
Name	Phone	Address	City	State
Cecil Robertson	208-457-7742	3243 Oak Ridge Ln	Louisville	Kentucky
Irene Holland	317-471-0278	12 Blossom Hill Rd	Miami	Florida
Elizabeth Richardson	171-969-6566	261 James St	Colorado Springs	Colorado

Striped

If you want add horizontal stripes, set the striped modifer

Name	Phone	Address	City	State
Name	Phone	Address	City	State
Cecil Robertson	208-457-7742	3243 Oak Ridge Ln	Louisville	Kentucky
Irene Holland	317-471-0278	12 Blossom Hill Rd	Miami	Florida
Elizabeth Richardson	171-969-6566	261 James St	Colorado Springs	Colorado

Justified

To remove the outer padding of the first and last column so that they are flush with the table, set the justified modifer

Name	Phone	Address	City	State
Name	Phone	Address	City	State
Cecil Robertson	208-457-7742	3243 Oak Ridge Ln	Louisville	Kentucky
Irene Holland	317-471-0278	12 Blossom Hill Rd	Miami	Florida
Elizabeth Richardson	171-969-6566	261 James St	Colorado Springs	Colorado

Contained

To add borders around all table, set the contained modifer

Name	Phone	Address	City	State
Name	Phone	Address	City	State
Cecil Robertson	208-457-7742	3243 Oak Ridge Ln	Louisville	Kentucky
Irene Holland	317-471-0278	12 Blossom Hill Rd	Miami	Florida
Elizabeth Richardson	171-969-6566	261 James St	Colorado Springs	Colorado

Compressed

To make the table cells more compact, set the compressed modifer

Name	Phone	Address	City	State
Name	Phone	Address	City	State
Cecil Robertson	208-457-7742	3243 Oak Ridge Ln	Louisville	Kentucky
Irene Holland	317-471-0278	12 Blossom Hill Rd	Miami	Florida
Elizabeth Richardson	171-969-6566	261 James St	Colorado Springs	Colorado

Expanded

To make the table cells more wide, set the expanded modifer

Name	Phone	Address	City	State
Name	Phone	Address	City	State
Cecil Robertson	208-457-7742	3243 Oak Ridge Ln	Louisville	Kentucky
Irene Holland	317-471-0278	12 Blossom Hill Rd	Miami	Florida
Elizabeth Richardson	171-969-6566	261 James St	Colorado Springs	Colorado

Responsive

If you want table columns to stack on small screens, set the responsive modifer. All tables in this demo are responsive.

Name	Phone	Address	City	State
Name	Phone	Address	City	State
Cecil Robertson	208-457-7742	3243 Oak Ridge Ln	Louisville	Kentucky
Irene Holland	317-471-0278	12 Blossom Hill Rd	Miami	Florida
Elizabeth Richardson	171-969-6566	261 James St	Colorado Springs	Colorado

Caption and colgroup

Table with(scope="col") caption, colgroup, thead, tfoot, and tbody
Name	Phone	Address	City	State
Name	Phone	Address	City	State
Cecil Robertson	208-457-7742	3243 Oak Ridge Ln	Louisville	Kentucky
Irene Holland	317-471-0278	12 Blossom Hill Rd	Miami	Florida
Elizabeth Richardson	171-969-6566	261 James St	Colorado Springs	Colorado

Text level elements

Text levelHTML elements may be used within other elements. They include:

<a href="#">link or anchor</a>
<abbr> represents an abbreviation or acronym
 for emphasized text
 for strongly emphasized
<dfn> for definition of a term
<code> for code fragment
<samp> for sample text
<kbd> for keyboard input
<var> for variable
<cite> for short citation
 for italics
 for bold
for underlined text
~~<s>~~for text that is no longer correct
<big> for larger text
for smaller text
^ for superscript
_ for subscript
~~<del>~~ for visibly deleted
<ins> for inserted content
<dfn> for definitions
for highlighted passages
<hr> for horizontal line