In Oracle APEX, the Universal Theme offers a rich set of templates that can address most of your needs. However, there may be instances where implementing a basic feature becomes challenging.

For all edge cases, the Universal Theme provides a comprehensive list of predefined classes that allow you to adjust the look and feel of your application in a uniquely sustainable way.

Using native classes ensures that after a Universal Theme upgrade, your application will likely remain functional, automatically inheriting any fundamental changes from the Oracle APEX team.

Let me illustrate this with an extreme example: If the APEX team redefines paddings tomorrow, using the native class padding-sm will automatically update the padding from 0.5rem to the new value defined by Oracle's UI/UX team. However, if you hardcode that value in your own CSS, it won't change, potentially causing your application to look inconsistent.

The Problem

Back to the topic, I have recently wanted to create Card-Per-Row template, with a big image on the side. As you can see below, that is possible with the Card Report in the horizontal layout.

Apart from encountering some limitations with these template options, which are off-topic for this post and were confirmed by the Oracle APEX team (see below), I wanted to include a table-type layout inside the Card template to better present the basic information.

The Solution

Having a lot of data inside a card is probably one of those edge cases mentioned above, which is why I attempted to solve the problem using a custom yet native way.

With this simple approach and by using Universal Theme's native CSS helper classes, you can hide the first column with the labels on smaller screens and display an extra row with the same label instead.

<table class="w100p padding-sm">
  <tbody>
    <tr class="hidden-md-up">
      <td>Name</td>
      <td></td>
    </tr>
    <tr>
      <td class="hidden-sm-down">Name</td>
      <td class="u-bold">&ENAME.</td>
    </tr>
    <tr class="hidden-md-up">
      <td>Job</td>
      <td></td>
    </tr>
    <tr>
      <td class="hidden-sm-down">Job</td>
      <td class="u-bold">&JOB.</td>
    </tr>
    <tr class="hidden-md-up">
      <td>Salary</td>
      <td></td>
    </tr>
    <tr>
      <td class="hidden-sm-down">Salary</td>
      <td class="u-bold">&SAL.</td>
    </tr>
    <tr class="hidden-md-up">
      <td>Hire Date</td>
      <td></td>
    </tr>
    <tr>
      <td class="hidden-sm-down">Hire Date</td>
      <td class="u-bold"> &HIREDATE.</td>
    </tr>
  </tbody>
</table>

Check the visibility classes in the documentation here for more info.

The Result

With a bit of extra effort, you can transform your card region horizontal template into a nice-looking info card like this:

Enjoy life!