APEX Cards Region: Building Rich Visual Layouts Without Custom HTML

Beyond Table-Based Reports

Not all data is best presented in rows and columns. Product catalogs, employee directories, project portfolios, and news feeds are more engaging when displayed as visual cards. APEX’s Cards region, introduced in APEX 21.1, provides a declarative way to create card-based layouts with images, badges, actions, and rich formatting without writing custom HTML or CSS.

Setting Up a Cards Region

Create a region with the type set to Cards. Define your source query and then map columns to card elements in the region attributes:

SELECT product_id,
       product_name,
       category,
       unit_price,
       description,
       CASE WHEN in_stock = 'Y' THEN 'In Stock' ELSE 'Out of Stock' END AS stock_status,
       image_url,
       CASE WHEN unit_price > 100 THEN 'u-color-29' ELSE 'u-color-15' END AS badge_css
  FROM products
 WHERE status = 'ACTIVE';

In the Cards attributes, map: Title to PRODUCT_NAME, Subtitle to CATEGORY, Body to DESCRIPTION, Badge to STOCK_STATUS, Icon Source to IMAGE_URL, Primary Key to PRODUCT_ID.

Card Styles and Layouts

The Cards region supports multiple display styles: Basic (simple text cards), with Icons (icon or image on the left), with Media (image at the top), and Float. The grid layout adjusts automatically based on the container width, showing 1 column on mobile, 2 on tablet, and 3 or 4 on desktop. You can control the number of columns through CSS Grid template options.

Actions and Interactivity

Cards support primary and secondary actions. A primary action turns the entire card into a clickable link that navigates to a detail page. Secondary actions appear as buttons or icon links within the card for operations like Edit, Delete, or Add to Cart. Configure these through the card’s Actions attributes by specifying a link target and optionally passing the primary key column as a page item value.

Dynamic Badges and Conditional Styling

Use computed columns in your SQL query to drive dynamic card styling. Map the badge column to show status indicators, and use the CSS Classes column mapping to apply color coding based on data values. The Universal Theme color classes (u-color-1 through u-color-45) work well for this. Cards also support template directives for more complex conditional content within the card body.

Performance With Large Data Sets

Cards regions support server-side pagination. Set the Rows Per Page attribute to a reasonable number like 12 or 24 (multiples of the column count look best). For card layouts with images, ensure images are appropriately sized; serving full-resolution photographs for 50×50 pixel card thumbnails wastes bandwidth and slows page load dramatically.