<div class="clickable-cards">
<div class="clickable-cards__text-wrap">
<h2 class="clickable-cards__heading heading heading--medium">Hello world here is a title for you</h2>
<div class="clickable-cards__intro">this is an intro this is an intro this is an intro this is an intro this is an intro this is an intro this is an intro this is an intro this is an intro this is an intro this is an intro this is an intro this is an intro this is an intro this
is an intro this is an intro this is an intro this is an intro this is an intro this is an intro this is an intro this is an intro this is an intro this is an intro this is an intro this is an intro this is an intro this is an intro this is
an intro this is an intro </div>
</div>
<div class="card-collection" style="padding-top:0;">
<div class="card-collection__inner card-collection__inner--">
<a data-observe-resizes class="icon-card has-shadow">
<div class="icon-card__image " style="background-image: url('large')">
</div>
<div class="icon-card__content">
<div class="icon-card__padder">
<h2 class="heading heading--small">Therapeutic</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</p>
</div>
</div>
</a>
<a data-observe-resizes class="icon-card has-shadow">
<div class="icon-card__image " style="background-image: url('large')">
</div>
<div class="icon-card__content">
<div class="icon-card__padder">
<h2 class="heading heading--small">Research & discovery</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore sectetur adipiscing elit, sed do eiusmod tempor.</p>
</div>
</div>
</a>
<a data-observe-resizes class="icon-card has-shadow">
<div class="icon-card__image " style="background-image: url('large')">
</div>
<div class="icon-card__content">
<div class="icon-card__padder">
<h2 class="heading heading--small">Patients & care givers 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</p>
</div>
</div>
</a>
</div>
</div>
</div>
/* @clickable-cards */
.clickable-cards {
@include poly-padding-x;
@include poly-padding-y--large;
background-color: $white;
&.has-dark-background {
@include themify($themes) {
background-color: themed('highlightColor') !important;
}
.clickable-cards__heading,
.clickable-cards__intro,
.clickable-cards__footnote{
color: $white;
>h2,
>h3,
>h4,
>p,
>ul li {
color: $white;
}
}
}
.clickable-cards__heading,
.clickable-cards__intro,
.clickable-cards__footnote{
color: black;
>h2,
>h3,
>h4,
>p,
>ul li {
color: black;
}
}
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
.card-collection__inner:not(.card-collection__inner--solo) {
> a {
display: block;
}
}
}
.card-collection__inner--solo {
.icon-card__image {
flex: 1 !important;
}
}
&__text-wrap, {
width: 100%;
max-width: 1024px;
margin: 0 auto;
margin-bottom: $large-spacing;
.theme-corporate & {
color: $white;
}
}
&__footnote {
width: 100%;
max-width: 1024px;
margin: 0 auto;
@include poly-padding-x;
padding-top: $base-spacing;
}
// &__heading {
// .theme-corporate & {
// color: white;
// }
// }
&.thumbnail-border {
padding: 1rem 1rem 0 1rem;
}
&__image {
&.thumbnail-image {
margin: 0 auto;
text-align: center;
img.content-card__thumbnail {
height: 220px;
width: auto;
margin: 0 auto;
}
}
}
}
.theme-dysport {
.clickable-cards {
&__footnote,
&__heading,
&__intro {
color: white;
}
}
}
<?php
$clickableCards = array (
'key' => 'clickablecardsfield',
'label' => 'Clickable Cards',
'name' => 'clickable-cards',
'type' => 'repeater',
'sub_fields' => array (
array (
'key' => 'clickableCards__Title',
'label' => 'Section Title',
'name' => 'title', // the 'name' value for each field has to match the variable in the Twig file.
'type' => 'text',
),
array (
'key' => 'accordion_section_label',
'label' => 'Section Label',
'name' => 'blocklabel',
'type' => 'text',
'instructions' => __('This label appears in in-page navigation and within the content of some blocks, overriding the title.', 'ipsen-master'),
),
array(
'key' => 'hide_block_clickcards',
'label' => 'Hide this block from anchor links',
'name' => 'hide_block',
'type' => 'true_false',
'instructions' => '',
'required' => 0,
'wrapper' => array(
'width' => '',
'class' => '',
'id' => '',
),
'message' => '',
'default_value' => 0,
'ui' => 1,
'ui_on_text' => '',
'ui_off_text' => '',
),
array (
'key' => 'clickableCards_center_title',
'label' => __('Center Title and text?', 'ipsen-master'),
'name' => 'center_title',
// 'instructions' => __('This is optional', 'ipsen-master'),
'type' => 'true_false',
'instructions' => '',
'required' => 0,
'conditional_logic' => 0,
'message' => '',
'default_value' => 0,
'ui' => 1,
'ui_on_text' => '',
'ui_off_text' => '',
'wrapper' => array(
'width' => '50%',
'class' => '',
'id' => '',
),
),
array(
'key' => 'clickableCards__theme',
'label' => 'Theme',
'name' => 'theme',
'type' => 'radio',
'instructions' => 'Select background colour',
'required' => 0,
'conditional_logic' => 0,
'wrapper' => array(
'width' => '',
'class' => '',
'id' => '',
),
'choices' => array(
'dark' => 'Themed',
'white' => 'White',
),
'allow_null' => 0,
'other_choice' => 0,
'default_value' => '',
'layout' => 'horizontal',
'return_format' => 'value',
'save_other_choice' => 0,
),
array (
'key' => 'clickableCards_Intro',
'label' => __('Introduction', 'ipsen-master'),
'name' => 'intro',
'instructions' => __('This is optional', 'ipsen-master'),
'type' => 'wysiwyg',
'tabs' => 'visual',
'toolbar' => 'basic',
'media_upload' => 0,
),
array(
'key' => 'clickableCards__Display-type',
'label' => 'Clickable Cards Display Type',
'name' => 'display_type',
'type' => 'select',
'instructions' => 'Would you like the Clickable Cards to display as Stacked, as a Carousel, or do you need a Solo card?',
'conditional_logic' => 0,
'wrapper' => array(
'width' => '',
'class' => '',
'id' => '',
),
'choices' => array(
'stacked' => 'Stacked',
'carousel' => 'Carousel',
'solo' => 'Solo card only',
),
'default_value' => array(
0 => 'carousel',
),
'allow_null' => 0,
'multiple' => 0,
'ui' => 0,
'return_format' => 'value',
'ajax' => 0,
'placeholder' => '',
),
array(
'key' => 'clickableCards__Cards',
'label' => 'Cards',
'name' => 'cards',
'layout' => 'block',
'type' => 'repeater',
'button_label' => 'Add Card',
'sub_fields' => array (
array(
'key' => 'field_5c1937cef8b17',
'label' => 'Select click behaviour',
'name' => 'add_modal',
'type' => 'radio',
'instructions' => '',
'required' => 0,
'conditional_logic' => 0,
'wrapper' => array(
'width' => '',
'class' => '',
'id' => '',
),
'choices' => array(
'link' => 'Link',
'modal' => 'Modal',
),
'allow_null' => 0,
'other_choice' => 0,
'default_value' => '',
'layout' => 'horizontal',
'return_format' => 'value',
'save_other_choice' => 0,
),
array(
'key' => 'field_5c1937eef8b1863h',
'label' => 'Modal trigget text',
'name' => 'modal_trigger',
'type' => 'text',
'instructions' => '',
'required' => 0,
'conditional_logic' => array(
array(
array(
'field' => 'field_5c1937cef8b17',
'operator' => '==',
'value' => 'modal',
),
),
),
'wrapper' => array(
'width' => '',
'class' => '',
'id' => '',
),
'default_value' => '',
'placeholder' => '',
'prepend' => '',
'append' => '',
'maxlength' => '',
),
array(
'key' => 'field_5c1937eef8b18',
'label' => 'Modal content',
'name' => 'modal_content',
'type' => 'wysiwyg',
'instructions' => '',
'required' => 0,
'conditional_logic' => array(
array(
array(
'field' => 'field_5c1937cef8b17',
'operator' => '==',
'value' => 'modal',
),
),
),
'wrapper' => array(
'width' => '',
'class' => '',
'id' => '',
),
'default_value' => '',
'tabs' => 'all',
'toolbar' => 'full',
'media_upload' => 1,
'delay' => 0,
),
array(
'key' => 'clickablecard_link',
'label' => 'Link',
'name' => 'cta',
'type' => 'link',
'instructions' => '',
'required' => 0,
'conditional_logic' => array(
array(
array(
'field' => 'field_5c1937cef8b17',
'operator' => '==',
'value' => 'link',
),
),
),
'wrapper' => array(
'width' => '',
'class' => '',
'id' => '',
),
'return_format' => 'url',
),
array(
'key' => 'clickablecard_label',
'label' => 'CTA label',
'name' => 'label',
'type' => 'text',
'instructions' => '',
'required' => 0,
'conditional_logic' => array(
array(
array(
'field' => 'field_5c1937cef8b17',
'operator' => '==',
'value' => 'link',
),
),
),
'wrapper' => array(
'width' => '',
'class' => '',
'id' => '',
),
),
array (
'key' => 'clickableCards_center_link_url',
'label' => __('Center title and link?', 'ipsen-master'),
'name' => 'center_link',
// 'instructions' => __('This is optional', 'ipsen-master'),
'type' => 'true_false',
'instructions' => '',
'required' => 0,
'conditional_logic' => 0,
'message' => '',
'default_value' => 0,
'ui' => 1,
'ui_on_text' => '',
'ui_off_text' => '',
'wrapper' => array(
'width' => '50%',
'class' => '',
'id' => '',
),
),
array(
'key' => 'field_5bbf9aedbb510',
'label' => 'Heading',
'name' => 'heading',
'type' => 'text',
'instructions' => '',
'required' => 0,
'conditional_logic' => 0,
'wrapper' => array(
'width' => '',
'class' => '',
'id' => '',
),
'default_value' => '',
'placeholder' => '',
'prepend' => '',
'append' => '',
'maxlength' => '',
),
array(
'key' => 'field_5bbf9b35bb511',
'label' => 'Text',
'name' => 'text',
'type' => 'wysiwyg',
'tabs' => 'visual',
// 'toolbar' => 'basic',
'media_upload' => 0,
'instructions' => '',
'new_lines' => 'wpautop',
),
array(
'key' => 'field_5bbf9b47bb512',
'label' => 'image',
'name' => 'image',
'type' => 'image',
'instructions' => '',
'required' => 0,
'conditional_logic' => 0,
'wrapper' => array(
'width' => '',
'class' => '',
'id' => '',
),
'return_format' => 'id',
'preview_size' => 'thumbnail',
'library' => 'all',
'min_width' => '',
'min_height' => '',
'min_size' => '',
'max_width' => '',
'max_height' => '',
'max_size' => '',
'mime_types' => '',
),
array(
'key' => 'field_5bbf9b47bb512mobile',
'label' => 'mobile image',
'name' => 'mobile_image',
'type' => 'image',
'instructions' => '',
'required' => 0,
'conditional_logic' => 0,
'wrapper' => array(
'width' => '',
'class' => '',
'id' => '',
),
'return_format' => 'id',
'preview_size' => 'thumbnail',
'library' => 'all',
'min_width' => '',
'min_height' => '',
'min_size' => '',
'max_width' => '',
'max_height' => '',
'max_size' => '',
'mime_types' => '',
),
array(
'key' => 'image_or_icon',
'label' => 'Is this image an icon?',
'name' => 'image_not_icon',
'type' => 'true_false',
'instructions' => '',
'required' => 0,
'conditional_logic' => array(
array(
array(
'field' => 'field_5bbf9b47bb512',
'operator' => '!=empty',
),
),
),
'wrapper' => array(
'width' => '',
'class' => '',
'id' => '',
),
'message' => '',
'default_value' => 0,
'ui' => 1,
'ui_on_text' => '',
'ui_off_text' => '',
),
array(
'key' => 'image_or_thumbnail',
'label' => 'Is this image a thumbnail?',
'name' => 'image_not_thumbnail',
'type' => 'true_false',
'instructions' => '',
'required' => 0,
'conditional_logic' => array(
array(
array(
'field' => 'field_5bbf9b47bb512',
'operator' => '!=empty',
),
),
),
'wrapper' => array(
'width' => '',
'class' => '',
'id' => '',
),
'message' => '',
'default_value' => 0,
'ui' => 1,
'ui_on_text' => '',
'ui_off_text' => '',
),
),
),
array (
'key' => 'clickableCards_footnote',
'label' => __('Footnotes', 'ipsen-master'),
'name' => 'footnotes',
'instructions' => __('Any footnotes for these cards should go here.', 'ipsen-master'),
'type' => 'wysiwyg',
'tabs' => 'visual',
'media_upload' => 0,
),
),
'parent' => 'contentblocks_flex', //flex field key
'parent_layout' => '56ff5b1a77c76', // layout key
'row_min' => 0,
'row_limit' => '',
'layout' => 'row',
);
array_push($_SESSION["blocks"], $clickableCards);