Cards Component

The cards are one of the containers most used by large companies for their products, including options for headings, development and footer, it is the best way to show content to users. The big ones bet on them, they are clear and elegant.

Add colors, shadows, components among other utilities.


Basic example

The cards do not have a fixed width, so they will naturally fill the entire width of their parent element. You can use the grid system to add a width or customize to your tastes.


eFrolic

Card Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.

<div class="e-card" style="width: 20rem;">
  <!--Card image-->
  <img src="https://bit.ly/2NmBmLy" />

  <!--Card body-->
  <div class="card-body">
    <h3 class="card-title">Card Title</h3>
    <p class="card-text">Lorem ipsum dolor sit amet.</p>
    <a class="e-btn danger">Button</a>
    <a class="e-btn plane inverted danger">Button</a>
  </div>
</div>
Waves effect

You can customize the cards with the wave effect to give a better experience.

Use: e-waves


eFrolic

Card Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.

<div class="e-card e-waves" style="width: 20rem;">
  <!--Card image-->
  <img src="https://bit.ly/2MLIEmM" />

  <!--Card body-->
  <div class="card-body">
    <h3 class="card-title">Card Title</h3>
    <p class="card-text">Lorem ipsum dolor sit amet.</p>
    <a class="e-btn purple">Button</a>
    <a class="e-btn plane inverted purple">Button</a>
  </div>
</div>
Profile card

This is a business card, by default it will look like this you can add images or colors


It is a CSS framework, which without using javascript is interactive and animated. This CSS framework is based on being simple and modern in mobile first web development. Built on Flexbox bases, focused on responsive design.

Efrain Peralta

58.9k followers


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.

eFrolicCSS framework which without using JavaScript is interactive and animated.
It is a CSS framework, which without using javascript is interactive and animated. This CSS framework is based on being simple and modern in mobile first web development. Built on Flexbox bases, focused on responsive design.

Efrain Peralta

58.9k followers


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.

With color
<div class="e-card profile" style="width:20rem;">
                      <!-- Your color -->
  <div class="e-card-cover primary">
    <!-- Or image, <img src="..." alt="" -->
  </div>
  <div class="e-card-photo">
    <img src="..." alt="">
  </div>
  <div class="card-body">
    <h3 class="card-title text-center text-dark">Efrain Peralta</h3>
    <p class="card-text text-center"><small>58.9k followers</small></p>
    <hr>
    <p class="card-text text-center">Lorem ipsum dolor sit amet.</p>
    <a class="e-btn fullwidth primary">Follow</a>
  </div>
</div>
With image
<div class="e-card profile" style="width:20rem;">
  <div class="e-card-cover">
    <img src="https://bit.ly/2RKe9kO" />
  </div>
  <div class="e-card-photo">
    <img src="https://bit.ly/2PulhQX" />
  </div>
  <div class="card-body">
    <h3 class="card-title text-center text-dark">Efrain Peralta</h3>
    <p class="card-text text-center"><small>58.9k followers</small></p>
    <hr>
    <p class="card-text text-center">Lorem ipsum dolor sit amet.</p>
    <a class="e-btn fullwidth purple">Follow</a>
  </div>
</div>

Combinations

It is a CSS framework, which without using javascript is interactive and animated. This CSS framework is based on being simple and modern in mobile first web development. Built on Flexbox bases, focused on responsive design.

Efrain Peralta Followed

558.9k followers


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.

It is a CSS framework, which without using javascript is interactive and animated. This CSS framework is based on being simple and modern in mobile first web development. Built on Flexbox bases, focused on responsive design.

Efrain Peralta Followed

558.9k followers


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.

<div class="e-card profile">
  <div class="e-card-cover danger"></div>
  <div class="e-card-photo">
    <img src="...">
  </div>
  <div class="e-buttons centered">
    <a class="e-btn plane inverted danger">Perfil</a>
    <a class="e-btn plane inverted danger"><span class="e-tag danger">524.2k</span> Followers</a>
    <a class="e-btn plane inverted danger"><span class="e-tag danger">104.8k</span> Following</a>
  </div>
  <div class="card-body">
    <h3 class="card-title text-center text-dark">Efrain Peralta <span class="e-tag static">Followed</span></h3>
    <p class="card-text text-center"><small>558.9k followers</small></p>
    <hr>
    <img src="https://bit.ly/2RKe9kO" />
    <p class="card-text text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <a class="e-btn fullwidth inverted danger">Like</a>
    <a class="e-btn fullwidth danger">Unfollow</a>
  </div>
</div>

