<div class="c-card c-card--press h-full w-full max-w-card md:max-w-none relative">
<div class="c-card-clip flex flex-col h-full">
<div class="bg-lilac p-8">
<img class="object-fit lazyload" data-src="/dist/images/local-wolves.jpg" alt="Snow covered leaves on a tree, with an owl">
</div>
<div class="p-8 bg-white flex flex-col items-center justify-between flex-1">
<h3 class="text-lg text-center text-black-50 mb-4">Name of Magazine or Blog post on two lines and on three lines</h3>
<a href="#0" data-modal-button="data-item" class="o-btn o-btn--sm o-btn--center"><span class="block">View</span></a>
</div>
</div>
<script type="application/json" id="data-item">
[{
"url": "/dist/images/local-wolves.jpg",
"alt": null
}, {
"url": "/dist/images/local-wolves.jpg",
"alt": null
}, {
"url": "/dist/images/local-wolves.jpg",
"alt": null
}]
</script>
</div>
<div class="c-card c-card--press h-full w-full max-w-card md:max-w-none relative">
<div class="c-card-clip flex flex-col h-full">
<div class="bg-{{ color }} p-8">
<img class="object-fit lazyload" data-src="{{ image.url }}" alt="Snow covered leaves on a tree, with an owl">
</div>
<div class="p-8 bg-white flex flex-col items-center justify-between flex-1">
<h3 class="text-lg text-center text-black-50 mb-4">{{ heading }}</h3>
{% set attr = 'data-modal-button="data-{{' ~ id ~ '}}"' %}
{# {% include '@button--center' with { text: 'View', attributes: attr, href: '#data-' ~ id } %} #}
<a href="#0" data-modal-button="data-{{ id }}" class="o-btn o-btn--sm o-btn--center"><span class="block">View</span></a>
</div>
</div>
<script type="application/json" id="data-{{ id }}">
{{ popup|json_encode|raw }}
</script>
</div>
{
"siteTitle": "Asta Valentaite",
"copyright": "© 2017 Asta Valentaite. All rights reserved.",
"craft": {
"app": {
"config": {
"general": {
"custom": {
"objects": "/02-objects/",
"global": "../03-global/",
"components": "/04-components/",
"pages": "/05-pages/",
"macros": "/macros/",
"wrapper": "/wrapper/"
}
}
}
}
},
"sitemenu": [
{
"title": "About",
"slug": "/components/preview/about"
},
{
"title": "Fashion",
"slug": "/components/preview/press"
},
{
"title": "Beauty",
"slug": "/components/preview/post"
},
{
"title": "Lifestyle",
"slug": "/components/preview/vertical"
},
{
"title": "Collaborations",
"slug": "/components/preview/collaborations"
},
{
"title": "Press",
"slug": "/components/preview/press"
}
],
"id": "item",
"heading": "Name of Magazine or Blog post on two lines and on three lines",
"image": {
"url": "/dist/images/local-wolves.jpg",
"alt": null
},
"popup": [
{
"url": "/dist/images/local-wolves.jpg",
"alt": null
},
{
"url": "/dist/images/local-wolves.jpg",
"alt": null
},
{
"url": "/dist/images/local-wolves.jpg",
"alt": null
}
],
"color": "lilac"
}
.c-card {
transition: box-shadow 300ms ease, clip-path 300ms ease;
&::after {
@apply .absolute .block .m-auto .pin;
box-shadow: 0 rem(40px) rem(50px) rgba(0, 0, 0, 0.05);
transition: box-shadow 300ms ease, transform 300ms ease;
z-index: -1;
transform-origin: 50%;
content: ' ';
@include mq($from: breakpoint('lg')) {
top: rem(10px);
bottom: rem(10px);
right: rem(10px);
left: rem(10px);
}
}
&:hover {
.c-card-clip {
clip-path: inset(0 0);
}
&::after {
@apply .shadow-card-on;
transform: scale(1);
}
}
}
.c-card--info {
width: rem(280px);
}
.c-card--info::after {
display: none;
}
.c-card-clip {
@include mq($from: breakpoint('lg')) {
transition: clip-path 300ms ease;
clip-path: inset(rem(10px) rem(10px));
}
}
.c-card--collab {
transition: box-shadow 300ms ease;
}
.c-card--info {
.o-icon {
@apply .absolute .pin-t;
left: 50%;
transform: translate3d(-50%, -50%, 0);
}
}
.c-card--collaboration {
.c-card__panel {
transform: translate3d(0, rem(60px), 0);
}
}
.c-card-list {
@include mq($from: breakpoint('md')) {
& > div {
&:nth-child(even) {
margin-right: 0;
}
}
}
@include mq($from: breakpoint('lg')) {
& > div {
&:nth-child(even) {
@apply .mr-su;
}
&:nth-child(3n) {
margin-right: 0;
}
}
}
}
// .c-carousel--latest {
// [data-carousel-item] {
// opacity: 0.5;
// transition: opacity 300ms ease;
// //pointer-events: none;
// &.is-selected {
// opacity: 1;
// // pointer-events: auto;
// }
// }
// }
.c-card--info {
&:hover {
.o-icon__bg {
transform: rotate(45deg) scale(1.15);
}
}
}
@include mq($from: breakpoint('lg')) {
.c-card--vertical {
img {
max-height: rem(250px);
}
}
}
.c-card--resp__inner {
min-height: rem(290px);
}
There are no notes for this item.