{"id":15934,"date":"2022-02-15T09:45:28","date_gmt":"2022-02-15T09:45:28","guid":{"rendered":"https:\/\/iu.edu.jo\/newweb\/typography\/"},"modified":"2022-02-15T09:45:28","modified_gmt":"2022-02-15T09:45:28","slug":"typography","status":"publish","type":"post","link":"https:\/\/iu.edu.jo\/newweb\/typography\/","title":{"rendered":"Typography"},"content":{"rendered":"

<\/p>\n

\n

Core Typography<\/h1>\n

\t<\/p>\n

\n
\n

Heading Text<\/h2>\n

h1. Heading Secondary text<\/small><\/h1>\n

h2. Heading Secondary text<\/small><\/h2>\n

h3. Heading Secondary text<\/small><\/h3>\n

h4. Heading Secondary text<\/small><\/h4>\n
h5. Heading Secondary text<\/small><\/h5>\n
h6. Heading Secondary text<\/small><\/h6>\n
\n

TIPS:<\/strong> Create lighter, secondary text in any heading with a generic <small><\/code> tag or the .small<\/code> class.<\/p>\n<\/p><\/div>\n<\/p><\/div>\n

\n

Example body text<\/h2>\n

This is a lead paragraph<\/strong>.
Make a paragraph stand out by adding .lead<\/code>.<\/p>\n

Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus.<\/p>\n

Nullam quis risus eget urna mollis ornare<\/a> vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.<\/p>\n

The following snippet of text is rendered as bold text<\/strong>.<\/p>\n

The following snippet of text is rendered as italicized text<\/em>.<\/p>\n

An abbreviation of the word attribute is attr<\/abbr>.<\/p>\n<\/p><\/div>\n<\/p><\/div>\n

\t <\/p>\n

\t<\/p>\n

\n
\n

Address<\/h2>\n
Company Name<\/strong>
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P:<\/abbr> (123) 456-7890<\/address>\n
Full Name<\/strong>
P:<\/abbr> (123) 456-7890
first.last@example.com<\/a><\/address>\n<\/p><\/div>\n
\n

Emphasis classes<\/h2>\n

This is a .mute<\/code> paragraph.<\/p>\n

This is a .text-primary<\/code> paragraph.<\/p>\n

This is a .text-warning<\/code> paragraph.<\/p>\n

This is a .text-danger<\/code> paragraph.<\/p>\n

This is a .text-success<\/code> paragraph.<\/p>\n

This is a .text-info<\/code> paragraph.<\/p>\n<\/p><\/div>\n

\n

Alignment classes<\/h2>\n

This is a left aligned text .text-left<\/code><\/p>\n

This is a center aligned text .text-center<\/code><\/p>\n

This is a right aligned text .text-right<\/code><\/p>\n

This is a justify aligned text which is often used in Book Design, Magazine or special Typo Pages. Create a justify aligned text with .text-justify<\/code> class.<\/p>\n<\/p><\/div>\n<\/p><\/div>\n

\t <\/p>\n<\/div>\n

<\/p>\n

<\/p>\n

\n
\n

Blockquotes<\/h1>\n<\/p><\/div>\n
\n
\n
\n

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.<\/p>\n

\t\t\tQuote’s author in Source Title<\/cite><\/small><\/p><\/blockquote><\/div>\n

\n
\n

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.<\/p>\n

\t\t\tQuote’s author in Source Title<\/cite><\/small><\/p><\/blockquote><\/div>\n<\/p><\/div>\n<\/div>\n

<\/p>\n

<\/p>\n

\n
\n

Tags<\/h1>\n<\/p><\/div>\n
\n\t\thotel<\/a><\/span>
\n\t\tbooking<\/a><\/span>
\n\t\tdiscount<\/a><\/span>
\n\t\tlocation<\/a><\/span>
\n\t\tmap<\/a><\/span>
\n\t\ttravel<\/a><\/span>\n\t<\/div>\n<\/div>\n

<\/p>\n

<\/p>\n

\n
\n

Color Swatches<\/h1>\n<\/p><\/div>\n

\t<\/p>\n

Brand Colors<\/h2>\n
\n
\n
\n
\n
#A22631<\/dt>\n
Brand Primary<\/dd>\n<\/dl><\/div>\n<\/p><\/div>\n
\n
\n
\n
#1A2042<\/dt>\n
Brand Secondary<\/dd>\n<\/dl><\/div>\n<\/p><\/div>\n
\n
\n
\n
#f0ad4e<\/dt>\n
Brand Warning<\/dd>\n<\/dl><\/div>\n<\/p><\/div>\n
\n
\n
\n
#d9534f<\/dt>\n
Brand Danger<\/dd>\n<\/dl><\/div>\n<\/p><\/div>\n
\n
\n
\n
#5bc0de<\/dt>\n
Brand Info<\/dd>\n<\/dl><\/div>\n<\/p><\/div>\n
\n
\n
\n
#5cb85c<\/dt>\n
Brand Success<\/dd>\n<\/dl><\/div>\n<\/p><\/div>\n<\/p><\/div>\n

\t <\/p>\n

\t<\/p>\n

Grayscale Levels<\/h2>\n
\n
\n
\n
\n
#222222<\/dt>\n
Gray Darker<\/dd>\n<\/dl><\/div>\n<\/p><\/div>\n
\n
\n
\n
#333333<\/dt>\n
Gray Dark<\/dd>\n<\/dl><\/div>\n<\/p><\/div>\n
\n
\n
\n
#555555<\/dt>\n
Gray<\/dd>\n<\/dl><\/div>\n<\/p><\/div>\n
\n
\n
\n
#999999<\/dt>\n
Gray Light<\/dd>\n<\/dl><\/div>\n<\/p><\/div>\n
\n
\n
\n
#eeeeee<\/dt>\n
Gray Lighter<\/dd>\n<\/dl><\/div>\n<\/p><\/div>\n
\n
\n
\n
#f7f7f7<\/dt>\n
Gray Lightest<\/dd>\n<\/dl><\/div>\n<\/p><\/div>\n<\/p><\/div>\n

\t\n<\/div>\n

<\/p>\n

<\/p>\n

\n
\n

Buttons<\/h1>\n<\/p><\/div>\n
\n
\n\t\t\t<\/p>\n

Buttons<\/h2>\n
\n\t\t\t\t\tNormal Button<\/a>
\n\t\t\t\t\tPrimary Button<\/a>
\n\t\t\t\t\tSecond Border<\/a>
\n\t\t\t\t\tWarning Button<\/a>
\n\t\t\t\t\tDanger Button<\/a>
\n\t\t\t\t\tInfo Button<\/a>\n\t\t\t\t<\/div>\n

\t\t\t\n\t\t<\/div>\n<\/p><\/div>\n<\/div>\n

<\/p>\n

<\/p>\n

\n
\n

Navigations<\/h1>\n<\/p><\/div>\n

\t<\/p>\n

<\/p>\n
\n

Tabs<\/h2>\n