<div class="content-cards has-lines content-cards--three-columns-on-desktop">
<div class="content-cards__spacer">
<h2 class="content-cards__heading heading heading--medium">Hello world</h2>
<div class="content-cards__inner">
<div data-observe-resizes class="content-card ">
<div class="content-card__image " style="background-image: url('/img/placeimg_1000_650_people.jpg')"></div>
<div class="content-card__content">
<div class="content-card__padder">
<h2 class="heading heading--small">Therapeutic</h2>
<p>Lorem ipsum dolor sit amecididunt ut labore. Lorem ipsum dolor, sit amet consectetur adipisicing?</p>
</div>
</div>
</div>
<div data-observe-resizes class="content-card ">
<div class="content-card__image " style="background-image: url('/img/placeimg_1000_650_people.jpg')"></div>
<div class="content-card__content">
<div class="content-card__padder">
<h2 class="heading heading--small">Therapeutic</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed tempor incididunt ut labore.</p>
</div>
</div>
</div>
<div data-observe-resizes class="content-card ">
<div class="content-card__image " style="background-image: url('/img/placeimg_1000_650_people.jpg')"></div>
<div class="content-card__content">
<div class="content-card__padder">
<h2 class="heading heading--small">Therapeutic</h2>
<p>Lorem ipsum dolor sit amecididunt ut labore. Lorem ipsum dolor, sit amet consectetur adipisicing?</p>
</div>
</div>
</div>
<div data-observe-resizes class="content-card ">
<div class="content-card__image " style="background-image: url('/img/placeimg_1000_650_people.jpg')"></div>
<div class="content-card__content">
<div class="content-card__padder">
<h2 class="heading heading--small">Therapeutic</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed tempor incididunt ut labore.</p>
</div>
</div>
</div>
<div data-observe-resizes class="content-card ">
<div class="content-card__image " style="background-image: url('/img/placeimg_1000_650_people.jpg')"></div>
<div class="content-card__content">
<div class="content-card__padder">
<h2 class="heading heading--small">Therapeutic</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis in cupiditate natus ipsam ullam sunt. Cupiditate reiciendis voluptates aut doloribus magnam quas maxime distinctio quam harum! Quia assumenda omnis voluptatibus.</p>
</div>
</div>
</div>
</div>
</div>
</div>
/* @content-cards */
.content-cards {
@include poly-padding-x--large;
position: relative;
.vertical-section-title {
position: absolute;
right: -3em;
top: 0;
}
&__heading {
// @include poly-margin-top--large;
}
&__intro {
@include content-wrap;
@include poly-padding-y--large;
p {
font-size: 14px;
}
}
&__spacer {
@include poly-padding-y--large;
width: 100%;
position: relative;
max-width: 1024px;
margin: 0 auto;
// background-color: silver;
// background-image:
// linear-gradient(
// to right,
// #cdecf4 1px,
// white 1px
// );
background-repeat: repeat-x;
background-size: 20%;
// border-right: 1px solid #cdecf4;
}
&__inner {
padding-top: 1rem;
box-sizing: border-box;
position: relative;
display: flex;
justify-content: space-between;
margin: -1em;
margin-right: calc(-1em - 1px);
flex-wrap: wrap;
}
&.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;
}
}
}
}
<?php
$contentCards = array (
'key' => 'field_56ff5b1a77c79',
'label' => 'Content Cards',
'name' => 'content-cards',
'type' => 'repeater',
'sub_fields' => array (
array (
'key' => 'contentCardsTab__introduction',
'label' => 'Intro',
'name' => 'contentCardsTab__introduction', // the 'name' value for each field has to match the variable in the Twig file.
'type' => 'accordion',
),
array (
'key' => 'contentCards__Title',
'label' => 'Section Title',
'name' => 'title', // the 'name' value for each field has to match the variable in the Twig file.
'type' => 'text',
'wrapper' => array(
'width' => '50%',
'class' => '',
'id' => '',
),
),
array (
'key' => 'contentCards_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_contentcards',
'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' => 'contentCards_center_title',
'label' => __('Center Title?', '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' => 'contentCards_Intro',
'label' => __('Introduction', 'ipsen-master'),
'name' => 'intro',
'instructions' => __('This is optional', 'ipsen-master'),
'type' => 'wysiwyg',
'tabs' => 'visual',
// 'toolbar' => 'basic',
'media_upload' => 0,
),
array (
'key' => 'contentCardsTab__cards',
'label' => 'Cards',
'name' => 'contentCardsTab__cards', // the 'name' value for each field has to match the variable in the Twig file.
'type' => 'accordion',
),
array(
'key' => 'contentCardsTab__display',
'label' => 'Display',
'name' => 'display',
'type' => 'radio',
'instructions' => '',
'required' => 0,
'conditional_logic' => 0,
'wrapper' => array(
'width' => '',
'class' => '',
'id' => '',
),
'choices' => array(
'default' => 'Default',
'two_columns' => 'Two Columns',
),
'allow_null' => 0,
'other_choice' => 0,
'default_value' => '',
'layout' => 'horizontal',
'return_format' => 'value',
'save_other_choice' => 0,
),
array(
'key' => 'contentCards__Cards',
'label' => 'Cards',
'name' => 'cards',
'layout' => 'block',
'type' => 'repeater',
'button_label' => 'Add Card',
'sub_fields' => array (
array (
'key' => 'contentCards_Image',
'label' => 'Card Image',
'name' => 'image',
'type' => 'image',
),
array (
'key' => 'contentCards_MobileImage',
'label' => 'Card Mobile Image',
'name' => 'mobile_image',
'type' => 'image',
),
array(
'key' => 'image_or_thumbnail',
'label' => 'Is this image a thumbnail?',
'name' => 'image_not_thumbnail',
'type' => 'true_false',
'wrapper' => array(
'width' => '',
'class' => '',
'id' => '',
),
'message' => '',
'default_value' => 0,
'ui' => 1,
'ui_on_text' => '',
'ui_off_text' => '',
),
array (
'key' => 'contentCards_Preheading',
'label' => 'Card Pre-Heading',
'name' => 'pre_heading',
'type' => 'text',
),
array (
'key' => 'contentCards_Card',
'label' => 'Card Title',
'name' => 'heading',
'type' => 'text',
),
array (
'key' => 'contentCards_Text',
'label' => 'Card Content',
'name' => 'text',
'type' => 'wysiwyg',
'tabs' => 'visual',
// 'toolbar' => 'basic',
'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"], $contentCards);
$messageBlock = array (
'key' => 'message_block',
'label' => 'Message',
'name' => 'message-block',
'type' => 'repeater',
'sub_fields' => array (
array (
'key' => 'message_block_image',
'label' => 'Image',
'name' => 'image',
'type' => 'image',
// 'return_type' => 'url'
),
array (
'key' => 'message_block_content',
'label' => __('Content', 'ipsen-master'),
'name' => 'content',
'type' => 'wysiwyg',
'tabs' => 'visual',
'toolbar' => 'basic',
'media_upload' => 0,
),
array (
'key' => 'message_block_citation',
'label' => __('Citation', 'ipsen-master'),
'instructions' => __('Who said this?', 'ipsen-master'),
'name' => 'citation',
'type' => 'text',
),
),
'row_min' => 0,
'row_limit' => '',
'layout' => 'row',
);
array_push($_SESSION["blocks"], $messageBlock);