Typography | Porto Admin - Responsive HTML5 Template 1.4.1

- 3
- 4
- 3

John Doe Junior administrator

## Typography

## Headings

All HTML headings, `<h1>` through `<h6>`, are available.

# h1. Heading 1

## h2. Heading 2

### h3. Heading 3

#### h4. Heading 4

##### h5. Heading 5

###### h6. Heading 6

## Paragraphs

Make a paragraph stand out by adding lead class, and check out the alternative font style.

Mauris aliquet ultricies ante, non lorem ipsumdolor. Sed ultrices pellentesque purus, vulputate.

Check the alternative font style.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a adipiscing lectus. Aenean fermentum mauris erat, quis accumsan eros facilisis sed. Nullam convallis arcu nec imperdiet pharetra. Suspendisse sed pharetra orci. Integer elementum augue sed dui sollicitudin, eu molestie leo rutrum. Vestibulum sit amet ullamcorper nunc.

Mauris aliquet ultricies non faucibus ante gravida sed. Sed ultrices pellentesque purus, vulputate.

Check the alternative font style.

Porto Admin is incredibly especially extremely beautiful and fully responsive.

## Alignments

It's easy to align the text the way you want

left

center

Justify Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a adipiscing lectus. Aenean fermentum mauris erat, quis accumsan eros facilisis sed. Nullam convallis arcu nec imperdiet pharetra. Suspendisse sed pharetra orci. Integer elementum augue sed dui sollicitudin, eu molestie leo rutrum. Vestibulum sit amet ullamcorper nunc. Aliquam ligula dolor, feugiat sit amet nulla vitae, consequat ornare nunc. Proin scelerisque ligula purus, sed sodales tortor sodales non. Donec vel dolor cursus, ornare ipsum non, molestie neque. Quisque sed justo nunc. Sed tempus tellus nunc.

right

## States

Text styles/states can be changed with css classes.

`.text-muted`
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a adipiscing lectus. Aenean fermentum mauris erat, quis accumsan eros facilisis sed.

`.text-primary`
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a adipiscing lectus. Aenean fermentum mauris erat, quis accumsan eros facilisis sed.

`.text-success`
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a adipiscing lectus. Aenean fermentum mauris erat, quis accumsan eros facilisis sed.

`.text-warning`
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a adipiscing lectus. Aenean fermentum mauris erat, quis accumsan eros facilisis sed.

`.text-danger`
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a adipiscing lectus. Aenean fermentum mauris erat, quis accumsan eros facilisis sed.

`.text-info`
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a adipiscing lectus. Aenean fermentum mauris erat, quis accumsan eros facilisis sed.

`.text-dark`
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a adipiscing lectus. Aenean fermentum mauris erat, quis accumsan eros facilisis sed.

## Drop Caps

Dropcaps styles can be changed with css classes.

Pellentesque pellentesque eget tempor tellus. Fusce lacllentesque eget tempor tellus ellentesque pelleinia tempor malesuada. Pellentesque pellentesque eget tempor tellus ellentesque pellentesque eget tempor tellus. Fusce lacinia tempor malesuada. Pellentesque pellentesque eget tempor tellus ellentesque pellentesque eget tempor tellus. Fusce lacinia tempor malesuada.

Pellentesque pellentesque eget tempor tellus. Fusce lacllentesque eget tempor tellus ellentesque pelleinia tempor malesuada. Pellentesque pellentesque eget tempor tellus ellentesque pellentesque eget tempor tellus. Fusce lacinia tempor malesuada. Pellentesque pellentesque eget tempor tellus ellentesque pellentesque eget tempor tellus. Fusce lacinia tempor malesuada.

Pellentesque pellentesque eget tempor tellus. Fusce lacllentesque eget tempor tellus ellentesque pelleinia tempor malesuada. Pellentesque pellentesque eget tempor tellus ellentesque pellentesque eget tempor tellus. Fusce lacinia tempor malesuada. Pellentesque pellentesque eget tempor tellus ellentesque pellentesque eget tempor tellus. Fusce lacinia tempor malesuada.

Pellentesque pellentesque eget tempor tellus. Fusce lacllentesque eget tempor tellus ellentesque pelleinia tempor malesuada. Pellentesque pellentesque eget tempor tellus ellentesque pellentesque eget tempor tellus. Fusce lacinia tempor malesuada. Pellentesque pellentesque eget tempor tellus ellentesque pellentesque eget tempor tellus. Fusce lacinia tempor malesuada.

