Typography

Headings

All HTML headings, h1 tag through h6 tag, 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.

Aione Heading 1 (64px)

Aione Heading 2 (48px)

Aione Heading 3 (32px)

Aione Heading 4 (24px)

Aione Heading 5 (18px)

Aione Heading 6 (16px)

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

Bold

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

The following snippet of text is rendered as bold text

Italics

For emphasizing a snippet of text with italics.

The following snippet of text is rendered as italicized text

Strike text

For indicating blocks of text that are no longer relevant use the<s> tag.

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

Abbreviations text

For indicating blocks of text that are no longer relevant use the<abbr> tag. 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.

attr.

Inserted text

For indicating additions to the document use the <ins> tag.

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

Alternate elements

Underlined text

For indicating additions to the document use the <u> tag.

This line of text will render as underlined

Small text

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.

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

Aione Alignment classes

Easily realign text to components with text alignment classes.

aione-align-left

aione-align-right

aione-align-center

aione-align-justify

aione-float-left

aione-float-right