Typography

Documentation and examples for Franken UI typography, including headings, body text, lists, and more.

Table of contents

• Headings
• Hero
• Heading Styles
• Paragraph
• Blockquote
• Inline code
• Text
  • Text background

Headings

Add one of the following classes to modify the size and style of headings. Usually, these classes would be used on heading elements, but they work also with any other element like a div element.

Class	Description
.uk-h1	Add this class to apply an h1 heading.
.uk-h2	Add this class to apply an h2 heading.
.uk-h3	Add this class to apply an h3 heading.
.uk-h4	Add this class to apply an h4 heading.

Hero

Add one of the following classes to apply hero headings. These classes are typically used to add a prominent message with a very large font size.

Class	Description
.uk-hero-sm	Add this class to apply a small-sized heading.
.uk-hero-md	Add this class to apply a medium-sized heading.
.uk-hero-lg	Add this class to apply a large-sized heading.
.uk-hero-xl	Add this class to apply a xlarge-sized heading.
.uk-hero-2xl	Add this class to apply a 2xlarge-sized heading.
.uk-hero-3xl	Add this class to apply a 3xlarge-sized heading.

Heading Styles

Add one of the following classes to modify the size and style of headings.

Class	Description
.uk-heading-divider	Add this class to apply a divider to a heading.
.uk-heading-line	Add this class to apply a vertically centered line to a heading.
.uk-heading-bullet	Add this class to apply a bullet to a heading.

Paragraph

Blockquote

Inline code

Text

Franken UI offers various text utilities to style your text.

Class	Description
.uk-text-lead	Add this class to highlight text, for example in article subtitles.
.uk-text-meta	Add this class to a paragraph that contains meta text about an article or similar.
.uk-text-sm	Add this class to apply a small font size.
.uk-text-base	Add this class to apply the default the font size.
.uk-text-truncate	Prevents text from wrapping into multiple lines, truncating it and displaying an ellipsis instead.
.uk-text-break	Breaks strings, if their length exceeds the width of their container.

Text background

To apply a gradient or background image to text, add the .uk-text-background class to a <span> element inside the text element. Styles that don’t define a background-image, will apply the primary color.