269 W Broadway, Los-Angeles, CA 10012, United States Open map
+555-1234678
Company
  • Home
  • Pages
    • About
    • Pricing
    • History
    • Login
    • Registration
    • Error Page
  • Features
    • Typography
    • Uikit Overview
    • Gantry 5 Particless
    • Support
    • Block Variations
    • Header Layouts
  • Layouts
  • Blog
  • Contact
  • Styles
    • Preset 1
    • Preset 2
    • Preset 3
    • Preset 4
    • Preset 5
    • Preset 6
Company
MENU
  1. Home
  2. Features
  3. Uikit Overview
  4. Theme Features

Header Layouts

Written by Super User on 18 December 2021. Posted in Theme Features.

Create a navigation bar that can be used for your main site navigation. The theme included JL Navbar particle with 10 predefined header layouts.

Customize the header and navigation bar of your website can be found in the Base Outline → Navigation section of the theme.

Check the live demo here.

Theme Typography

Written by Super User on 08 December 2021. Posted in Theme 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, 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 (h4)

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 (h5)

Joomla 4 bootstrap 5 button

secondary primary info success warning danger

text-secondary text-primary text-info text-success text-warning text-danger

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 (a)

Lists

(ol)(li)

  1. Lorem ipsum dolor sit amet consectetur
  2. 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>

Uikit Typography

Written by Super User on 07 March 2018. Posted in Theme Features.

Logo
  • Active
  • Parent
    • Active
    • Parent
      • Sub item
      • Sub item
    • Header
    • Item
    • Item
    • Item
  • Item
  • Item
  • Home
  • Blog
  • Category
  • Post

Article Title


Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Written by Super User on 12 April 2012. Posted in Blog



  • a element
  • abbr element
  • code element
  • del element
  • dfn element
  • Link Muted
  • em element
  • ins element
  • mark element
  • q inside a q
  • strong element
  • Link Reset
  • Text Muted
  • Text Emphasis
  • Text Primary
  • Text Secondary
  • Text Success
  • Text Warning
  • Text Danger
  • Text Meta
  • Default
  • Success
  • Warning
  • Danger
  • 1
<div class="myclass">...<div>

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
Read more
5 Comments

  • Author

    12 days ago

    Reply

    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

  • 1
  • ...
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • ...
  • 20
  • Active
  • Parent
    • Sub item
    • Sub item
      • Sub item
      • Sub item
  • Parent
    • Sub item
    • Sub item
  • Header
  • Item
  • Item
  • Item

Default

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Primary

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Secondary

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Hover

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.


2X-Large

X-Large

Heading L

Heading M

Heading S

Heading H1

Heading H2

Heading H3

Heading H4

Heading H5
Heading H6

Heading Divider

Heading Bullet

Heading Line

Table Heading Table Heading Table Heading
Table Data Table Data Table Data
Table Data Table Data Table Data
Table Data Table Data Table Data
Table Data Table Data Table Data
365
:
18
:
21
:
05
  • Active
  • Parent
    • Sub item
    • Sub item
      • Sub item
      • Sub item
  • Header
  • Item
  • Item
  • Item
  • Active
  • Item
  • Item
  • Item
  • Active
    Subtitle lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do.
  • Item
    Subtitle lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do.
  • Item
    Subtitle lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do.
  • Item
    Subtitle lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do.

Default

Primary

Success

Warning

Danger


Default Lorem ipsum dolor sit amet, consectetur.

Primary Lorem ipsum dolor sit amet, consectetur.


  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6
Tooltip

  • Active
  • Item
  • Disabled
  • Active
  • Item
  • Disabled
  • Active
  • Item
  • Disabled

  • List item 1
  • List item 2
  • List item 3
  • List item 1
  • List item 2
  • List item 3
  • List item 1
  • List item 2
  • List item 3
Description lists
A description text
Description lists
A description text
  • Item 1

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.

  • Item 2

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.

  • Item 3

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

Button

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

Button

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

Button

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

Button

Headline

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  • Active
  • Item
  • Item
  • Item
  • Active
  • Parent
    • Sub item
    • Sub item
  • Header
  • Item
  • Item
  • Item

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

We believe that designing products and services in close partnership with our clients is the only way to have a real impact on their business.

For inspirations, special offers and much more.

Our Services

  • Interface Design
  • Seo Optimizer
  • Digital Marketing
  • Market Monitor
  • Graphic Design

Important Links

  • About Us
  • How to work
  • Privacy Policy
  • Our Media
  • Contact Us

Contact Info

Location:
47 Destiny Common, South Jolieview

Telephone:
826-696-8370

Email:
hi@example.com

© 2025 Company Joomla 5 Template by Joomlead
  • Home
  • Pages
    • About
    • Pricing
    • History
    • Login
    • Registration
    • Error Page
  • Features
    • Typography
    • Uikit Overview
    • Gantry 5 Particless
    • Support
    • Block Variations
    • Header Layouts
  • Layouts
  • Blog
  • Contact
  • Styles
    • Preset 1
    • Preset 2
    • Preset 3
    • Preset 4
    • Preset 5
    • Preset 6