Hero

Lightweight, flexible component for showcasing hero unit style content.

Example

Lightweight, flexible component that can optionally extend the entire viewport to showcase key marketing messages on your site. This is a simple hero unit, a simple hero-style component for calling extra attention to featured content or information.

The Witcher 3: Blood and Wine

The world is in chaos. The air is thick with tension and the smoke of burnt villages.

Game Details 
<section class="hero" style="background-image: url('img/hero/hero.jpg');">
  <div class="overlay"></div>
  <div class="container">
    <div class="hero-block">
      <h2 class="hero-title">The Witcher 3: Blood and Wine</h2>
      <p>The world is in chaos. The air is thick with tension and the smoke of burnt villages.</p>
      <a class="btn btn-primary btn-lg btn-shadow btn-rounded" href="game-post.html" role="button">Game Details</a>
    </div>
  </div>
</section>

Chart

Add custom chart to the hero like easyPieChart and use .hero-game like in the example below. Easy to add lightbox component with buttons etc.

The Witcher 3: Wild Hunt

The world is in chaos. The air is thick with tension and the smoke.

Watch Trailer Purchase Now
Gameforest 89%
MetaCritic 93
Users 9.1 
<section class="hero hero-game" style="background-image: url('img/hero/hero.jpg');">
  <div class="overlay"></div>
  <div class="container">
    <div class="hero-block">
      <div class="hero-left">
        <h2 class="hero-title">The Witcher 3: Wild Hunt</h2>
        <p>The world is in chaos. The air is thick with tension and the smoke.</p>
        <a class="btn btn-primary btn-shadow btn-rounded btn-lg" href="https://www.youtube.com/watch?v=c0i88t0Kacs" data-lightbox role="button">Watch Trailer <i class="fa fa-play"></i></a>
        <a class="btn btn-outline-default btn-shadow m-l-10 btn-md btn-rounded btn-lg" href="https://themeforest.net/item/gameforest-responsive-gaming-html-theme/5007730" target="_blank" role="button">Purchase Now <i class="fa fa-shopping-cart"></i></a>
      </div>
      <div class="hero-right">
        <div class="hero-review">
          <span>Gameforest</span>
          <a href="review-post.php" class="chart easypiechart" data-percent="89" data-scale-color="#e3e3e3"><span>89</span>%</a>
        </div>
        <div class="hero-review">
          <span>MetaCritic</span>
          <a href="#">93</a>
        </div>
        <div class="hero-review">
          <span>Users</span>
          <a href="#">9.1</a>
        </div>
      </div>
    </div>
  </div>
</section>

Review

Use the hero component for reviews at top of the page with .hero-review class and with buttons, charts.

85%

Uncharted 4: A Thief's End Review

Uncharted 4: A Thief's End will explore what it means when Drake is forced back into the world of thieves.

Read Review 
<section class="hero hero-review" style="background-image: url('https://i.ytimg.com/vi/D3pYbbA1kfk/maxresdefault.jpg');">
  <div class="overlay"></div>
  <div class="container">
    <div class="hero-block">
      <div class="chart easypiechart m-b-20" data-percent="85" data-scale-color="#e3e3e3"><span>85</span>%</div>
      <h2 class="hero-title">Uncharted 4: A Thief's End Review</h2>
      <p>Uncharted 4: A Thief's End will explore what it means when Drake is forced back into the world of thieves.</p>
      <a class="btn btn-primary btn-lg btn-shadow btn-rounded m-t-20" href="review-post.html" role="button">Read Review</a>
    </div>
  </div>
</section>
version: 4.1.2