Cards[ Variable Reference ]

Most websites use cards in some form or another. A card can contain all sorts of content. Jellyfish provides a straightforward card component and a set of useful child styles.

A card container has no padding, allowing images to bleed to full-width if desired. The .card-section element is used when you want to add a padded section within a card. You can have multiple .card-section elements in a card; when they are stacked the top-padding is removed from subsequent sections.

Cards will take up 100% width of their parent container, however this can of course be manually overridden as shown below.

A basic card

Kittens are cute

But Jellyfish are still better!

Whatever!

(Maybe they are both just as awesome)

Card Images

An element with the class .card-image will expand to 100% width of it's parent. Card images can be used outside of the .card-section to bleed to the edges, or inside the .card-section to have padding.

This card has an image outside of the .card-section element.

This card has an image within the .card-section element.

Same-height cards

If you are using cards within a .row and .col structure, you can append the .equal-height class to the .row to force all cards in the row to be 100% height, regardless of their content.

My Awesome Card

This card has just a small amount of text.

My Awesome Card

This card has just a a lot of text. I am going to write a few sentences of gibberish so that the height of this card grows. This will force other cards in the same row to expand to 100% height. You'll see the effect on the card border.

My Awesome Card

This card has just a small amount of text.

Pushing content to the bottom of a card

If you have a row of same-height cards, you might want to push content to the bottom of the card, for example a call-to-action. Simply put this content into a .card-section with the additional class .card-footer.

My Awesome Card

This card has just a small amount of text.

My Awesome Card

This card has just a a lot of text. I am going to write a few sentences of gibberish so that the height of this card grows. This will force other cards in the same row to expand to 100% height. You'll see the effect on the card border.

My Awesome Card

This card has just a small amount of text.