Punica CSS v3 Beta
Components Elements Utilities API Docs
Preview keyboard_arrow_down
Github keyboard_arrow_down
Components
Card
  • Alert
  • Badge
  • Breadcrumb
  • Caption
  • Card
  • Label
  • List
  • Menu
  • Navbar
  • Panel
  • Process
  • Stats
  • Tabnav
  • Timeline
  • Tooltip

    • Card

    The Card component 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.
    Multi-Card
    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.
    Multi-Image
    Card Title
    Card Subtitle
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quos eos odio vero saepe assumenda, impedit veniam unde dolorem.
    person An Item
    email A Second Item
    notifications_active A Third Item
    Hovered Card
    Title
    Subtitle
    Lorem ipsum dolor sit amet, eam ut singulis vituperata, ut aliquid consequat.
    Zoom-in Effect for Media
    Horizontal Cards

    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, et vel aeque vitae abhorreant. Id simul omnesque efficiantur pro.

    .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.

    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