Skip to Main Content

Breadcrumb

About

The Media List template is a very common design pattern that has an icon, heading, description, and a badge. With Universal Theme, you can style both Lists or Classic Reports regions to appear as a Media List by setting the appropriate template.

For Classic Reports, set Media List as the Report Template.

For Lists, set Media List as the List Template.

1. Default

Media List Template

List Template Options

  • Use DefaultYes
  • Apply Theme ColorsYes

2. Variation A

Media List Template

List Template Options

  • Use DefaultNo
  • Show IconsYes
  • Show DescriptionYes
  • Show BadgesYes
  • SizeLarge
  • Layout2 Column Grid

3. Variation B

Media List Template

List Template Options

  • Use DefaultNo
  • Show IconsYes
  • Show BadgesYes
  • Apply Theme ColorsYes
  • SizeLarge
  • Layout3 Column Grid

1. Default

1. Default Report

  • Maintain Support Systems

    1.7 years ago

    #LIST_BADGE#

  • Load Software

    1.7 years ago

    #LIST_BADGE#

  • Email Integration

    1.7 years ago

    #LIST_BADGE#

  • Documentation

    1.7 years ago

    #LIST_BADGE#

  • Training

    1.7 years ago

    #LIST_BADGE#

2. Variation A

2. Variation A Report

  • Maintain Support Systems

    Created by: TOUFIQ

    1.7 years ago

  • Load Software

    Created by: TOUFIQ

    1.7 years ago

  • Email Integration

    Created by: TOUFIQ

    1.7 years ago

  • Documentation

    Created by: TOUFIQ

    1.7 years ago

  • Training

    Created by: TOUFIQ

    1.7 years ago

3. Variation B

3. Variation B

  • Maintain Support Systems

    Created by: TOUFIQ

    1.7 years ago

  • Load Software

    Created by: TOUFIQ

    1.7 years ago

  • Email Integration

    Created by: TOUFIQ

    1.7 years ago

  • Documentation

    Created by: TOUFIQ

    1.7 years ago

  • Training

    Created by: TOUFIQ

    1.7 years ago

Substitution Strings

#A01#
The description of the media list item.
#A02#
The badge of the media list item.
#A03#
HTML Attributes for the clickable link inside of the list item.
#A04#
HTML Attributes for the list item.
#A05#
Class attribute for the link element.
#A06#
Color class

Template Options

  • General

    • Use Template Defaults
    • Show Icons
      Display an icon next to the list item.
    • Show Description
      Shows the description (Attribute 1) for each list item.
    • Show Badges
      Show a badge (Attribute 2) to the right of the list item.
    • Apply Theme Colors
      Applies colors from the Theme's color palette to icons in the list.

  • Size

    • Default
    • Large
      Increases the size of the text and icons in the list.

  • Layout

    • Default
    • 2 Column Grid
    • 3 Column Grid
    • 4 Column Grid
    • 5 Column Grid
    • Span Horizontal
      Show all list items in one horizontal row.

  • Icon Shape

    Determines the shape of the icon.

    • Circle
    • Rounded Corners
      The icons are displayed within a square with rounded corners.
    • Square
      The icons are displayed within a square shape.

Substitution Strings

#LIST_CLASS#
CSS class of the list
#LINK#
Link
#LINK_CLASS#
Class attribute for the link element
#LINK_ATTR#
HTML Attributes for the list item
#ICON_COLOR_CLASS#
CSS class for the icon color
#ICON_CLASS#
CSS class for the icon
#LIST_TITLE#
List title
#LIST_TEXT#
List text
#LIST_BADGE#
The badge of the list item.

Sample Report Query

select
  id,
  project list_title,
  'Created by: ' || created_by list_text,
  ' ' list_class,
  null link, 
  'target="_blank"' link_attr,
  'u-color-' || to_char( ora_hash(created_by,44) + 1 ) icon_color_class,
  'fa fa-cloud' icon_class,
  apex_util.get_since(updated) list_badge
from eba_UT_chart_projects