Introduction
The card type field, part of the Settings API, renders radio type inputs in a stylized card.
The card field must always be the only field in a section – if you put another field in the same section, it will not get the card layout.
Example
The following example shows a section with a card type field.
array(
'fields' => array(
array(
'name' => 'field_name',
'type' => 'card',
'choices' => array(
array(
'label' => esc_html__( 'Choice One', 'gravityforms' ),
'value' => 'one',
'icon' => $this->get_base_url() . '/img/one.svg',
'tag' => esc_html__( 'Recommended', 'gravityforms' ),
'color' => 'orange',
'title' => esc_html__( 'Choice One', 'gravityforms' ),
'description' => esc_html__( 'Here is more information about Choice One. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ac nulla pretium, viverra lacus in, egestas justo. Cras lobortis enim quis massa facilisis, vitae viverra orci ullamcorper.', 'gravityforms' ),
),
array(
'label' => esc_html__( 'Choice Two', 'gravityforms' ),
'value' => 'two',
'icon' => $this->get_base_url() . '/img/two.svg',
'tag' => esc_html__( 'Most Flexible', 'gravityforms' ),
'color' => 'blue-ribbon',
'title' => esc_html__( 'Choice Two', 'gravityforms' ),
'description' => esc_html__( 'Here is more information about Choice Two. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ac nulla pretium, viverra lacus in, egestas justo. Cras lobortis enim quis massa facilisis, vitae viverra orci ullamcorper.', 'gravityforms' ),
)
),
),
),
),
The card field will render content similar to the following:
