<div id="hero" class="c-hero c-hero--tags pt-8 lg:pt-15 lg:pb-15 bg-blush" data-behaviour="ShowTags">
<div class="wrapper relative z-10">
<div class="flex flex-col items-center justify-center w-10/12 m-auto py-16 lg:py-18">
<h1 class="text-xl lg:text-2xl leading-2xl text-white text-center font-thin -mt-4 mb-4" data-animate>
Lifestyle
</h1>
<button data-target="#tags" data-animate data-accordion-btn class="text-white text-sm font-light uppercase mb-3 opacity-50 tracking-wide">Filter by</button>
<div id="tags" class="hidden lg:block">
<ul class="list-reset flex flex-wrap justify-center items-center max-w-lg mx-auto">
<li class="mx-2 mb-2 opacity-80" data-animate>
<a href="" class="o-tag font-regular uppercase text-white text-sm border border-white px-4 h-tag inline-flex tracking-wide items-center hover:text-blush hover:bg-white"><span class="leading-none o-tag--text-adjust">Lifestyle</span></a>
</li>
<li class="mx-2 mb-2 opacity-80" data-animate>
<a href="" class="o-tag font-regular uppercase text-white text-sm border border-white px-4 h-tag inline-flex tracking-wide items-center hover:text-blush hover:bg-white"><span class="leading-none o-tag--text-adjust">Destinations</span></a>
</li>
<li class="mx-2 mb-2 opacity-80" data-animate>
<a href="" class="o-tag font-regular uppercase text-white text-sm border border-white px-4 h-tag inline-flex tracking-wide items-center hover:text-blush hover:bg-white"><span class="leading-none o-tag--text-adjust">Culture</span></a>
</li>
<li class="mx-2 mb-2 opacity-80" data-animate>
<a href="" class="o-tag font-regular uppercase text-white text-sm border border-white px-4 h-tag inline-flex tracking-wide items-center hover:text-blush hover:bg-white"><span class="leading-none o-tag--text-adjust">Food</span></a>
</li>
<li class="mx-2 mb-2 opacity-80" data-animate>
<a href="" class="o-tag font-regular uppercase text-white text-sm border border-white px-4 h-tag inline-flex tracking-wide items-center hover:text-blush hover:bg-white"><span class="leading-none o-tag--text-adjust">Fitness</span></a>
</li>
<li class="mx-2 mb-2 opacity-80" data-animate>
<a href="" class="o-tag font-regular uppercase text-white text-sm border border-white px-4 h-tag inline-flex tracking-wide items-center hover:text-blush hover:bg-white"><span class="leading-none o-tag--text-adjust">Wellbeing</span></a>
</li>
<li class="mx-2 mb-2 opacity-80" data-animate>
<a href="" class="o-tag font-regular uppercase text-white text-sm border border-white px-4 h-tag inline-flex tracking-wide items-center hover:text-blush hover:bg-white"><span class="leading-none o-tag--text-adjust">Asta Recommends</span></a>
</li>
<li class="mx-2 mb-2 opacity-80" data-animate>
<a href="" class="o-tag font-regular uppercase text-white text-sm border border-white px-4 h-tag inline-flex tracking-wide items-center hover:text-blush hover:bg-white"><span class="leading-none o-tag--text-adjust">Gifts</span></a>
</li>
<li class="mx-2 mb-2 opacity-80" data-animate>
<a href="" class="o-tag font-regular uppercase text-white text-sm border border-white px-4 h-tag inline-flex tracking-wide items-center hover:text-blush hover:bg-white"><span class="leading-none o-tag--text-adjust">Other</span></a>
</li>
<li class="mx-2 mb-2 opacity-80" data-animate>
<a href="" class="o-tag font-regular uppercase text-white text-sm border border-white px-4 h-tag inline-flex tracking-wide items-center hover:text-blush hover:bg-white"><span class="leading-none o-tag--text-adjust">Other</span></a>
</li>
<li class="mx-2 mb-2 opacity-80" data-animate>
<a href="" class="o-tag font-regular uppercase text-white text-sm border border-white px-4 h-tag inline-flex tracking-wide items-center hover:text-blush hover:bg-white"><span class="leading-none o-tag--text-adjust">Other</span></a>
</li>
<li class="mx-2 mb-2 opacity-80" data-animate>
<a href="" class="o-tag font-regular uppercase text-white text-sm border border-white px-4 h-tag inline-flex tracking-wide items-center hover:text-blush hover:bg-white"><span class="leading-none o-tag--text-adjust">Other</span></a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div id="hero" class="c-hero c-hero--tags pt-8 lg:pt-15 lg:pb-15 bg-blush" data-behaviour="ShowTags">
<div class="wrapper relative z-10">
<div class="flex flex-col items-center justify-center w-10/12 m-auto py-16 lg:py-18">
<h1 class="text-xl lg:text-2xl leading-2xl text-white text-center font-thin -mt-4 mb-4" data-animate>
{{ heading }}
</h1>
{% if tags|length %}
<button data-target="#tags" data-animate data-accordion-btn class="text-white text-sm font-light uppercase mb-3 opacity-50 tracking-wide">Filter by</button>
<div id="tags" class="hidden lg:block">
<ul class="list-reset flex flex-wrap justify-center items-center max-w-lg mx-auto">
{% for tag in tags %}
<li class="mx-2 mb-2 opacity-80" data-animate>
{% include '@tags--white' with { text: tag.text, url: tag.url } %}
</li>
{% endfor %}
</ul>
</div>
{% endif %}
</div>
</div>
</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"
}
],
"target": "#page",
"image": {
"url": "/dist/images/asta-valentaite-5885cab3a8aa3.jpg",
"alt": null,
"width": null,
"height": null
},
"heading": "Lifestyle",
"date": "18.02.208",
"tags": [
{
"text": "Lifestyle"
},
{
"text": "Destinations"
},
{
"text": "Culture"
},
{
"text": "Food"
},
{
"text": "Fitness"
},
{
"text": "Wellbeing"
},
{
"text": "Asta Recommends"
},
{
"text": "Gifts"
},
{
"text": "Other"
},
{
"text": "Other"
},
{
"text": "Other"
},
{
"text": "Other"
}
]
}
.c-hero__icon {
.o-icon {
transform: translate3d(0, 50%, 0);
}
}
.c-hero--home {
@include mq($from: breakpoint('lg')) {
margin-bottom: rem(200px);
}
}
.c-hero__img {
transform: translate3d(0, rem(60px), 0);
@include mq($from: breakpoint('lg')) {
transform: translate3d(0, rem(120px), 0);
}
}
.c-hero {
//aspect-ratio: '1:1';
@include mq($from: breakpoint('md')) {
&::before {
display: none;
}
& > div {
position: relative;
}
}
}
.c-hero__inner {
@include mq($from: breakpoint('md')) {
padding-top: rem(100px);
padding-bottom: rem(100px);
}
}
.c-hero--tags {
min-height: rem(300px);
[data-accordion-btn].is-active {
@apply .text-white;
}
}
[id='tags'] {
li {
opacity: 0;
transform: translate3d(0, rem(10px), 0);
transition: opacity 300ms 100ms ease, transform 300ms 100ms ease;
@include mq($from: breakpoint('lg')) {
opacity: 1;
transform: none;
}
}
&.is-expanded {
li {
opacity: 1;
transform: translate3d(0, 0, 0);
transition-delay: 0ms;
}
}
}
There are no notes for this item.