Vincent Morneau
Cards
Cards are available in Report templates and Region templates.
Panel
{card panel}
I am a very simple card. I am good at containing small bits of information. I am similar to what is called a panel in other frameworks.
Card panel title
Card panel title
Card panel body
Selected Template Options
Component Name: {card panel}
Template: Card
Template OptionValue(s)Comments
Use DefaultYes
Hide TitleYes
Text Color - GlobalWhite
Background ColorTeal
Background ModifierLighten 2
Component Name: Card panel title
Template: Card
Template OptionValue(s)Comments
Use DefaultYes
Text Color - GlobalWhite
Background ColorTeal
Background ModifierLighten 2
Component Name: Card panel title
Template: Card
Template OptionValue(s)Comments
Use DefaultYes
Text Color - GlobalWhite
Background ColorTeal
Background ModifierLighten 2
Basic

Card Title

I am a very simple card. I am good at containing small bits of information.I am convenient because I require little markup to use effectively.

This is a linkThis is a link
Hoverable

Card Title

I am a very simple card. I am good at containing small bits of information.I am convenient because I require little markup to use effectively.

Card Title

I am a very simple card. I am good at containing small bits of information.I am convenient because I require little markup to use effectively.

Card Title

I am a very simple card. I am good at containing small bits of information.

Image
Card Title

I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.

This is a link
Card Title
This is a link
Card Title

I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.

FAB
Card Title
I am a very simple card.
This is a link
Card Title
I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.
This is a link
Horizontal
Card Title

This is a horizontal card

Edit
Card Title
Edit
Card Title

This is a horizontal card

Selected Template Options
Component Name: Horizontal
Template: Standard
Template OptionValue(s)Comments
Use DefaultYes
HorizontalYesIf the card contains an image, it will be displayed horizontally
Number of columns2 Columns
Reveal
Click here

I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.

This is a link
Click here
This is a link
Click here

I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.

Click here

I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.

This is a link
Click here
This is a link
Click here

I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.

Selected Template Options
Component Name: Reveal
Template: Standard
Template OptionValue(s)Comments
Use DefaultYes
Reveal EffectYesThe content will unfold when clicking on the card.
Number of columns2 Columns
Template Options
Template Options
Component Name: Template Options
Template: Standard
Template OptionValue(s)Comments
HorizontalYesIf the card contains an image, it will be displayed horizontally
HoverableYes
Reveal EffectYesThe content will unfold when clicking on the card.
Number of columns1 Column
Number of columns2 Columns
Number of columns3 Columns
Number of columns4 Columns
Substitution Strings

  • Substitution Strings

  • #IMG_SRC# Image source for the card
  • #TITLE# Title of the card
  • #FAB_LABEL# Hidden label for the FAB (optional)
  • #FAB_ICON_CSS_CLASSES# Icon class for a FAB (optional)
  • #FAB_LINK# Link for the FAB (optional)
  • #FAB_COLOR# Color class of the FAB
  • #CONTENT# Content of the card
  • #BTN_LABEL_1# Label for the first button (optional)
  • #BTN_LABEL_2# Label for the second button (optional)
Sample Query
select 'https://raw.githubusercontent.com/vincentmorneau/material-apex/master/docs/img/sample-1.jpg' img_src
    , 'Card Title' title
    , 'Add' fab_label
    , 'add' fab_icon_css_classes
    , apex_page.get_url() fab_link
    , 'red' fab_color
    , 'I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.' content
    , 'This is a link' btn_label_1
    , ' ' btn_label_2
from dual