Here you can find all custom created theme components and modifier extending the UIkit Frontend Framework.
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>
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
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>