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.
Joined in 2013
Kristy is an art director living in New York.
14h
Elliot
17 likes
3 comments
A group of cards.
Cards are designed to be flexible to your content. content
blocks can include any custom elements related to your content.
Friends of Veronika
Elliot requested permission to view your contact details
New Member
Jenny wants to add you to the group best friends
Matthew is an interior designer living in New York.
Coworker
Molly is a personal assistant living in Paris.
Elyse is a copywriter working in New York.
A card can contain blocks of content
A card can contain an image
Cards can use
reveal or
dimmers to easily show additional content, or options on hover
$('.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'
});
A card can contain a header
Friend
Elliot Fu is a film-maker from New York.
Friend
Veronika Ossi is a set designer living in New York who enjoys kittens, music, and partying.
Friend
Jenny is a student studying Media Management at the New School
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
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
A card can contain buttons
Elliot Fu is a film-maker from New York.
Add Friend
Veronika Ossi is a set designer living in New York who enjoys kittens, music, and partying.
Add Friend
Jenny is a student studying Media Management at the New School
Add Friend
A card can contain a like or star action.
A card can contain a description with one or more paragraphs
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.
A card can contain extra content meant to be formatted separately from the main content
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.
A card may show its content is disabled
Joined in 2013
Kristy is an art director living in New York.
A card may show its content is being loaded
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.
Joined in 2013
Kristy is an art director living in New York.
Joined in 2013
Kristy is an art director living in New York.
A fluid card takes up the width of its container
A card can center itself inside its container
A card can display horizontally
Matthew is an interior designer living in New York.
Coworker
Molly is a personal assistant living in Paris.
A card may be formatted to raise above the page.
A card can be formatted so that the entire contents link to another page
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
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 is a student studying Media Management at the New School
Card's colors can be inverted
Matthew is an interior designer living in New York.
Coworker
Molly is a personal assistant living in Paris.
Elyse is a copywriter working in New York.
A card can specify a color
A basic card does not have a border and also supports full color background
A group of cards can set how many cards should exist in a row
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
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
A card text can vary in size
Variant
This is a mini card
Variant
This is a tiny card
Variant
This is a small card
Variant
This is a large card
Variant
This is a big card
Variant
This is a huge card
Variant
This is a massive card