Logo Small

Theme Elements

Here you can find all custom created theme components and modifier extending the UIkit Frontend Framework.

Button Secondary

The secondary button is based on the default button. Use the modifier .bh-button-secondary for the default version or .bh-button-secondary-contrast for the contrast colour version.

Example - Default

Example - contrast

MARKUP

<a href="#" class="uk-button bh-button-secondary">...</a>
<button class="uk-button bh-button-secondary">...</button>

<a href="#" class="uk-button bh-button-secondary bh-button-secondary-contrast">...</a>
<button class="uk-button bh-button-secondary bh-button-secondary-contrast">...</button>

Tags

EXAMPLE

MARKUP

<a href="#" class="bh-tag">...</a>

Icon large

EXAMPLE

Lorem ipsum

Zombie ipsum reversus ab viral inferno, nam rick.

LOREM IPSUM

Zombie ipsum reversus ab viral inferno, nam rick.

LOREM IPSUM

Zombie ipsum reversus ab viral inferno, nam rick.

MARKUP

<i class="bh-icon-large uk-icon-rocket"></i>

Counter

To implement the automatic counter use data-count-up attribute like in the example below.

EXAMPLE

<h1 data-count-up="{end:100}"></h1>

Pricing Table

Just use the advantage of the fully responsive grid component to create your own pricing table.

EXAMPLE

Basic

$29
  • Lorem ipsum
  • Eiusmod tempor
  • Dolor sit amet
Buy now
Special Offer

Standard

$49
  • Lorem ipsum
  • Eiusmod tempor
  • Dolor sit amet
Buy now

Premium

$79
  • Lorem ipsum
  • Eiusmod tempor
  • Dolor sit amet
Buy now

MARKUP

<div class="bh-pricing bh-pricing-highlight">
    <div class="bh-pricing-badge">...</div>
    <div class="bh-pricing-content">
        <h3>...</h3>
        <div class="bh-pricing-price">...</div>
           ...
   </div>
</div>

Dropcap & Article Column

To split the text into two columns or to use a dropcap at the beginning of the text, just use the markup example below.

EXAMPLE

Bombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. Summus brains sit​​, morbo vel maleficia? De apocalypsi gorger omero undead survivor dictum mauris. Hi mindless mortuis soulless creaturas, imo evil stalking monstra adventus resi dentevil vultus comedat cerebella viventium.

MARKUP

<p class="bh-article-columns"><span class="bh-dropcap">B</span>...</p>

Headline Border

You can choose between two additional headline styles. Just use the class bh-headline-left-border or bh-headline-bottom-border in the headline element.

Headline H1

HEADLINE H2

HEADLINE H3

HEADLINE H4

HEADLINE H5
HEADLINE H6

Headline H1

Headline H2

Headline H3

Headline H4

Headline H5
Headline H6

MARKUP

<h1 class="bh-headline-left-border">...</h1>
<h1 class="bh-headline-bottom-border"><span>...</span></h1>

Login