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
<div class="uk-grid">
...
<div class="uk-width-1-3">
<div class="uk-panel">
<i class="bh-icon-large uk-icon-rocket"></i>
<h3>...</h3>
<p>...</p>
</div>
</div>
...
</div>
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="uk-grid">
...
<div class="uk-width-1-3">
<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>
</div>
...
</div>
Product Overlay
The product overlay has the same markup like the default overlay. The content area is sliding from the bottom into the image. To diplay another image on hover just add an additional image width the class bh-product-img-hover
.
Example
Markup
<div class="bh-product-overlay">
<img class="bh-product-overlay-img" src="" alt="">
<img class="bh-product-overlay-img-hover" src="" alt="">
<div class="bh-product-overlay-content">...</div>
</div>
Blank Overlay
Use the modifier .bh-overlay-content-blank
to remove the colored background on hover. Additionally you can use the class .uk-text-contrast
to fit the text color on the image.
Example
Markup
<div class="uk-overlay bh-overlay-content-blank">
<img src="" alt="">
<div class="uk-overlay-area">
<div class="uk-overlay-area-content">
<h2 class="uk-text-contrast">Lorem ipsum</h2>
</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 left
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.
Example
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>
Headline H1
Headline H2
Headline H3
Headline H4
Headline H5
Headline H6
Headline H1
Headline H2
Headline H3
Headline H4
Headline H5
Headline H6
<h1 class="bh-headline-left-border">...</h1>
<h1 class="bh-headline-bottom-border"><span>...</span></h1>