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.

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

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

Efrain Peralta

58.9k followers

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

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

Efrain Peralta Followed

558.9k followers

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

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

Efrain Peralta

58.9k followers

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

Efrain Peralta

72.2k followers

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

New New New New

Efrain Peralta

58.9k followers

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

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

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.

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.

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.

Card deck

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

New New New

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.

<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 @Efraa

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">@Efraa</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>

Cards Component

Basic example

Card Title

Waves effect

Card Title

Profile card

Efrain Peralta

Efrain Peralta

With color

With image

Combinations

Efrain Peralta Followed

Efrain Peralta Followed

Colors

Card Title

Card Title

Card Title

Card Title

Card Title

Card Title

Card Title

Card Title

Card Title

Card Title

Card Title

Card Title

Card groups

Efrain Peralta

Efrain Peralta

Efrain Peralta

Efrain Peralta Follow

Card mansory

Responsive breakpoints

Card deck

Card deck

Card deck

Card deck

Card deck

Card deck

Card deck

Card deck

Card deck

Card deck

Card decks

Card deck

Card deck

Card deck

Combinations

Efrain Peralta @Efraa

Contribute on GitHub

Become a sponsor.

One-time donation

Serious sponsor