Menu

Card
A card displays site content in a manner similar to a playing card

Types

Card

A single card.

To ensure cards are equal height use the plural, cards. Card groups automatically uses flex styles to match height between cards in the same row.
Kristy
Joined in 2013
Kristy is an art director living in New York.
14h
Elliot
17 likes 3 comments

Cards

A group of cards.

Cards are designed to be flexible to your content. content blocks can include any custom elements related to your content.

Elliot Fu
Friends of Veronika
Elliot requested permission to view your contact details
Approve
Decline
Jenny Hess
New Member
Jenny wants to add you to the group best friends
Approve
Decline

Content

Content Block

A card can contain blocks of content

Project Timeline

Activity

Elliot Fu added Jenny Hess to the project
Helen Troy added two pictures

Image

A card can contain an image

Cards can use reveal or dimmers to easily show additional content, or options on hover
Team Fu & Hess
Created in Sep 2014
$('.special.cards .image').dimmer({ // As hover is not working on mobile, you might use click on those devices as fallback on: 'ontouchstart' in document.documentElement ? 'click' : 'hover' });
Add Friend
Team Fu
Created in Sep 2014
Add Friend
Team Hess
Created in Aug 2014

Header

A card can contain a header

Elliot Fu
Friend
Elliot Fu is a film-maker from New York.
Veronika Ossi
Friend
Veronika Ossi is a set designer living in New York who enjoys kittens, music, and partying.
Jenny Hess
Friend
Jenny is a student studying Media Management at the New School

Metadata

A card can contain content metadata

You can include an arbitrary amount of metadata using your own class conventions, all child elements will automatically be spaced
Cute Dog
2 days ago Animals

Link

A card can contain contain links as images, headers, or inside content

To make the entire content of a card link, check out the link variation below

Buttons

A card can contain buttons

Elliot Fu
Elliot Fu is a film-maker from New York.
Add Friend
Veronika Ossi
Veronika Ossi is a set designer living in New York who enjoys kittens, music, and partying.
Add Friend
Jenny Hess
Jenny is a student studying Media Management at the New School
Add Friend

Approval

A card can contain a like or star action.

Cute Dog
Favorite

Description

A card can contain a description with one or more paragraphs

Cute Dog
2 days ago

Cute dogs come in a variety of shapes and sizes. Some cute dogs are cute for their adorable faces, others for their tiny stature, and even others for their massive size.

Many people also have their own barometers for what makes a cute dog.

Extra Content

A card can contain extra content meant to be formatted separately from the main content

Cute Dog
2 days ago

Cute dogs come in a variety of shapes and sizes. Some cute dogs are cute for their adorable faces, others for their tiny stature, and even others for their massive size.

Many people also have their own barometers for what makes a cute dog.

121 Votes

States

Disabled

A card may show its content is disabled

Kristy
Joined in 2013
Kristy is an art director living in New York.

Loading

A card may show its content is being loaded

Kristy
Joined in 2013
Kristy is an art director living in New York.

The loader inherits the color of the card, if you want to prevent this, add the usual class, so the loader color stays default, while the card still gets its color

elastic as loading style is currently not supported because card uses the :before pseudoclass to dimm the background.
Kristy
Joined in 2013
Kristy is an art director living in New York.
Kristy
Joined in 2013
Kristy is an art director living in New York.

Variations

Fluid Card

A fluid card takes up the width of its container

Centered Card

A card can center itself inside its container

Horizontal Cards

A card can display horizontally

Cute Dog
Animals
Matt Giampietro
Matthew is an interior designer living in New York.
Molly
Coworker
Molly is a personal assistant living in Paris.

Raised Card

A card may be formatted to raise above the page.

Cute Dog
Animals
Matt

Link Card

A card can be formatted so that the entire contents link to another page

Cute Dog
Animals
Matt

Floated Content

Any content element can be floated left or right

You can include an arbitrary amount of metadata using your own class conventions, all child elements will automatically be spaced
Cute Dog
2 days ago Animals
Matt

Text Alignment

Any element inside a card can have its text alignment specified

You can include an arbitrary amount of metadata using your own class conventions, all child elements will automatically be spaced
Jenny Hess

Jenny is a student studying Media Management at the New School

Jenny

Inverted

Card's colors can be inverted

Matt Giampietro
Matthew is an interior designer living in New York.
Joined in 2013 75 Friends
Molly
Coworker
Molly is a personal assistant living in Paris.
Joined in 2011 35 Friends
Elyse
Elyse is a copywriter working in New York.
Joined in 2014 151 Friends

Colored

A card can specify a color

Basic

A basic card does not have a border and also supports full color background

Column Count

A group of cards can set how many cards should exist in a row

Rating:
Rating:
Rating:
Rating:
Rating:
Rating:
Rating:
Rating:

Stackable

A group of cards can automatically stack rows to a single columns on mobile devices

Resize your browser to a smaller size to see the cards stack after reaching mobile breakpoints

Doubling

A group of cards can double its column width for mobile

Resize your browser to a smaller size to see the cards stack after reaching mobile breakpoints

Size

A card text can vary in size

Mini Card
Variant
This is a mini card
Fomantic-UI
Tiny Card
Variant
This is a tiny card
Fomantic-UI
Small Card
Variant
This is a small card
Fomantic-UI
Large Card
Variant
This is a large card
Fomantic-UI
Big Card
Variant
This is a big card
Fomantic-UI
Huge Card
Variant
This is a huge card
Fomantic-UI
Massive Card
Variant
This is a massive card
Fomantic-UI

Dimmer Message
Dimmer sub-header