Card Templates in Oracle APEX provide a powerful and flexible way to control the visual layout and formatting of individual cards within a Card Region. While Card Regions define how data is presented in card-style formats, Card Templates let developers fine-tune the appearance of each card, using HTML and substitution strings. This feature is ideal when you need more control over the layout, want to apply advanced formatting, or display multiple custom elements within each card.
How to Use Card Templates in Oracle APEX
Card Templates are created and managed through Shared Components and applied directly to Card Regions. Here's how to set them up:
-
Access Card Templates
-
Open your APEX application in App Builder.
-
Click Shared Components.
-
Under User Interface, click Templates.
-
Click Create and choose Region as the Template Type.
-
Select Cards as the template category.
-
Name your template, for example, “Custom Product Card”.
-
-
Define the Template HTML
-
In the Template section, use HTML with APEX substitution strings to control layout.
-
Common substitution strings include:
-
#TITLE#– Main title of the card -
#SUB_TITLE#– Subtitle or secondary info -
#MEDIA#– Image or icon URL -
#BADGE#– Visual badge (e.g., status or category) -
#BODY#– Main content or description -
#ACTIONS#– Card-level buttons or links
-
Example Custom HTML:
<div class="custom-card"> <img src="#MEDIA#" alt="Card Image" class="card-image"/> <div class="card-content"> <h3>#TITLE#</h3> <h5>#SUB_TITLE#</h5> <p>#BODY#</p> <span class="badge">#BADGE#</span> <div class="actions">#ACTIONS#</div> </div> </div> -
-
Apply the Card Template to a Card Region
-
Go to the Page Designer where your Card Region is.
-
In the Card Region settings, locate the Template property.
-
Select the custom template you just created.
-
Map your columns to substitution strings in the Card Attributes section.
-
-
Customize with CSS (Optional)
-
Use Inline CSS or reference a static CSS file to style
.custom-card,.badge,.card-image, and other classes. -
Apply responsive design if needed by using APEX grid classes or media queries.
-
Examples
Employee Profile Card Template
-
Uses
#MEDIA#for profile picture -
#TITLE#= Full Name -
#SUB_TITLE#= Job Title -
#BADGE#= Department -
#BODY#= Contact Info -
#ACTIONS#= View or Edit links
Product Card Template
-
#MEDIA#= Product image -
#TITLE#= Product name -
#SUB_TITLE#= Price -
#BODY#= Product description -
#BADGE#= Availability status -
#ACTIONS#= Add to Cart button
Best Practices
-
Use semantic HTML for accessibility and screen reader support
-
Keep templates modular by breaking layout into clean sections like media, content, and actions
-
Avoid inline styles when possible; use class-based styling for easier maintenance
-
Use conditionals or computed columns in your SQL if you need to dynamically control content visibility
-
Test across devices to ensure responsiveness, especially if your cards include images or actions
Card regions are used for displaying information in small blocks. They can display text, icons, images, and initials, Just like other reports they have customizable attributes such as:
Data
Title
Subtitle
Card body text
Secondary card body text
UI Attributes
Card Icon
Card badge
Card Image
In addition, card regions can also have buttons and pagination added to complete the package.
The card information is generally displayed via a query that identifies the attributes to be used. Here is a generalized example 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
Example 1: Using all attributes
Region
Example 2: Cards with Background
Region
select id,
category,
title,
subtitle,
substr(body,1,100)||'...' as agenda,
secondary_body as speakers,
icon_class,
badge,
'#APP_FILES#' || image_url as image,
to_char(start_date, 'fmDDfm Month YYYY fmHHfm:MI PM') || ' - ' || to_char(end_date, 'fmHHfm:MI PM') as event_date
from eba_ut_demo_cards
where category = 'conference'
and id >= 4
Attribute Settings:
Output
Example 3: Cards with Badges
select id,
category,
title,
subtitle,
body,
secondary_body,
icon_class,
'badge' badge,
'#APP_FILES#' || image_url as image,
to_char(start_date, 'fmDDfm Month YYYY fmHHfm:MI PM') as start_date,
to_char(end_date, 'fmHHfm:MI PM') as end_date
from eba_ut_demo_cards
where category = 'badge';
Attributes
Example:
Example 4: Cards Using Image First
select id,
category,
title,
subtitle,
substr(body,1,100)||'...' as agenda,
secondary_body as speakers,
icon_class,
badge,
'#APP_FILES#' || image_url as image,
to_char(start_date, 'fmDDfm Month YYYY fmHHfm:MI PM') as start_date,
to_char(end_date, 'fmHHfm:MI PM') as end_date
from eba_ut_demo_cards
where category = 'workshop'
and id < 10
Attribute
Example 5: Grid Card Layout
select id,
category,
title,
subtitle,
substr(body,1,100)||'...' as agenda,
secondary_body as speakers,
icon_class,
badge,
'#APP_FILES#' || image_url as image,
to_char(start_date, 'fmDDfm Month YYYY fmHHfm:MI PM') as start_date,
to_char(end_date, 'fmHHfm:MI PM') as end_date
from eba_ut_demo_cards
where category = 'workshop'
and id >= 9
Attribute:
Oracle APEX Documentation
For official reference and examples, visit the Oracle APEX documentation:
https://docs.oracle.com/en/database/oracle/apex/
Search for “Card Templates” or review the “Templates” and “Card Regions” sections.
Conclusion
Card Templates in Oracle APEX allow you to create fully customized layouts for your card-based UI components. By leveraging substitution strings, HTML, and CSS, you can design intuitive, responsive, and visually rich interfaces tailored to your application's needs. Whether you're building an employee directory, a product catalog, or a dashboard with actionable insights, Card Templates give you the flexibility to present data exactly how you want. By combining declarative APEX features with smart template design, you can achieve both beauty and functionality with ease.
