Cards

Gameforest's cards provide a flexible and extensible content container with multiple variants and options. A card is a flexible and extensible content container.

Example

Cards are built with as little markup and styles as possible, but still manage to deliver a ton of control and customization.

Card Title

Some quick example text to build on the card title and make up the bulk of the card's content.

Card Footer 
<div class="card">
  <div class="card-header">
    <h5 class="card-title">Card Title</h5>
  </div>
  <div class="card-block">
    <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
  <div class="card-footer">
    Card Footer
  </div>
</div>

Colors

Cards include various options for customizing their backgrounds, borders, and color. Use text and background utilities to change the appearance of a card.

Card Primary

Some quick example text to build on the card title and make up the bulk of the card's content.

Card Success

Some quick example text to build on the card title and make up the bulk of the card's content.

Card Info

Some quick example text to build on the card title and make up the bulk of the card's content.

Card Danger

Some quick example text to build on the card title and make up the bulk of the card's content.

Card Warning

Some quick example text to build on the card title and make up the bulk of the card's content.

Card Inverse

Some quick example text to build on the card title and make up the bulk of the card's content.

<div class="row">
  <div class="col-lg-4">
    <div class="card card-primary">
      <div class="card-header">
        <h5 class="card-title">Card Primary</h5>
      </div>
      <div class="card-block">
        <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      </div>
    </div>
  </div>
  <div class="col-lg-4">
    <div class="card card-success">
      <div class="card-header">
        <h5 class="card-title">Card Success</h5>
      </div>
      <div class="card-block">
        <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      </div>
    </div>
  </div>
  <div class="col-lg-4">
    <div class="card card-info">
      <div class="card-header">
        <h5 class="card-title">Card Info</h5>
      </div>
      <div class="card-block">
        <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      </div>
    </div>
  </div>
  <div class="col-lg-4">
    <div class="card card-danger">
      <div class="card-header">
        <h5 class="card-title">Card Danger</h5>
      </div>
      <div class="card-block">
        <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      </div>
    </div>
  </div>
  <div class="col-lg-4">
    <div class="card card-warning">
      <div class="card-header">
        <h5 class="card-title">Card Warning</h5>
      </div>
      <div class="card-block">
        <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      </div>
    </div>
  </div>
  <div class="col-lg-4">
    <div class="card card-inverse">
      <div class="card-header">
        <h5 class="card-title">Card Inverse</h5>
      </div>
      <div class="card-block">
        <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      </div>
    </div>
  </div>
</div>

Game

Game cards can be used if you would like to listing games on single page.

Assassin's Creed Syndicate
Playstation 4
15

The Witcher 3: Wild Hunt

June 13, 2017

Some quick example text to build on the card title and make up the bulk of the card's content.

<div class="card card-lg">
  <div class="card-img">
    <a href="game-post.html"><img src="http://via.placeholder.com/360x270" class="card-img-top" alt="Assassin's Creed Syndicate"></a>
    <div class="badge badge-xbox-one">Xbox One</div>
    <div class="card-likes">
      <a href="#">15</a>
    </div>
  </div>
  <div class="card-block">
    <h4 class="card-title"><a href="game-post.html">The Witcher 3: Wild Hunt</a></h4>
    <div class="card-meta"><span>June 13, 2017</span></div>
    <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

Review

Use review cards with owl carousel and you can loop reviews without any limitation. Add .card-review to card class.

7.2

Uncharted 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

<div class="card card-review">
  <a class="card-img" href="review-post.html">
    <img src="http://via.placeholder.com/360x320" alt="">
    <div class="badge badge-success">7.2</div>
  </a>
  <div class="card-block">
    <h4 class="card-title">
      <a href="review-post.html">Uncharted 4</a>
    </h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
</div>

Video

Add .card-video to card class and you can display it as a widget in sidebar or list it on a single page.

Watch Dogs 2 - Reveal Trailer
4:04

Shadow of War Gameplay Walkthrough

March 15, 2017 546 views

Some quick example text to build on the card title and make up the bulk of the card's content.

<div class="card card-video">
  <div class="card-img">
    <a href="video-post.html">
      <img src="http://via.placeholder.com/360x250" class="card-img-top" alt="Watch Dogs 2 - Reveal Trailer"> </a>
    <div class="card-meta">
      <span>4:04</span>
    </div>
  </div>
  <div class="card-block">
    <h4 class="card-title">
      <a href="video-post.html">Shadow of War Gameplay Walkthrough</a>
    </h4>
    <div class="card-meta">
      <span>
        <i class="fa fa-clock-o"></i> March 15, 2017</span>
      <span>546 views</span>
    </div>
    <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
version: 4.1.2