--- layout: default permalink: /cards category: components title: Cards description: "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." ---

{{page.title}} Component

{{page.description}}


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.


{{site.title}}

Card Title

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

{% highlight html %}

Card Title

Lorem ipsum dolor sit amet.

Button Button
{% endhighlight %}
Waves effect

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

Use: e-waves


{{site.title}}

Card Title

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

{% highlight html %}

Card Title

Lorem ipsum dolor sit amet.

Button Button
{% endhighlight %}
Profile card

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


{{site.description}}

Efrain Peralta

58.9k followers


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

{{site.title}}{{site.subtitle}}
{{site.description}}

Efrain Peralta

58.9k followers


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

With color
{% highlight html %}

Efrain Peralta

58.9k followers


Lorem ipsum dolor sit amet.

Follow
{% endhighlight %}
With image
{% highlight html %}

Efrain Peralta

58.9k followers


Lorem ipsum dolor sit amet.

Follow
{% endhighlight %}

Combinations

{{site.description}}

Efrain Peralta Followed

558.9k followers


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

{{site.description}}

Efrain Peralta Followed

558.9k followers


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

{% highlight html %}

Efrain Peralta Followed

558.9k followers


Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Like Unfollow

Efrain Peralta Followed

558.9k followers


Lorem ipsum dolor sit amet, consectetur adipiscing elit.

{% endhighlight %}
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
{% highlight html %}

Card Title

Lorem ipsum dolor sit amet.

Button
{% endhighlight %}
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


{{site.description}}

Efrain Peralta

58.9k followers

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

{{site.description}}

Efrain Peralta

72.2k followers

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

{{site.description}}
New New New New

Efrain Peralta

58.9k followers


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

{{site.description}}

Efrain Peralta Follow

58.9k followers


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

{% highlight html %}

Efrain Peralta

58.9k followers

Lorem ipsum dolor sit amet.

Follow

Efrain Peralta

72.2k followers

Lorem ipsum dolor sit amet.

Follow
New New New New

Efrain Peralta

58.9k followers


Lorem ipsum dolor sit ametne.

Follow

Efrain Peralta Follow

58.9k followers


Lorem ipsum dolor sit ametnec.

Follow
{% endhighlight %}
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


{{site.title}}

Card deck

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

{{site.title}}

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.

{{site.title}}

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.

{{site.title}}

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.

{% highlight html %}
...

Card deck

Lorem ipsum dolor sit amet.

Button

Card deck

Lorem ipsum dolor sit amet.

Button
...

Card deck

Lorem ipsum dolor sit amet.

Button Button

Card deck

Lorem ipsum dolor sit amet.

Button
...

Lorem ipsum dolor sit amet.

Card deck

Lorem ipsum dolor sit amet.

Button
{% endhighlight %}
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


{{site.title}}
New New New

Card deck

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

{{site.title}}

Card deck

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

{{site.title}}

Card deck

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

{% highlight html %}
...

Card deck

Lorem ipsum dolor sit amet.

Button
...

Card deck

Lorem ipsum dolor sit amet.

Button
...

Card deck

Lorem ipsum dolor sit amet.

Button
{% endhighlight %}
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.


{% highlight html %}

Lorem ipsum dolor sit amet, consectetur adipiscing elit.


Efrain Peralta @EfraaX

Lorem ipsum dolor sit amet, consectetur adipiscing elit.


{% endhighlight %}