<div class="e-card profile">
  <div class="e-card-cover primary"></div>
  <div class="e-card-photo">
    <img src="...">
  </div>
  <div class="card-body">
    <h3 class="card-title text-center text-dark">Efrain Peralta <span class="e-tag static">Followed</span></h3>
    <p class="card-text text-center"><small>558.9k followers</small></p>
    <hr>
    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

    <img src="https://bit.ly/2RKe9kO" />
    <div class="e-buttons between">
      <a class="e-btn plane inverted primary">Like</a>
      <a class="e-btn plane inverted primary">Comment</a>
      <a class="e-btn plane inverted primary">Share</a>
      <a class="e-btn plane inverted primary">Unfollow</a>
    </div>
  </div>
</div>
Colors

Card Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.

Button

Card Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.

Button

Card Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.

Button

Card Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.

Button

Card Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.

Button

Card Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.

Button

Card Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.

Button

Card Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.

Button

Card Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.

Button

Card Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.

Button

Card Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.

Button

Card Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.

Button
              <!-- Your color -->
<div class="e-card primary" style="width: 20rem;">
  <div class="card-body">
    <h3 class="card-title">Card Title</h3>
    <p class="card-text">Lorem ipsum dolor sit amet.</p>
    <a class="e-btn transparent">Button</a>
  </div>
</div>
Card groups

Use the groups of cards to create related cards or lists of products or prices, the groups cards take the same horizontal and vertical size and are shaded when doing hovering over them, you can eliminate shadows by using the corresponding class.

Use: e-cards unified


It is a CSS framework, which without using javascript is interactive and animated. This CSS framework is based on being simple and modern in mobile first web development. Built on Flexbox bases, focused on responsive design.

Efrain Peralta

58.9k followers

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.

It is a CSS framework, which without using javascript is interactive and animated. This CSS framework is based on being simple and modern in mobile first web development. Built on Flexbox bases, focused on responsive design.

Efrain Peralta

72.2k followers

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.

It is a CSS framework, which without using javascript is interactive and animated. This CSS framework is based on being simple and modern in mobile first web development. Built on Flexbox bases, focused on responsive design.
New New New New

Efrain Peralta

58.9k followers


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.

It is a CSS framework, which without using javascript is interactive and animated. This CSS framework is based on being simple and modern in mobile first web development. Built on Flexbox bases, focused on responsive design.

Efrain Peralta Follow

58.9k followers


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.

<div class="e-cards unified centered">
  <div class="e-card profile">
    <div class="e-card-cover warning"></div>
    <div class="e-card-photo">
      <img src="..." alt="">
    </div>
    <div class="card-body">
      <h3 class="card-title text-center text-dark">Efrain Peralta</h3>
      <div class="e-tags unified centered">
        <span class="e-tag warning">58.9k</span>
        <span class="e-tag white shadow">followers</span>
      </div>
      <hr>
      <p class="card-text text-center">Lorem ipsum dolor sit amet.</p>
      <a class="e-btn fullwidth warning">Follow</a>
    </div>
  </div>
  <div class="e-card profile">
    <div class="e-card-cover primary">
    </div>
    <div class="e-card-photo">
      <img src="..." alt="">
    </div>
    <div class="card-body">
      <h3 class="card-title text-center text-dark">Efrain Peralta</h3>
      <div class="e-tags unified centered">
        <span class="e-tag primary">72.2k</span>
        <span class="e-tag white shadow">followers</span>
      </div>
      <hr>
      <p class="card-text text-center">Lorem ipsum dolor sit amet.</p>
      <a class="e-btn fullwidth primary">Follow</a>
    </div>
  </div>
  <div class="e-card profile">
    <div class="e-card-cover success"></div>
    <div class="e-card-photo">
      <img src="..." alt="">
    </div>
    <div class="card-body">
      <div class="e-tags centered">
        <span class="e-tag danger">New</span>
        <span class="e-tag sky">New</span>
        <span class="e-tag purple">New</span>
        <span class="e-tag warning">New</span>
      </div>
      <h3 class="card-title text-center text-dark">Efrain Peralta</h3>
      <p class="card-text text-center"><small>58.9k followers</small></p>
      <hr>
      <p class="card-text text-center">Lorem ipsum dolor sit ametne.</p>
      <a class="e-btn fullwidth success">Follow</a>
    </div>
  </div>
  <div class="e-card profile">
    <div class="e-card-cover danger"></div>
    <div class="e-card-photo">
      <img src="..." alt="">
    </div>
    <div class="card-body">
      <h3 class="card-title text-center text-dark">Efrain Peralta
        <span class="e-tag static primary">Follow</span>
      </h3>
      <p class="card-text text-center"><small>58.9k followers</small></p>
      <hr>
      <p class="card-text text-center">Lorem ipsum dolor sit ametnec.</p>
      <a class="e-btn fullwidth danger">Follow</a>
    </div>
  </div>
</div>
Card mansory

Create a style of type Mansory with this container, the cards can be organized in columns similar to Freemasonry with only CSS, even though it is not a Mansory as with Javascript, Cards are ordered from top to bottom and left to the right.

Use: e-cards-mansory

Warning
This container is similar to Mansory but not in its entirety, the cards are aligned differently from top to bottom and from left to right.

