Skip to Main Content

Overview

Cards Regions are useful for presenting a variety of information in small blocks and can be heavily customized. They can be displayed in three styles, with icons or initials, images as part of the body or as the background, to enhance each card presentation and you can control the layout.

Actions can be added to each card's image, title, subtitle, as new buttons or even using the entire card to enhance user experience.

Demo

With All Attributes, Buttons and Pagination

Region

Type: Cards
Grid Columns: 2
Pagination: enabled with 2 entries.

Card Attributes

Top area has an icon class, title, subtitle and badge information. Below the media is a paragraph as the body and a small timestamp as secondary body.

Media

Source: Image URL
Position: Body
Appearance: Auto
Sizing: Cover

Actions

  1. Button in Primary position that opens a modal page.
  2. Button in Secondary position, only icon.

Live Template Options

Style: C

With Backgrounds

Region

Type: Cards
Grid Columns: 3
Pagination: scroll (default)

Card Attributes

Top area has an icon class, title, subtitle and badge information. Media is set as background, on top is a paragraph as the body with no secondary body.

Media

Source: Image URL
Position: As Background Image
Appearance: Auto
Sizing: Cover

Actions

  1. Button in Primary position that opens a modal page.

Live Template Options

Style: A

With Badges

Region

Type: Cards
Grid Columns: 3
Pagination: scroll (default)

Card Attributes

From top to bottom there is an icon with image URL, title, subtitle and body information. Media is not set.

Icon

Source: Image URL
Position: Start

Actions

  1. Entire Card as a link.

Live Template Options

Style: B

With Image First

Region

Type: Cards
Grid Columns: 3
Pagination: scroll (default)

Card Attributes

From top to bottom there is an image, icon, title, subtitle, badge and body information.

Media

Source: URL Column
Position: First
Appearance: Widescreen
Sizing: Cover

Actions

  1. Entire Card as a link.

Live Template Options

Style: B

With Grid Layout

Region

Type: Cards
Grid Columns: Auto
Pagination: scroll (default)

Card Attributes

From top to bottom there is an icon, title and subtitle. No Media.

Icon

Source: Icon Class Column
Position: Top

Actions

  1. Entire Card as a link.

Live Template Options

Style: B Label Alignment: Right

Sample SQL Query

select
  -- data
  card_primary_key,    -- primary key
  card_secondary_key,  -- secondary key if needed
  card_title,          -- title
  card_subtitle,       -- subtitle
  card_body,           -- card body text
  card_secondary_body, -- card secondary text, positioned near bottom

  -- ui and other attributes
  card_icon,           -- icon class, e.g. fa-cloud
  card_badge,          -- badge, can be a small text
  card_image           -- image url, url or blob columns
from dual