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 convenient because I require little markup to use effectively. I am similar to what is called a panel in other frameworks.
Selected Template Options

{Card Panel}
Template: Card

Template OptionValue(s)Comments
Use DefaultYes
Hide TitleYes
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.
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.I am convenient because I require little markup to use effectively.
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.

Card Titlemore_vert
Card Titleclose

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 add
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 add
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.
Horizontal
Card Title

I am a very simple card.

Card Titlemore_vert
Card Titleclose

I am a very simple card.

Selected Template Options

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.

Click heremore_vert
Click hereclose

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.

Click heremore_vert
Click hereclose

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

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

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_ICON# 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_icon
    , 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