Responsive breakpoints

In smartphones from 320px to 767px: 1 column

In tablets from 768px to 1023px: 2 column

In Desktop from 1024px to 1366px: 3 column

In Desktop-plus from 1366px and up: 4 column


eFrolic

Card deck

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.

eFrolic

Card deck

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.

Card deck

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.

Card deck

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.

eFrolic

Card deck

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.

Card deck

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.

Card deck

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.

eFrolic

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.

Card deck

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.

Card deck

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.

Card deck

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.

<div class="e-cards-mansory">
  <div class="e-card">
    <img src="..." alt="...">
    <div class="card-body">
      <h3 class="card-title text-primary">Card deck</h3>
      <p class="card-text">Lorem ipsum dolor sit amet.</p>
      <a class="e-btn primary">Button</a>
    </div>
  </div>
  <div class="e-card">
    <div class="card-body">
      <h3 class="card-title text-danger">Card deck</h3>
      <p class="card-text">Lorem ipsum dolor sit amet.</p>
      <a class="e-btn fullwidth danger">Button</a>
    </div>
  </div>
  <div class="e-card">
    <img src="..." alt="...">
    <div class="card-body">
      <h3 class="card-title text-sky">Card deck</h3>
      <p class="card-text">Lorem ipsum dolor sit amet.</p>
      <a class="e-btn sky">Button</a>
      <a class="e-btn inverted plane sky">Button</a>
    </div>
  </div>
  <div class="e-card">
    <div class="card-body">
      <h3 class="card-title text-purple">Card deck</h3>
      <p class="card-text">Lorem ipsum dolor sit amet.</p>
      <a class="e-btn fullwidth purple">Button</a>
    </div>
  </div>
  <div class="e-card">
    <img src="..." alt="...">
    <div class="card-body">
      <p class="card-text">Lorem ipsum dolor sit amet.</p>
    </div>
  </div>
  <div class="e-card">
    <div class="card-body">
      <h3 class="card-title text-purple">Card deck</h3>
      <p class="card-text">Lorem ipsum dolor sit amet.</p>
      <a class="e-btn fullwidth purple">Button</a>
    </div>
  </div>
</div>
Card decks

The class deck organizes the cards like unified making them have a same size of width and height, differentiated in that this container does not join them and maintain a spacing between each one.

Use: e-cards deck


eFrolic
New New New

Card deck

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.

eFrolic

Card deck

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.

eFrolic

Card deck

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.

<div class="e-cards deck">
  <div class="e-card">
    <img src="..." alt="...">
    <div class="card-body">
      <h3 class="card-title">Card deck</h3>
      <p class="card-text">Lorem ipsum dolor sit amet.</p>
      <a class="e-btn danger">Button</a>
    </div>
  </div>
  <div class="e-card">
    <img src="..." alt="...">
    <div class="card-body">
      <h3 class="card-title">Card deck</h3>
      <p class="card-text">Lorem ipsum dolor sit amet.</p>
      <a class="e-btn danger">Button</a>
    </div>
  </div>
  <div class="e-card">
    <img src="..." alt="...">
    <div class="card-body">
      <h3 class="card-title">Card deck</h3>
      <p class="card-text">Lorem ipsum dolor sit amet.</p>
      <a class="e-btn danger">Button</a>
    </div>
  </div>
</div>
Combinations

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.


Efrain Peralta @EfraaX

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.


<div class="e-card">
  <img src="https://bit.ly/2RKe9kO" />
  <div class="card-body">
    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <hr>
    <div class="e-buttons align-end">
      <a class="e-btn plane inverted purple">Join Group</a>
      <a class="e-btn plane inverted purple">Share Group</a>
    </div>
  </div>
</div>

<div class="e-card no-mobile">
  <img src="https://bit.ly/2RKe9kO" />
  <div class="card-body">
    <h3 class="card-title e- text-dark">Efrain Peralta <small class="e- text-gray">@EfraaX</small></h3>
    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <hr>
    <div class="e-cols">
      <div class="e-col">
        <img src="https://bit.ly/2RKe9kO" />
      </div>
      <div class="e-col">
        <img src="https://bit.ly/2RKe9kO" />
      </div>
    </div>
    <div class="e-buttons align-end">
      <a class="e-btn plane inverted purple">Join Group</a>
      <a class="e-btn plane inverted purple">Share Group</a>
    </div>
  </div>
</div>
Contribute on GitHub
Become a sponsor.

If you are using our framework in a product that generates income, you can also help its maintenance if you wish, if you frequently help in your company or personal developments consider making a recurring donation.

If you want to see your company's logo on this site it's time to be a serious Sponsor.

eFrolic | framework css 2018
eFrolic | framework css 2018

One-time donation


Donate
eFrolic | framework css 2018
eFrolic | framework css 2018

Serious sponsor


Become a Patron