<div class="resource-card resource-card--PDF">
<div class="resource-card__meta">
<div class="resource-card__card-type">
<div class="resource-card__resource-icon"><svg width="11" height="13" viewBox="0 0 11 13" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.03906 2.21094C8.42969 1.60156 7.42188 1.60156 6.8125 2.21094L2.3125 6.71094C1.30469 7.74219 1.30469 9.40625 2.3125 10.4141C3.34375 11.4453 5.00781 11.4453 6.03906 10.4141L9.60156 6.85156C9.8125 6.64062 10.1641 6.64062 10.375 6.85156C10.6094 7.08594 10.6094 7.4375 10.375 7.64844L6.8125 11.2109C5.35938 12.6875 2.99219 12.6875 1.53906 11.2109C0.0625 9.75781 0.0625 7.39062 1.53906 5.91406L6.03906 1.4375C7.07031 0.382812 8.78125 0.382812 9.8125 1.4375C10.8672 2.46875 10.8672 4.17969 9.8125 5.21094L5.52344 9.52344C4.77344 10.2734 3.55469 10.2031 2.89844 9.38281C2.33594 8.67969 2.40625 7.67188 3.03906 7.03906L6.60156 3.47656C6.8125 3.26562 7.16406 3.26562 7.375 3.47656C7.60938 3.71094 7.60938 4.0625 7.375 4.27344L3.83594 7.83594C3.60156 8.07031 3.57812 8.42188 3.78906 8.67969C4.02344 8.98438 4.44531 9.00781 4.72656 8.72656L9.03906 4.41406C9.64844 3.82812 9.64844 2.82031 9.03906 2.21094Z" fill="#3A3A3A" />
</svg>
</div>Resource
</div>
<div class="resource-card__file-type">PDF</div>
</div>
<div class="resource-card__content">
<div class="resource-card__content-left">
<h4 class="resource-card__title">
My first resource
</h4>
<div class="resource-card__description">
This guide is an easy-to-use tool to help your child prepare to enter kindergarten.
</div>
</div>
<div class="resource-card__content-right">
<div class="resource-card__image">
<a href="#" class="resource-card__image-link">
<figure class="image image--with-caption">
<picture class="image__picture">
<img class="image__image" loading="lazy" type="image/jpeg" src="holder.js/270x180" alt="">
</picture>
<figcaption class="image__caption">
Caption of image
</figcaption>
</figure>
</a>
</div>
</div>
</div>
<div class="resource-card__button">
<a href="#" class="cta-button cta-button--dark ">
<span class="cta-button__title">
Download the Get Ready for School Guide for Families (English) PDF<span class="cta-button__file-size"> (5.96 MB)</span>
</span>
<div class="cta-button__icon">
<svg width="13" height="16" viewBox="0 0 13 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="_mark" d="M12.5 4H8.5V0L12.5 4ZM8.5 5H12.5V14.5C12.5 15.3438 11.8125 16 11 16H2C1.15625 16 0.5 15.3438 0.5 14.5V1.5C0.5 0.6875 1.15625 0 2 0H7.5V4C7.5 4.5625 7.9375 5 8.5 5ZM8.46875 9.21875L7.25 10.4688V7.25C7.25 6.84375 6.90625 6.5 6.5 6.5C6.0625 6.5 5.75 6.84375 5.75 7.25V10.4688L4.5 9.21875C4.375 9.09375 4.1875 9 4 9C3.78125 9 3.59375 9.09375 3.46875 9.21875C3.15625 9.53125 3.15625 10 3.46875 10.2812L5.96875 12.7812C6.25 13.0938 6.71875 13.0938 7 12.7812L9.5 10.2812C9.8125 10 9.8125 9.53125 9.5 9.21875C9.21875 8.9375 8.75 8.9375 8.46875 9.21875Z" fill="#88C965" />
</svg>
</div>
</a>
</div>
</div>
<div class="resource-card resource-card--{{ card.type }}">
<div class="resource-card__meta">
<div class="resource-card__card-type">
<div class="resource-card__resource-icon">{% include 'bits/icons/paperclip.twig'%}</div>Resource
</div>
<div class="resource-card__file-type">{{ card.type }}</div>
</div>
<div class="resource-card__content">
{% if card.type != 'video' %}<div class="resource-card__content-left"> {% endif %}
<h4 class="resource-card__title">
{{ card.title }}
</h4>
<div class="resource-card__description">
{{ card.description }}
</div>
{% if card.type != 'video' %}</div> {% endif %}
{% if card.type == 'video' %}
{% include 'components/video-component/video-component.twig' with {
component: {
'video': {
'src' : card.video,
}
}
}%}
{% else %}
<div class="resource-card__content-right">
<div class="resource-card__image">
{% if card.image %}
<a href="{{ card.url }}" class="resource-card__image-link">
{% include 'partials/image/image.twig' with {
'image': card.image,
} %}
</a>
{% endif %}
</div>
</div>
{% endif %}
</div>
{% if card.type == 'url' %}
<div class="resource-card__button">
{% include 'bits/cta-button/cta-button.twig' with {
'linkText' : card.linkText,
'link' : card.url,
'icon' : 'external-link',
'background' : 'dark',
} %}
</div>
{% else %}
{% if card.type != 'video' %}
<div class="resource-card__button">
{% include 'bits/cta-button/cta-button.twig' with {
'linkText' : card.linkText,
'link' : card.url,
'icon' : 'file-link',
'background' : 'dark',
} %}
</div>
{% endif %}
{% endif %}
</div>
{
"site": {
"name": "E3 Alliance"
},
"card": {
"title": "My first resource",
"type": "PDF",
"file": {
"url": "#",
"filename": "Get-Ready-for-School-English.pdf",
"type": "PDF",
"size": "5.96 MB"
},
"url": "#",
"image": {
"src": "holder.js/270x180",
"altText": "placeholder",
"caption": "Caption of image"
},
"description": "This guide is an easy-to-use tool to help your child prepare to enter kindergarten.",
"linkText": "Download the Get Ready for School Guide for Families (English) PDF<span class=\"cta-button__file-size\"> (5.96 MB)</span>"
}
}
.resource-card
--flexDirection row
@extends $contentContainer
padding-top contentPaddingSmall
padding-bottom contentPaddingSmall
border-bottom 2px rgba(20, 81, 110, 0.10) solid
&--video
--flexDirection column
&__meta
&__file-type
&__card-type
display flex
align-items baseline
&__meta
flex-direction row
font-size 16px
&__card-type
font-weight 700
padding-right 16px
&__file-type
color #B0B0B0
text-transform capitalize
&__resource-icon
padding-right 6px
&__content
display flex
flex-direction column
justify-content space-between
padding-bottom 12px
+above(850px)
flex-direction var(--flexDirection)
padding-bottom 24px
&__content-left
display flex
flex-basis 100%
flex-direction column
justify-content stretch
+above(850px)
flex-grow 0
flex-basis 60%
&__content-right
display flex
flex-basis 100%
justify-content center
+above(850px)
flex-basis 30%
flex-grow 1
&__title
@extends $headline4
padding-top 8px
padding-bottom 8px
&__description
font-size 20px
font-weight 300
line-height 36px
padding-bottom contentPaddingSmall
&__image
padding-bottom 8px
No notes defined.