Card

Source API

The Card module is a flexible and modular container for displaying content. It typically includes elements like a title/subtitle, image, description, and actions section, but can be customized to suit various needs. Cards are perfect for organizing information in a visually appealing and consistent layout.

Title

Subtitle

Lorem ipsum dolor sit amet, eam ut singulis vituperata, ut aliquid consequat.

You can define any number of cards per row based on your preference. The default system supports a maximum of 11 cards per row (ranging from 2 to 12). In the example below, three cards fit in the first row, while the fourth card dynamically moves to the second row. Additionally, card groups automatically apply flex styles to ensure cards in the same row have matching heights.

First Card

Card Subtitle

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quos eos odio vero saepe assumenda, impedit veniam unde dolorem.

Second Card

Card Subtitle

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod, repudiandae neque obcaecati quae temporibus autem.

Third Card

Card Subtitle

Lorem ipsum dolor sit amet consectetur, adipisicing elit.

Fourth Card

Yep, i'm in the second row

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quos eos odio vero.

Card Title

Card Subtitle

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quos eos odio vero saepe assumenda, impedit veniam unde dolorem.

Title

Subtitle

Lorem ipsum dolor sit amet, eam ut singulis vituperata, ut aliquid consequat.

Just add the .horizontal class to .card container class.

Punica CSS v3

API-Driven Framework

Lorem ipsum dolor sit amet, his harum mediocrem euripidis at, in mutat legere vim.

.title, .subtitle and .description classes should be used in .body container class for horizontal cards.

Multi-Image

Punica CSS Framework

Lorem ipsum dolor sit amet, his harum mediocrem euripidis at, in mutat legere vim, et vel aeque vitae abhorreant.

Password

check

Props
Default Class Name	Combinators
`cards`	`.cards`
`card`	`.card` `.cards > .card`
`media`	`.card > .media`
`title`	`.card > .title` `.horizontal.card > .body .title`
`subtitle`	`.card > .title > .subtitle` `.horizontal.card > .body .title > .subtitle`
`description`	`.card > .description` `.horizontal.card > .body .description`
`actions`	`.card > .actions`
`body` (only for horizontal card)	`.horizontal.card > .body`
States	Combinators
`horizontal`	`.horizontal.card`
`hovered`	`.hovered.cards` `.hovered.card`
`zoom-in`	`.card > .zoom-in.media`