loading-img

Typography

img
Stephen Doe
  1. Dashboard
  2. Typography
General

Google Web Fonts

Modern using Google Web Font. You can change your fonts only editing one line code.

General Font

Modern using general font as Open Sans.

Open Sans Light 300

Open Sans Light 300 Italic

Open Sans Normal 400

Open Sans Normal 400 Italic

Open Sans Semi-Bold 600

Open Sans Semi-Bold 600 Italic

Open Sans Bold 700

Open Sans Bold 700 Italic

Open Sans Extra-Bold 800

Open Sans Extra-Bold 800 Italic

General Options

We set it line height as 1.7em and default font size as 13px

Basic Colors

Theme Colors

Title Font

Title font is Montserrat. You can add anything as .font-title

Montserrat Normal 400

Montserrat Bold 700

Headings

Default

All HTML headings, <h1> through <h6>, are available. .h1 through .h6 classes are also available, for when you want to match the font styling of a heading but still want your text to be displayed inline.

h1. Bootstrap heading

h2. Bootstrap heading

h3. Bootstrap heading

h4. Bootstrap heading

h5. Bootstrap heading
h6. Bootstrap heading

Headings with secondary text

Create lighter, secondary text in any heading with a generic <small> tag or the .small class.

h1. Bootstrap heading Secondary text

h2. Bootstrap heading Secondary text

h3. Bootstrap heading Secondary text

h4. Bootstrap heading Secondary text

h5. Bootstrap heading Secondary text
h6. Bootstrap heading Secondary text
Paragraph

Basic

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pharetra metus a augue pellentesque aliquet. Duis id elit dolor. Pellentesque gravida molestie egestas. Phasellus neque leo, fermentum at lobortis nec, efficitur in ante.

Vestibulum enim diam, facilisis eu luctus vel, rhoncus in lectus. Vestibulum faucibus nec elit sed mollis. Vestibulum convallis tellus quis dictum convallis. Vivamus euismod nunc ut dolor finibus, eget gravida eros porta. Suspendisse eu lorem vel ex iaculis venenatis a ut lorem.

Vestibulum sed vestibulum neque, sed vehicula lectus. Nam a diam sollicitudin, gravida nisi quis, ultrices dolor. Vestibulum viverra dignissim mollis. Morbi consectetur rhoncus augue nec maximus. Quisque aliquam lacinia metus, a iaculis magna fringilla et. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Headings with secondary text

Make a paragraph stand out by adding .lead.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pharetra metus a augue pellentesque aliquet. Duis id elit dolor. Pellentesque gravida molestie egestas. Phasellus neque leo, fermentum at lobortis nec, efficitur in ante.Fusce pharetra metus a augue

Inline text elements

Marked Text

You can use the mark tag to highlight text.

Deleted text

This line of text is meant to be treated as deleted text.

Strikethrough text

This line of text is meant to be treated as no longer accurate.

Inserted text

This line of text is meant to be treated as an addition to the document.

Underlined text

This line of text will render as underlined

Small text

This line of text is meant to be treated as fine print.

Alignment and Transformation

Alignment classes

Left aligned text.

Center aligned text.

Right aligned text.

Justified text.

No wrap text.

Transformation classes

Lowercased text.

Uppercased text.

Capitalized text.

Abbreviations

Stylized implementation of HTML's <abbr> element for abbreviations and acronyms to show the expanded version on hover. Abbreviations with a title attribute have a light dotted bottom border and a help cursor on hover, providing additional context on hover and to users of assistive technologies.

Basic abbreviation

An abbreviation of the word attribute is attr

Initialism

HTML is the best thing since sliced bread.
ADDRESSES
Making Good Things, Inc.
692 Merry Poe Ave, Suite 201
San Francisco, CA 96540
P: (123) 456-7890
Full Name
first.last@example.com
Unordered List
  • Home
  • About Us
  • Works
  • Jobs
    • Designer
    • Front-end Developer
    • IOS Developer
  • Contact
Ordered List
  1. Home
  2. About Us
  3. Works
  4. Jobs
    1. Designer
    2. Front-end Developer
    3. IOS Developer
  5. Contact
Unstyled List
  • Home
  • About Us
  • Works
  • Jobs
    • Designer
    • Front-end Developer
    • IOS Developer
  • Contact
Inline List
  • Home
  • Works
  • Jobs
  • Contact
Blockquotes

Default blockquote

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Naming a source

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Alternate displays

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title
Descriptions

Normal

Donec lobortis justo at aliquet
Sed tincidunt pharetra ante, tempus imperdiet elit sodales id. Donec lobortis justo at aliquet luctus. Praesent interdum massa sed ex efficitur, vitae dignissim ante pharetra
Tempus imperdiet elit
Sed tincidunt pharetra ante, tempus imperdiet elit sodales id. Donec lobortis justo at aliquet luctus. Praesent interdum massa sed ex efficitur, vitae dignissim ante pharetra
Praesent interdum
Sed tincidunt pharetra ante, tempus imperdiet elit sodales id. Donec lobortis justo at aliquet luctus. Praesent interdum massa sed ex efficitur, vitae dignissim ante pharetra

Horizontal

Donec lobortis justo at aliquet
Sed tincidunt pharetra ante, tempus imperdiet elit sodales id. Donec lobortis justo at aliquet luctus. Praesent interdum massa sed ex efficitur, vitae dignissim ante pharetra
Tempus imperdiet elit
Sed tincidunt pharetra ante, tempus imperdiet elit sodales id. Donec lobortis justo at aliquet luctus. Praesent interdum massa sed ex efficitur, vitae dignissim ante pharetra
Praesent interdum
Sed tincidunt pharetra ante, tempus imperdiet elit sodales id. Donec lobortis justo at aliquet luctus. Praesent interdum massa sed ex efficitur, vitae dignissim ante pharetra
To-do List
TODAY
TOMORROW
Copyright © 2018.Company name All rights reserved.网页模板