Balzac

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

Placeholder
Link

Example - contrast

Placeholder
Link

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

Tag 1 Tag 2 Tag 3

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

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="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

Placeholder

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

Placeholder

Lorem ipsum

Placeholder

Lorem ipsum

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>