<div class="resources-block">
<div class="resources-block__spacer">
<h2 class="resources-block__heading heading heading--medium">Resources block title example</h2>
<div class="resources-block__intro">
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus non.
</div>
<div class="resources-block__links">
<article class="pdf-download-link">
<div class="pdf-download-link__meta">
<h4 class="pdf-download-link__heading">Resource title</h4>
<span class="pdf-download-link__format">Format: pdf</span>
</div>
<a href="#" class="pdf-download-link__anchor">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<polygon
points="13.08 17.58 16.57 12.27 15.45 10.76 13.24 11.44 13.24 2.91 11.24 2.91 11.24 11.43 9.04 10.76 7.91 12.27 11.41 17.58 13.08 17.58"/>
<polygon points="20 14 20 21 4 21 4 14 2 14 2 22 3 23 21 23 22 22 22 14 20 14"/>
</svg>
</a>
</article>
<article class="pdf-download-link">
<div class="pdf-download-link__meta">
<h4 class="pdf-download-link__heading">This is a long title that should split over two lines</h4>
<span class="pdf-download-link__format">Format: pdf</span>
</div>
<a href="#" class="pdf-download-link__anchor">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<polygon
points="13.08 17.58 16.57 12.27 15.45 10.76 13.24 11.44 13.24 2.91 11.24 2.91 11.24 11.43 9.04 10.76 7.91 12.27 11.41 17.58 13.08 17.58"/>
<polygon points="20 14 20 21 4 21 4 14 2 14 2 22 3 23 21 23 22 22 22 14 20 14"/>
</svg>
</a>
</article>
<article class="pdf-download-link">
<div class="pdf-download-link__meta">
<h4 class="pdf-download-link__heading">Downloadable document</h4>
<span class="pdf-download-link__format">Format: pdf</span>
</div>
<a href="#" class="pdf-download-link__anchor">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<polygon
points="13.08 17.58 16.57 12.27 15.45 10.76 13.24 11.44 13.24 2.91 11.24 2.91 11.24 11.43 9.04 10.76 7.91 12.27 11.41 17.58 13.08 17.58"/>
<polygon points="20 14 20 21 4 21 4 14 2 14 2 22 3 23 21 23 22 22 22 14 20 14"/>
</svg>
</a>
</article>
<article class="pdf-download-link">
<div class="pdf-download-link__meta">
<h4 class="pdf-download-link__heading">Dosing information</h4>
<span class="pdf-download-link__format">Format: pdf</span>
</div>
<a href="#" class="pdf-download-link__anchor">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<polygon
points="13.08 17.58 16.57 12.27 15.45 10.76 13.24 11.44 13.24 2.91 11.24 2.91 11.24 11.43 9.04 10.76 7.91 12.27 11.41 17.58 13.08 17.58"/>
<polygon points="20 14 20 21 4 21 4 14 2 14 2 22 3 23 21 23 22 22 22 14 20 14"/>
</svg>
</a>
</article>
<article class="pdf-download-link">
<div class="pdf-download-link__meta">
<h4 class="pdf-download-link__heading">Prescribing information</h4>
<span class="pdf-download-link__format">Format: pdf</span>
</div>
<a href="#" class="pdf-download-link__anchor">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<polygon
points="13.08 17.58 16.57 12.27 15.45 10.76 13.24 11.44 13.24 2.91 11.24 2.91 11.24 11.43 9.04 10.76 7.91 12.27 11.41 17.58 13.08 17.58"/>
<polygon points="20 14 20 21 4 21 4 14 2 14 2 22 3 23 21 23 22 22 22 14 20 14"/>
</svg>
</a>
</article>
</div>
</div>
</div>
/* @resources-block */
.resources-block {
@include poly-padding-x--large;
position: relative;
&__intro {
@include content-wrap;
@include poly-padding-y--large;
}
&__spacer {
@include poly-padding-y--large;
width: 100%;
position: relative;
max-width: 1024px;
margin: 0 auto;
background-repeat: repeat-x;
background-size: 20%;
}
&__links {
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;
}
}
.pdf-download-link {
padding: $small-spacing 0;
padding-left: $base-spacing;
// border-bottom: 1px solid rgba(0, 0, 0, 0.1);
margin: $base-spacing;
box-shadow: 18px 19px 50px 0 rgba(0, 0, 0, 0.05);
// flex: 1;
width: 100%;
flex-grow: 0;
display: flex;
justify-content: space-between;
@media screen and (min-width: 768px) {
width: 42%;
}
@media screen and (min-width: 1024px) {
width: 45%;
}
&__meta {
padding: $small-spacing;
}
&__heading {
font-size: 16px;
font-weight: 900;
}
&__format {
font-size: 14px;
font-weight: 300;
letter-spacing: 1px;
}
&__anchor {
display: flex;
align-items: center;
justify-content: center;
padding: $base-spacing;
border-left: 1px solid rgba(0, 0, 0, 0.1);
svg {
width: 20px;
height: 20px;
@include themify($themes) {
fill: themed('ctaColor');
}
}
}
}
<?php
$resourcesBlock = array (
'key' => 'resources_block',
'label' => 'Resources',
'name' => 'resources-block',
'type' => 'repeater',
'sub_fields' => array (
array (
'key' => 'resources_block__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' => 'resources_block_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' => 'resources_block_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' => 'resources_block__Intro',
'label' => __('Introduction', 'ipsen-master'),
'name' => 'content',
// 'instructions' => __('This is optional', 'ipsen-master'),
'type' => 'wysiwyg',
'tabs' => 'visual',
// 'toolbar' => 'basic',
'media_upload' => 1,
),
array(
'key' => 'resources_block_links',
'label' => 'Resources',
'name' => 'links',
'layout' => 'block',
'type' => 'flexible_content',
'button_label' => 'Add Resource',
'layouts' => array (
array(
'key' => 'resources_block_link',
'label' => 'PDF',
'name' => 'resources-block-link',
'type' => 'repeater',
'sub_fields' => array (
array (
'key' => 'resources_block_link_title',
'label' => 'Title',
'name' => 'title',
'type' => 'text',
),
array (
'key' => 'resources_block_link_file',
'label' => 'File',
'name' => 'file',
'type' => 'file',
'return_format' => 'array',
'preview_size' => 'thumbnail',
'library' => 'all',
'min_size' => 0,
'max_size' => 0,
'mime_types' => '',
),
),
),
),
),
),
'row_min' => 0,
'row_limit' => '',
'layout' => 'row',
);
array_push($_SESSION["blocks"], $resourcesBlock);