Cards
Chubby's cards provide a flexible and extensible content container with multiple variants and options.
Basic Card
Cards are built with as little markup and styles as possible, but still manage to deliver a ton of control and customization.
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhereTitles, Text, and Links
Card title
Card subtitle
Some quick example text to build on the card title and make up the bulk of the card's content.
Card link Another linkCard Action (Hoverable)
Use the .card-action class to make the whole card an interactive
action.
Card title
Card subtitle
Some quick example text to build on the card title and make up the bulk of the card's content.
Card with Tabs
Tabs can be added to the top of cards using .nav-tabs-card.
Card with Header
Special title treatment
With supporting text below as a natural lead-in to additional content.
Go somewhereCard with Table
| ID | Title |
|---|---|
| 1 | How do I make an employer read my resume? |
| 2 | Free socks this christmas? |
| 3 | Do I need a cover letter? |
| 4 | Who you gonna call? |
| 5 | Which country has the highest population of stray cats? |
Card Groups
Use card groups to render cards as a single, attached element with equal width and height columns.
Card title
This is a wider card with supporting text below as a natural lead-in to additional content.
Last updated 3 mins ago
Card title
This card has supporting text below as a natural lead-in to additional content.
Last updated 3 mins ago
Card title
This is a wider card with supporting text below. This card has even longer content than the first.
Last updated 3 mins ago
Card Decks
Equal width and height cards that aren't attached to one another.
Card title
This is a longer card with supporting text below as a natural lead-in to additional content.
Last updated 3 mins ago
Card title
This card has supporting text below as a natural lead-in to additional content.
Last updated 3 mins ago
Card title
This is a wider card with supporting text below. This card has even longer content.
Last updated 3 mins ago
Sizing Options
Cards assume no specific width to start. Use grid classes or utilities to control width.
Special title treatment
With supporting text below as a natural lead-in to additional content.
Go somewhereSpecial title treatment
With supporting text below as a natural lead-in to additional content.
Go somewhere