Theme Typography

Written by Super User on 13 June 2022. Posted in Features.

We've used Inter font family for all of the themes because it's a beautiful font for UI design and is completely open-source and free. Using a custom font is nice because it allows us to make the components look the same on all browsers and operating systems. You can choose Google font via theme settings instead using local font. It's optional.

Headings

All HTML headings, <h1> through <h6> are available.

Typography (h1)

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex. (p)

Lorem Ipsum Dolor Sit Amet (h2)

Lorem ipsum dolor sit amet, consectetuer adipiscing elit (strong), sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex. (p)

Lorem Ipsum Dolor Sit Amet (h3)

Lorem Ipsum Dolor Sit Amet (h4)

Lorem Ipsum Dolor Sit Amet (h5)

Lorem ipsum dolor (a)

Lists

(ol)(li)

Lorem ipsum dolor sit amet consectetur
Lorem ipsum dolor sit amet consectetur

(ul)(li)

Lorem ipsum dolor sit amet consectetur
Lorem ipsum dolor sit amet consectetur

Theme Buttons

Buttons have a number of great variations to choose from. You should note that in the HTML breakdown we have added a button class in addition to the variation, which is a requirement for these particular variations to work. You can also combine these variations.

Default Button Button Primary Button Secondary Button Danger Button Text

<a href="#" class="jl-button jl-button-default">Default Button</a>
<a href="#" class="jl-button jl-button-primary">Button Primary</a>
<a href="#" class="jl-button jl-button-secondary">Button Secondary</a>
<a href="#" class="jl-button jl-button-danger">Button Danger</a>
<a href="#" class="jl-button jl-button-text">Button Text</a>

Notice Styles

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

<p class="alert alert-success">…</p>

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

<p class="alert alert-info">…</p>

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

<p class="alert alert-warning">…</p>

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

<p class="alert alert-error">…</p>

Blockquotes

For quoting blocks of content from another source within your document.

Default blockquote

Wrap <blockquote> around any HTML as the quote. For straight quotes we recommend a <p>.

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

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

Blockquote options

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

Naming a source

Add <small> tag for identifying the source. Wrap the name of the source work in <cite>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Someone famous in Source Title

<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p><small>Someone famous <cite title="Source Title">Source Title</cite></small></blockquote>

The blockquote element represents content that is quoted from another source, optionally with a citation which must be within a footer or cite element.

Someone famous in Source Title

Tables

#	First Name	Last Name	Username
1	John	Doe	JohnDoe
2	Jane	Doe	JaneDoe
3	Bob	Doe	BobDoe

<table class="table">…</table>