<a href="#modal-card-2069463479-" data-modal-open 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>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.
<div class="icon-card__button-wrapper">
<button class="cta cta--link">
<span class="cta__label">click me
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M14.54 7.63l-1.5 1.13.67 2.21H5.18v2h8.53l-.67 2.2 1.5 1.13 5.32-3.5v-1.67l-5.32-3.5z"/>
</svg>
</span>
</button>
</div>
<div id="modal-card-2069463479-" class="modal-hider">
content
</div>
</div>
</div>
</a>
.icon-card {
position: relative;
background-color: white;
display: flex;
flex-direction: column;
flex: 1;
min-width: 250px;
color: $black;
.heading {
@include themify($themes) {
color: themed('headingColor');
}
}
p {
color: $black;
}
.cta {
padding-left: 0;
}
// @include themify($themes) {
// border: 1px solid themed('borderColor');
// }
.content-cards--three-columns-on-desktop & {
flex-basis: 25%;
}
.content-cards--two-columns-on-desktop & {
flex-basis: 40%;
}
&__icon {
max-height: 100%;
}
.thumbnail-image {
height: 250px !important;
max-height: 250px !important;
-ms-flex-preferred-size: 250px;
flex-basis: 250px;
padding-bottom: 0 !important;
padding-top: 2.5rem !important;
}
&__thumbnail {
height: 220px;
width: auto;
}
&.MD {
flex: 1;
border-left: none;
border-right: none;
flex-direction: row;
flex-wrap: wrap;
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
display: flex !important;
}
.icon-card__image {
flex: 1;
height: auto;
min-width: 250px;
min-height: 200px;
// margin-top: -1px;
// margin-bottom: -1px;
padding-bottom: 1.5rem !important;
padding-top: 1.5rem !important;
.icon-card__thumbnail {
height: 180px !important;
}
.browser--edge & {
flex: auto;
}
}
.icon-card__content {
margin-bottom: 0;
flex: 1;
min-width: 250px;
display: flex;
@include poly-padding-y--large;
// @include themify($themes) {
// border-left: 1px solid themed('borderColor');
// border-right: 1px solid themed('borderColor');
// }
}
// .content-card__padder {
// @include poly-padding--large;
// @include poly-margin--small;
// }
}
&__image {
background-color: $white;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
height: 200px;
flex-basis: 200px;
flex: 1;
display: flex;
align-items: center;
justify-content: center;
padding: $base-spacing;
.browser--edge & {
flex: auto;
}
}
&__pre-heading {
margin-top: 2rem;
margin-bottom: 1rem;
display: block;
// @media (min-width: $medium-screen) {
// margin-top: 4.5rem;
// }
}
&__content {
margin-bottom: auto;
flex: 1;
width: 100%;
// @media (min-width: $medium-screen) {
// margin-top: 4.5rem;
// }
}
&__padder {
@include poly-padding;
display: block;
min-height: 100%;
position: relative;
// padding-bottom: 4rem !important;
display: flex;
flex-direction: column;
width: 100%;
.icon-card__button-wrapper {
margin-top: auto;
padding-top: 1.5rem;
margin-bottom: -.75rem;
}
}
}
/* icon-card */
var realshadow = require('realshadow-fork')
// if ( $('.icon-card').parents('.flickity-slider').length === 0 ) {
// document.addEventListener('DOMContentLoaded', function (event) {
// realshadow(document.getElementsByClassName('icon-card'), {
// type: 'default',
// color: '255,255,255',
// length: 5,
// opacity: 0.05
// })
// })
// }