## Blockquotes

Blockquote styles can be changed with css classes.

> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Duis mollis, est non commodo luctus, nisi erat porttitor ligula integer posuere erat a ante.

> A. Einstein, Magazine X

`.b-thin`

> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Duis mollis, est non commodo luctus, nisi erat porttitor ligula integer posuere erat a ante.

`.b-thick`

> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Duis mollis, est non commodo luctus, nisi erat porttitor ligula integer posuere erat a ante.

`.b-thin`

> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Duis mollis, est non commodo luctus, nisi erat porttitor ligula integer posuere erat a ante.

`.blockquote-reverse`

> Learn from yesterday, live for today, hope for tomorrow. The important thing is not to stop questioning.

> A. Einstein, Magazine X

`.primary`

> Learn from yesterday, live for today, hope for tomorrow. The important thing is not to stop questioning.

> A. Einstein, Magazine X

`.success`

> Learn from yesterday, live for today, hope for tomorrow. The important thing is not to stop questioning.

> A. Einstein, Magazine X

`.warning`

> Learn from yesterday, live for today, hope for tomorrow. The important thing is not to stop questioning.

> A. Einstein, Magazine X

`.danger`

> Learn from yesterday, live for today, hope for tomorrow. The important thing is not to stop questioning.

> A. Einstein, Magazine X

`.info`

> Learn from yesterday, live for today, hope for tomorrow. The important thing is not to stop questioning.

> A. Einstein, Magazine X

`.dark`

> Learn from yesterday, live for today, hope for tomorrow. The important thing is not to stop questioning.

> A. Einstein, Magazine X

## Wells

Use the well as a simple effect on an element to give it an inset effect.

Lorem ipsum dolor sit amet
`.well-sm`
Lorem ipsum dolor sit amet
`.well-lg`
Lorem ipsum dolor sit amet
`.primary`
Lorem ipsum dolor sit amet
`.success`
Lorem ipsum dolor sit amet
`.warning`
Lorem ipsum dolor sit amet
`.danger`
Lorem ipsum dolor sit amet
`.info`
Lorem ipsum dolor sit amet
`.dark`
Lorem ipsum dolor sit amet

## Unordered List

A list of items in which the order does not explicitly matter.

- Lorem ipsum dolor sit amet.
- Lorem ipsum dolor sit amet.
- Lorem ipsum dolor sit amet.
- Lorem ipsum dolor sit amet.
  - Lorem ipsum dolor sit amet.
  - Lorem ipsum dolor sit amet.
  - Lorem ipsum dolor sit amet.
- Lorem ipsum dolor sit amet.
- Lorem ipsum dolor sit amet.
- Lorem ipsum dolor sit amet.
- Lorem ipsum dolor sit amet.

## Ordered List

A list of items in which the order does explicitly matter.

1. Lorem ipsum dolor sit amet.
2. Lorem ipsum dolor sit amet.
3. Lorem ipsum dolor sit amet.
4. Lorem ipsum dolor sit amet.
   1. Lorem ipsum dolor sit amet.
   2. Lorem ipsum dolor sit amet.
   3. Lorem ipsum dolor sit amet.
5. Lorem ipsum dolor sit amet.
6. Lorem ipsum dolor sit amet.
7. Lorem ipsum dolor sit amet.
8. Lorem ipsum dolor sit amet.

## Unstyled List

Remove the default list-style and left margin on list items (immediate children only).

- Lorem ipsum dolor sit amet.
- Lorem ipsum dolor sit amet.
- Lorem ipsum dolor sit amet.
- Lorem ipsum dolor sit amet.
  - Lorem ipsum dolor sit amet.
  - Lorem ipsum dolor sit amet.
  - Lorem ipsum dolor sit amet.
- Lorem ipsum dolor sit amet.
- Lorem ipsum dolor sit amet.
- Lorem ipsum dolor sit amet.
- Lorem ipsum dolor sit amet.

## Inline List

Place all list items on a single line with display: inline-block; and some light padding.

- 1 - Lorem ipsum dolor sit amet.
- 2 - Lorem ipsum dolor sit amet.
- 3 - Lorem ipsum dolor sit amet.
- 4 - Lorem ipsum dolor sit amet.