Body

All common tags.

Global variables:

$body-b-font-weight: 700 !global
$body-i-font-style: italic !global
$body-small-font-size: 85% !global

$abbr-initialism-class: "-initialism" !global

$blockquote-small-font-size: 80% !global

Bold

For emphasizing a snippet of text with a heavier font-weight.

This is bold text
This is bold text
This is bold text
This is bold text

Italic

For emphasizing a snippet of text with italics.

This is italic text
This is italic text
This is italic text
This is italic text

Small

For de-emphasizing inline or blocks of text, use the <small> tag to set text at 85% the size of the parent. Heading elements receive their own font-size for nested <small> elements.

Normal and small text
Normal and small text

Sizes with inline elements

Use size classes _tiny, _small, _minor, _normal, _major, _normal, _big, _huge, _divine with inline elements to set size.

Normal text with _major text, and here is _big italic text, and _huge bold
Normal text with _major text, and here is _big italic text, and _huge bold

Themes with inline elements

Use theme classes (you can include any theme, so themes class names can be different) -primary-, -error-, -success- with inline elements to set theme.

Normal text with -primary- text, i -error- text, b -success- text
Normal text with -primary- text, i -error- text, b -success- text

Modifiers with inline elements

Use modifier classes _left_, _center_, _right_, _justify_ with inline elements to realign text.

left

center

right

Justify is in this block! Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

left

center

right

Justify is in this block! ...

Abbreviation

Abbreviations with a title attribute have a light dotted bottom border and a help cursor on hover, providing additional context on hover. If you use initialism, use -initialism class.
attr, HTML
attr, HTML

Address

Abbreviations with a title attribute have a light dotted bottom border and a help cursor on hover, providing additional context on hover. If you use initialism, use -initialism class.
Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
Full Name
first.last@example.com
Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
Full Name
first.last@example.com

Blockquote

Style and content changes for simple variations on a standard <blockquote>.

Use modifier classes _left_ and _right_ to realign blockquote.

Use theme classes (you can include any theme, so themes class names can be different) -primary-, -error-, -success- with blockquotes to set theme.

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

Someone famous in Source Title

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

Someone famous in Source Title

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

Someone famous in Source Title

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

Someone famous in Source Title

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

Someone famous in Source Title

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

Someone famous in Source Title

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

Someone famous in Source Title

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

Someone famous in Source Title