Card

A flexible content container component that provides a structured way to display content with headers, footers, and various content options, offering a clean and consistent layout for information presentation.

Basic Card

The card component can be created by calling the UI::card() method.

Preview Code
Card Header
This is the card content.
Card Footer
php
Options
The Card component has several options for images and toolbar positioning.
  • Card::FILL: Image fill option that fills the image container.
  • Card::CONTAIN: Image fit option that ensures the entire image is contained within its container.
  • Card::COVER: Image fit option that covers the entire container, potentially cropping parts of the image.
  • Card::TOP_LEFT: Position option for toolbar placement in the top-left corner.
  • Card::TOP_RIGHT: Position option for toolbar placement in the top-right corner.
  • Card::BOTTOM_LEFT: Position option for toolbar placement in the bottom-left corner.
  • Card::BOTTOM_RIGHT: Position option for toolbar placement in the bottom-right corner.
Card Examples
Here are examples of different ways to use the card component.

Styled Card

The bsStyle() method applies Bootstrap styling to the card.

Preview Code
Primary Card
This card has primary styling.
php

Card with Border Style

The borderBSStyle() method applies a colored border to the card.

Preview Code
Card with Danger Border
This card has a red border.
php

Card with Image

The image() method adds an image to the card. The second parameter specifies the fit style.

Preview Code
Card with Image
This card includes an image with cover fit.
php

Card with Custom Image Aspect Ratio

You can specify an aspect ratio for the image using the third parameter of the image() method.

Preview Code
Card with 16:9 Image
This card has an image with a 16:9 aspect ratio.
php

Card with Toolbar

The toolbar() method adds buttons to the card. The second parameter specifies the position.

Preview Code
Card with Toolbar
This card has a toolbar in the top-right corner.
php

Card with Multiple Features

Multiple features can be combined to create a highly customized card.

Preview Code
Multi-feature Card
This card combines multiple features: styling, image, collapse, and close buttons.
Card Footer
php

Card with HTML Content

The card's header, body, and footer can accept HTML elements or arrays of elements for more complex content.

Preview Code
Card Title

This is a paragraph inside the card.

  • Item 1
  • Item 2
  • Item 3
php

API

The card component extends from HtmlElement so it has all its methods available.
API PHP

Common alternative names: Panel, Tile, Block, Container, Box, Module, Widget

Types: Basic Cards, Image Cards, Styled Cards, Bordered Cards, Interactive Cards, Collapsible Cards, Closeable Cards

Principles

Content Organization

Cards organize related content into discrete, manageable units, creating visual separation that improves readability and information processing.

Flexible Presentation

The versatile structure of cards enables consistent presentation of different types of content while maintaining flexibility for various use cases.

Visual Hierarchy

Through consistent styling and layout, cards establish a clear visual hierarchy that helps users understand the relationship between different pieces of information.

Anatomy

Card Anatomy
  1. Title

    2. A descriptive title that conveys the gist of the information contained within the card

  2. Subtitle

    3. A secondary title that provides additional context or information

  3. Body

    4. The main content area of the card

  4. Index

    5. A visual index or indicator that helps users understand the card's position in the layout

  5. Toolbar

    6. A collection of buttons or actions related to the card content

Usage

Use cards to organize and display content in a clean, structured format. They're particularly effective for dashboards, catalogs, profile pages, and any interface where multiple content blocks need to be displayed in a consistent manner. Cards help create visual distinction between different pieces of content while maintaining a cohesive design language across the application.