Cards Component

Basic Cards

Cards are built with as little markup and styles as possible, but still manage to deliver a ton of control and customization. Built with flexbox, they offer easy alignment and mix well with other Gameforest components.

Card Title

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

Cancel Button
Card Title

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

Card Block

The building block of a card is the .card-block. Use it whenever you need a padded section within a card.

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

Card Colors

Use the .card-img to insert images into your card before the block.

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.

Game Card

Use .card-lg with card component.

Assassin's Creed Syndicate
Xbox One
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.

Review Card

Use .card-review with card component.

7.2

Uncharted 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Video Card

Use .card-video with card component.

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.