<article class="card ">
<div class="card__content text">
<h1 class="card__title h3">
<a href="#" class="card__link"> Eva Maarend: Teised turud õpivad meie käest, kuidas edukalt Barley Bros jooki lansseerida
</a>
</h1>
<div class="text">
“Sakul õnnestus selle ainulaadse joogi turuletoomine üle ootuste hästi ja nüüd tegi Carlsberg meie kogemuse põhjal juhendi, mida teised turud lansseerimisel kasutama hakkavad,” ütleb Saku Õlletehase turundusjuht Eva Maarend. Intervjuus räägime turundamise väljakutsetest, keskkonnasõbralikust tootmisest ja alkoholi tarbimise suundadest.
</div>
</div>
<figure class="image image--fluid card__image">
<img loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20280%20155%22%3E%3C%2Fsvg%3E" data-srcset="//via.placeholder.com/280x155 280w, //via.placeholder.com/560x310 560w, //via.placeholder.com/840x465 840w, //via.placeholder.com/1120x620 1120w, //via.placeholder.com/1400x775 1400w, //via.placeholder.com/1680x930 1680w, //via.placeholder.com/1960x1085 1960w, //via.placeholder.com/2240x1240 2240w" data-sizes="auto" alt="" class="image__img lazyload">
</figure>
<div class="card__meta text-small">
<ul class="card__list">
<li class="card__list-item">
<a href="#" class="card__cat-link">Process</a>
</li>
<li class="card__list-item">
<a href="#" class="card__cat-link">UX</a>
</li>
</ul>
<time class="card__date" datetime="2020-01-22T00:00:00+00:00">22.01.2020</time>
</div>
</article>
{% set headingElement = headingElement|default('h1') %}
<article class="card {{ modifier }} {{ class }}">
<div class="card__content text">
<{{ headingElement }} class="card__title h3">
{% if data.link %}<a href="{{ data.link }}" class="card__link">{% endif %}
{{ data.title }}
{% if data.link %}</a>{% endif %}
</{{ headingElement }}>
<div class="text">
{{ data.description }}
</div>
</div>
{% if data.image %}
{% include '@image' with { data: data.image|srcset('280x155'), class: 'card__image', modifier: 'image--fluid' } %}
{% endif %}
{% if data.categories or data.date %}
<div class="card__meta text-small">
{% if data.categories|length > 0 %}
<ul class="card__list">
{% for item in data.categories.items %}
<li class="card__list-item">
{% if item.link %}
<a href="{{ item.link }}" class="card__cat-link">{{ item.title }}</a>
{% else %}
<span class="card__cat-text">{{ item.title }}</span>
{% endif %}
</li>
{% endfor %}
</ul>
{% endif %}
{% if data.date %}
<time class="card__date" {% if data.date.iso %}datetime="{{ data.date.iso }}"{% endif %}>{{ data.date.value }}</time>
{% endif %}
</div>
{% endif %}
</article>
{
"language": "en-US",
"data": {
"image": true,
"title": "Eva Maarend: Teised turud õpivad meie käest, kuidas edukalt Barley Bros jooki lansseerida",
"date": {
"value": "22.01.2020",
"iso": "2020-01-22T00:00:00+00:00"
},
"link": "#",
"categories": {
"items": [
{
"title": "Process",
"link": "#"
},
{
"title": "UX",
"link": "#"
}
]
},
"description": "“Sakul õnnestus selle ainulaadse joogi turuletoomine üle ootuste hästi ja nüüd tegi Carlsberg meie kogemuse põhjal juhendi, mida teised turud lansseerimisel kasutama hakkavad,” ütleb Saku Õlletehase turundusjuht Eva Maarend. Intervjuus räägime turundamise väljakutsetest, keskkonnasõbralikust tootmisest ja alkoholi tarbimise suundadest."
}
}
.card {
position: relative;
z-index: 0;
display: flex;
flex-direction: column;
}
.card__meta {
order: -1;
display: flex;
margin-bottom: 16px;
@include bp(md-min) {
margin-bottom: 24px;
}
}
.card__list {
position: relative;
z-index: 2;
display: inline-block;
margin: 0 -8px;
}
.card__list-item {
display: inline-block;
padding: 0 8px;
}
.card__date {
&:not(:first-child) {
margin-left: 16px;
}
}
.card__link {
color: $L-text-strong;
text-decoration: none;
&:hover {
color: $L-text-strong-hover;
}
&:after {
content: '';
display: block;
position: absolute;
z-index: 1;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
}
.card__cat-link {
text-decoration: none;
color: $L-text;
&:hover {
color: $L-text-hover;
}
}
.card__cat-text {
color: $L-text;
}
.card__image {
order: -1;
margin-bottom: 16px;
@include bp(md-min) {
margin-bottom: 24px;
}
.image__img {
width: 100%;
}
}
import './card.scss';
<article class="card ">
<div class="card__content text">
<h1 class="card__title h3">
<a href="#" class="card__link"> Eva Maarend: Teised turud õpivad meie käest, kuidas edukalt Barley Bros jooki lansseerida
</a>
</h1>
<div class="text">
“Sakul õnnestus selle ainulaadse joogi turuletoomine üle ootuste hästi ja nüüd tegi Carlsberg meie kogemuse põhjal juhendi, mida teised turud lansseerimisel kasutama hakkavad,” ütleb Saku Õlletehase turundusjuht Eva Maarend. Intervjuus räägime turundamise väljakutsetest, keskkonnasõbralikust tootmisest ja alkoholi tarbimise suundadest.
</div>
</div>
<div class="card__meta text-small">
<ul class="card__list">
<li class="card__list-item">
<a href="#" class="card__cat-link">Process</a>
</li>
<li class="card__list-item">
<a href="#" class="card__cat-link">UX</a>
</li>
</ul>
<time class="card__date" datetime="2020-01-22T00:00:00+00:00">22.01.2020</time>
</div>
</article>
{% set headingElement = headingElement|default('h1') %}
<article class="card {{ modifier }} {{ class }}">
<div class="card__content text">
<{{ headingElement }} class="card__title h3">
{% if data.link %}<a href="{{ data.link }}" class="card__link">{% endif %}
{{ data.title }}
{% if data.link %}</a>{% endif %}
</{{ headingElement }}>
<div class="text">
{{ data.description }}
</div>
</div>
{% if data.image %}
{% include '@image' with { data: data.image|srcset('280x155'), class: 'card__image', modifier: 'image--fluid' } %}
{% endif %}
{% if data.categories or data.date %}
<div class="card__meta text-small">
{% if data.categories|length > 0 %}
<ul class="card__list">
{% for item in data.categories.items %}
<li class="card__list-item">
{% if item.link %}
<a href="{{ item.link }}" class="card__cat-link">{{ item.title }}</a>
{% else %}
<span class="card__cat-text">{{ item.title }}</span>
{% endif %}
</li>
{% endfor %}
</ul>
{% endif %}
{% if data.date %}
<time class="card__date" {% if data.date.iso %}datetime="{{ data.date.iso }}"{% endif %}>{{ data.date.value }}</time>
{% endif %}
</div>
{% endif %}
</article>
{
"language": "en-US",
"data": {
"image": false,
"title": "Eva Maarend: Teised turud õpivad meie käest, kuidas edukalt Barley Bros jooki lansseerida",
"date": {
"value": "22.01.2020",
"iso": "2020-01-22T00:00:00+00:00"
},
"link": "#",
"categories": {
"items": [
{
"title": "Process",
"link": "#"
},
{
"title": "UX",
"link": "#"
}
]
},
"description": "“Sakul õnnestus selle ainulaadse joogi turuletoomine üle ootuste hästi ja nüüd tegi Carlsberg meie kogemuse põhjal juhendi, mida teised turud lansseerimisel kasutama hakkavad,” ütleb Saku Õlletehase turundusjuht Eva Maarend. Intervjuus räägime turundamise väljakutsetest, keskkonnasõbralikust tootmisest ja alkoholi tarbimise suundadest."
}
}
.card {
position: relative;
z-index: 0;
display: flex;
flex-direction: column;
}
.card__meta {
order: -1;
display: flex;
margin-bottom: 16px;
@include bp(md-min) {
margin-bottom: 24px;
}
}
.card__list {
position: relative;
z-index: 2;
display: inline-block;
margin: 0 -8px;
}
.card__list-item {
display: inline-block;
padding: 0 8px;
}
.card__date {
&:not(:first-child) {
margin-left: 16px;
}
}
.card__link {
color: $L-text-strong;
text-decoration: none;
&:hover {
color: $L-text-strong-hover;
}
&:after {
content: '';
display: block;
position: absolute;
z-index: 1;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
}
.card__cat-link {
text-decoration: none;
color: $L-text;
&:hover {
color: $L-text-hover;
}
}
.card__cat-text {
color: $L-text;
}
.card__image {
order: -1;
margin-bottom: 16px;
@include bp(md-min) {
margin-bottom: 24px;
}
.image__img {
width: 100%;
}
}
import './card.scss';
<article class="card ">
<div class="card__content text">
<h1 class="card__title h3">
<a href="#" class="card__link"> Eva Maarend: Teised turud õpivad meie käest, kuidas edukalt Barley Bros jooki lansseerida
</a>
</h1>
<div class="text">
“Sakul õnnestus selle ainulaadse joogi turuletoomine üle ootuste hästi ja nüüd tegi Carlsberg meie kogemuse põhjal juhendi, mida teised turud lansseerimisel kasutama hakkavad,” ütleb Saku Õlletehase turundusjuht Eva Maarend. Intervjuus räägime turundamise väljakutsetest, keskkonnasõbralikust tootmisest ja alkoholi tarbimise suundadest.
</div>
</div>
<figure class="image image--fluid card__image">
<img loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20280%20155%22%3E%3C%2Fsvg%3E" data-srcset="//via.placeholder.com/280x155 280w, //via.placeholder.com/560x310 560w, //via.placeholder.com/840x465 840w, //via.placeholder.com/1120x620 1120w, //via.placeholder.com/1400x775 1400w, //via.placeholder.com/1680x930 1680w, //via.placeholder.com/1960x1085 1960w, //via.placeholder.com/2240x1240 2240w" data-sizes="auto" alt="" class="image__img lazyload">
</figure>
<div class="card__meta text-small">
<ul class="card__list">
<li class="card__list-item">
<a href="#" class="card__cat-link">Process</a>
</li>
<li class="card__list-item">
<a href="#" class="card__cat-link">UX</a>
</li>
</ul>
</div>
</article>
{% set headingElement = headingElement|default('h1') %}
<article class="card {{ modifier }} {{ class }}">
<div class="card__content text">
<{{ headingElement }} class="card__title h3">
{% if data.link %}<a href="{{ data.link }}" class="card__link">{% endif %}
{{ data.title }}
{% if data.link %}</a>{% endif %}
</{{ headingElement }}>
<div class="text">
{{ data.description }}
</div>
</div>
{% if data.image %}
{% include '@image' with { data: data.image|srcset('280x155'), class: 'card__image', modifier: 'image--fluid' } %}
{% endif %}
{% if data.categories or data.date %}
<div class="card__meta text-small">
{% if data.categories|length > 0 %}
<ul class="card__list">
{% for item in data.categories.items %}
<li class="card__list-item">
{% if item.link %}
<a href="{{ item.link }}" class="card__cat-link">{{ item.title }}</a>
{% else %}
<span class="card__cat-text">{{ item.title }}</span>
{% endif %}
</li>
{% endfor %}
</ul>
{% endif %}
{% if data.date %}
<time class="card__date" {% if data.date.iso %}datetime="{{ data.date.iso }}"{% endif %}>{{ data.date.value }}</time>
{% endif %}
</div>
{% endif %}
</article>
{
"language": "en-US",
"data": {
"image": true,
"title": "Eva Maarend: Teised turud õpivad meie käest, kuidas edukalt Barley Bros jooki lansseerida",
"date": null,
"link": "#",
"categories": {
"items": [
{
"title": "Process",
"link": "#"
},
{
"title": "UX",
"link": "#"
}
]
},
"description": "“Sakul õnnestus selle ainulaadse joogi turuletoomine üle ootuste hästi ja nüüd tegi Carlsberg meie kogemuse põhjal juhendi, mida teised turud lansseerimisel kasutama hakkavad,” ütleb Saku Õlletehase turundusjuht Eva Maarend. Intervjuus räägime turundamise väljakutsetest, keskkonnasõbralikust tootmisest ja alkoholi tarbimise suundadest."
}
}
.card {
position: relative;
z-index: 0;
display: flex;
flex-direction: column;
}
.card__meta {
order: -1;
display: flex;
margin-bottom: 16px;
@include bp(md-min) {
margin-bottom: 24px;
}
}
.card__list {
position: relative;
z-index: 2;
display: inline-block;
margin: 0 -8px;
}
.card__list-item {
display: inline-block;
padding: 0 8px;
}
.card__date {
&:not(:first-child) {
margin-left: 16px;
}
}
.card__link {
color: $L-text-strong;
text-decoration: none;
&:hover {
color: $L-text-strong-hover;
}
&:after {
content: '';
display: block;
position: absolute;
z-index: 1;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
}
.card__cat-link {
text-decoration: none;
color: $L-text;
&:hover {
color: $L-text-hover;
}
}
.card__cat-text {
color: $L-text;
}
.card__image {
order: -1;
margin-bottom: 16px;
@include bp(md-min) {
margin-bottom: 24px;
}
.image__img {
width: 100%;
}
}
import './card.scss';
<article class="card ">
<div class="card__content text">
<h1 class="card__title h3">
<a href="#" class="card__link"> Eva Maarend: Teised turud õpivad meie käest, kuidas edukalt Barley Bros jooki lansseerida
</a>
</h1>
<div class="text">
“Sakul õnnestus selle ainulaadse joogi turuletoomine üle ootuste hästi ja nüüd tegi Carlsberg meie kogemuse põhjal juhendi, mida teised turud lansseerimisel kasutama hakkavad,” ütleb Saku Õlletehase turundusjuht Eva Maarend. Intervjuus räägime turundamise väljakutsetest, keskkonnasõbralikust tootmisest ja alkoholi tarbimise suundadest.
</div>
</div>
<figure class="image image--fluid card__image">
<img loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20280%20155%22%3E%3C%2Fsvg%3E" data-srcset="//via.placeholder.com/280x155 280w, //via.placeholder.com/560x310 560w, //via.placeholder.com/840x465 840w, //via.placeholder.com/1120x620 1120w, //via.placeholder.com/1400x775 1400w, //via.placeholder.com/1680x930 1680w, //via.placeholder.com/1960x1085 1960w, //via.placeholder.com/2240x1240 2240w" data-sizes="auto" alt="" class="image__img lazyload">
</figure>
<div class="card__meta text-small">
<time class="card__date" datetime="2020-01-22T00:00:00+00:00">22.01.2020</time>
</div>
</article>
{% set headingElement = headingElement|default('h1') %}
<article class="card {{ modifier }} {{ class }}">
<div class="card__content text">
<{{ headingElement }} class="card__title h3">
{% if data.link %}<a href="{{ data.link }}" class="card__link">{% endif %}
{{ data.title }}
{% if data.link %}</a>{% endif %}
</{{ headingElement }}>
<div class="text">
{{ data.description }}
</div>
</div>
{% if data.image %}
{% include '@image' with { data: data.image|srcset('280x155'), class: 'card__image', modifier: 'image--fluid' } %}
{% endif %}
{% if data.categories or data.date %}
<div class="card__meta text-small">
{% if data.categories|length > 0 %}
<ul class="card__list">
{% for item in data.categories.items %}
<li class="card__list-item">
{% if item.link %}
<a href="{{ item.link }}" class="card__cat-link">{{ item.title }}</a>
{% else %}
<span class="card__cat-text">{{ item.title }}</span>
{% endif %}
</li>
{% endfor %}
</ul>
{% endif %}
{% if data.date %}
<time class="card__date" {% if data.date.iso %}datetime="{{ data.date.iso }}"{% endif %}>{{ data.date.value }}</time>
{% endif %}
</div>
{% endif %}
</article>
{
"language": "en-US",
"data": {
"image": true,
"title": "Eva Maarend: Teised turud õpivad meie käest, kuidas edukalt Barley Bros jooki lansseerida",
"date": {
"value": "22.01.2020",
"iso": "2020-01-22T00:00:00+00:00"
},
"link": "#",
"categories": null,
"description": "“Sakul õnnestus selle ainulaadse joogi turuletoomine üle ootuste hästi ja nüüd tegi Carlsberg meie kogemuse põhjal juhendi, mida teised turud lansseerimisel kasutama hakkavad,” ütleb Saku Õlletehase turundusjuht Eva Maarend. Intervjuus räägime turundamise väljakutsetest, keskkonnasõbralikust tootmisest ja alkoholi tarbimise suundadest."
}
}
.card {
position: relative;
z-index: 0;
display: flex;
flex-direction: column;
}
.card__meta {
order: -1;
display: flex;
margin-bottom: 16px;
@include bp(md-min) {
margin-bottom: 24px;
}
}
.card__list {
position: relative;
z-index: 2;
display: inline-block;
margin: 0 -8px;
}
.card__list-item {
display: inline-block;
padding: 0 8px;
}
.card__date {
&:not(:first-child) {
margin-left: 16px;
}
}
.card__link {
color: $L-text-strong;
text-decoration: none;
&:hover {
color: $L-text-strong-hover;
}
&:after {
content: '';
display: block;
position: absolute;
z-index: 1;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
}
.card__cat-link {
text-decoration: none;
color: $L-text;
&:hover {
color: $L-text-hover;
}
}
.card__cat-text {
color: $L-text;
}
.card__image {
order: -1;
margin-bottom: 16px;
@include bp(md-min) {
margin-bottom: 24px;
}
.image__img {
width: 100%;
}
}
import './card.scss';
<article class="card ">
<div class="card__content text">
<h1 class="card__title h3">
<a href="#" class="card__link"> Eva Maarend: Teised turud õpivad meie käest, kuidas edukalt Barley Bros jooki lansseerida
</a>
</h1>
<div class="text">
“Sakul õnnestus selle ainulaadse joogi turuletoomine üle ootuste hästi ja nüüd tegi Carlsberg meie kogemuse põhjal juhendi, mida teised turud lansseerimisel kasutama hakkavad,” ütleb Saku Õlletehase turundusjuht Eva Maarend. Intervjuus räägime turundamise väljakutsetest, keskkonnasõbralikust tootmisest ja alkoholi tarbimise suundadest.
</div>
</div>
<figure class="image image--fluid card__image">
<img loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20280%20155%22%3E%3C%2Fsvg%3E" data-srcset="//via.placeholder.com/280x155 280w, //via.placeholder.com/560x310 560w, //via.placeholder.com/840x465 840w, //via.placeholder.com/1120x620 1120w, //via.placeholder.com/1400x775 1400w, //via.placeholder.com/1680x930 1680w, //via.placeholder.com/1960x1085 1960w, //via.placeholder.com/2240x1240 2240w" data-sizes="auto" alt="" class="image__img lazyload">
</figure>
</article>
{% set headingElement = headingElement|default('h1') %}
<article class="card {{ modifier }} {{ class }}">
<div class="card__content text">
<{{ headingElement }} class="card__title h3">
{% if data.link %}<a href="{{ data.link }}" class="card__link">{% endif %}
{{ data.title }}
{% if data.link %}</a>{% endif %}
</{{ headingElement }}>
<div class="text">
{{ data.description }}
</div>
</div>
{% if data.image %}
{% include '@image' with { data: data.image|srcset('280x155'), class: 'card__image', modifier: 'image--fluid' } %}
{% endif %}
{% if data.categories or data.date %}
<div class="card__meta text-small">
{% if data.categories|length > 0 %}
<ul class="card__list">
{% for item in data.categories.items %}
<li class="card__list-item">
{% if item.link %}
<a href="{{ item.link }}" class="card__cat-link">{{ item.title }}</a>
{% else %}
<span class="card__cat-text">{{ item.title }}</span>
{% endif %}
</li>
{% endfor %}
</ul>
{% endif %}
{% if data.date %}
<time class="card__date" {% if data.date.iso %}datetime="{{ data.date.iso }}"{% endif %}>{{ data.date.value }}</time>
{% endif %}
</div>
{% endif %}
</article>
{
"language": "en-US",
"data": {
"image": true,
"title": "Eva Maarend: Teised turud õpivad meie käest, kuidas edukalt Barley Bros jooki lansseerida",
"date": null,
"link": "#",
"categories": null,
"description": "“Sakul õnnestus selle ainulaadse joogi turuletoomine üle ootuste hästi ja nüüd tegi Carlsberg meie kogemuse põhjal juhendi, mida teised turud lansseerimisel kasutama hakkavad,” ütleb Saku Õlletehase turundusjuht Eva Maarend. Intervjuus räägime turundamise väljakutsetest, keskkonnasõbralikust tootmisest ja alkoholi tarbimise suundadest."
}
}
.card {
position: relative;
z-index: 0;
display: flex;
flex-direction: column;
}
.card__meta {
order: -1;
display: flex;
margin-bottom: 16px;
@include bp(md-min) {
margin-bottom: 24px;
}
}
.card__list {
position: relative;
z-index: 2;
display: inline-block;
margin: 0 -8px;
}
.card__list-item {
display: inline-block;
padding: 0 8px;
}
.card__date {
&:not(:first-child) {
margin-left: 16px;
}
}
.card__link {
color: $L-text-strong;
text-decoration: none;
&:hover {
color: $L-text-strong-hover;
}
&:after {
content: '';
display: block;
position: absolute;
z-index: 1;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
}
.card__cat-link {
text-decoration: none;
color: $L-text;
&:hover {
color: $L-text-hover;
}
}
.card__cat-text {
color: $L-text;
}
.card__image {
order: -1;
margin-bottom: 16px;
@include bp(md-min) {
margin-bottom: 24px;
}
.image__img {
width: 100%;
}
}
import './card.scss';
<article class="card ">
<div class="card__content text">
<h1 class="card__title h3">
<a href="#" class="card__link"> Eva Maarend: Teised turud õpivad meie käest, kuidas edukalt Barley Bros jooki lansseerida
</a>
</h1>
<div class="text">
“Sakul õnnestus selle ainulaadse joogi turuletoomine üle ootuste hästi ja nüüd tegi Carlsberg meie kogemuse põhjal juhendi, mida teised turud lansseerimisel kasutama hakkavad,” ütleb Saku Õlletehase turundusjuht Eva Maarend. Intervjuus räägime turundamise väljakutsetest, keskkonnasõbralikust tootmisest ja alkoholi tarbimise suundadest.
</div>
</div>
<div class="card__meta text-small">
<ul class="card__list">
<li class="card__list-item">
<a href="#" class="card__cat-link">Process</a>
</li>
</ul>
</div>
</article>
{% set headingElement = headingElement|default('h1') %}
<article class="card {{ modifier }} {{ class }}">
<div class="card__content text">
<{{ headingElement }} class="card__title h3">
{% if data.link %}<a href="{{ data.link }}" class="card__link">{% endif %}
{{ data.title }}
{% if data.link %}</a>{% endif %}
</{{ headingElement }}>
<div class="text">
{{ data.description }}
</div>
</div>
{% if data.image %}
{% include '@image' with { data: data.image|srcset('280x155'), class: 'card__image', modifier: 'image--fluid' } %}
{% endif %}
{% if data.categories or data.date %}
<div class="card__meta text-small">
{% if data.categories|length > 0 %}
<ul class="card__list">
{% for item in data.categories.items %}
<li class="card__list-item">
{% if item.link %}
<a href="{{ item.link }}" class="card__cat-link">{{ item.title }}</a>
{% else %}
<span class="card__cat-text">{{ item.title }}</span>
{% endif %}
</li>
{% endfor %}
</ul>
{% endif %}
{% if data.date %}
<time class="card__date" {% if data.date.iso %}datetime="{{ data.date.iso }}"{% endif %}>{{ data.date.value }}</time>
{% endif %}
</div>
{% endif %}
</article>
{
"language": "en-US",
"data": {
"image": false,
"title": "Eva Maarend: Teised turud õpivad meie käest, kuidas edukalt Barley Bros jooki lansseerida",
"date": null,
"link": "#",
"categories": {
"items": [
{
"title": "Process",
"link": "#"
}
]
},
"description": "“Sakul õnnestus selle ainulaadse joogi turuletoomine üle ootuste hästi ja nüüd tegi Carlsberg meie kogemuse põhjal juhendi, mida teised turud lansseerimisel kasutama hakkavad,” ütleb Saku Õlletehase turundusjuht Eva Maarend. Intervjuus räägime turundamise väljakutsetest, keskkonnasõbralikust tootmisest ja alkoholi tarbimise suundadest."
}
}
.card {
position: relative;
z-index: 0;
display: flex;
flex-direction: column;
}
.card__meta {
order: -1;
display: flex;
margin-bottom: 16px;
@include bp(md-min) {
margin-bottom: 24px;
}
}
.card__list {
position: relative;
z-index: 2;
display: inline-block;
margin: 0 -8px;
}
.card__list-item {
display: inline-block;
padding: 0 8px;
}
.card__date {
&:not(:first-child) {
margin-left: 16px;
}
}
.card__link {
color: $L-text-strong;
text-decoration: none;
&:hover {
color: $L-text-strong-hover;
}
&:after {
content: '';
display: block;
position: absolute;
z-index: 1;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
}
.card__cat-link {
text-decoration: none;
color: $L-text;
&:hover {
color: $L-text-hover;
}
}
.card__cat-text {
color: $L-text;
}
.card__image {
order: -1;
margin-bottom: 16px;
@include bp(md-min) {
margin-bottom: 24px;
}
.image__img {
width: 100%;
}
}
import './card.scss';
<article class="card ">
<div class="card__content text">
<h1 class="card__title h3">
<a href="#" class="card__link"> Kasutatud Mazda CX-3: kasutusomadustes mõned puudused, aga töökindluses absoluutne tipp
</a>
</h1>
<div class="text">
Automaailma kapitaalselt muutnud linnadžiipide buumiga olid sunnitud kaasa minema kõik. Mazda jäi mudelivaliku muutmisega üsna hilja peale, CX-5 kõrvale toodi väiksem CX-3 alles siis, kui mõnel rivaalil oli pisimaastureid juba terve rivi.
</div>
</div>
<figure class="image image--fluid card__image">
<img loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20280%20155%22%3E%3C%2Fsvg%3E" data-srcset="//via.placeholder.com/280x155 280w, //via.placeholder.com/560x310 560w, //via.placeholder.com/840x465 840w, //via.placeholder.com/1120x620 1120w, //via.placeholder.com/1400x775 1400w, //via.placeholder.com/1680x930 1680w, //via.placeholder.com/1960x1085 1960w, //via.placeholder.com/2240x1240 2240w" data-sizes="auto" alt="" class="image__img lazyload">
</figure>
<div class="card__meta text-small">
<ul class="card__list">
<li class="card__list-item">
<a href="#" class="card__cat-link">Process</a>
</li>
<li class="card__list-item">
<a href="#" class="card__cat-link">UX</a>
</li>
</ul>
<time class="card__date" datetime="2020-01-22T00:00:00+00:00">22.01.2020</time>
</div>
</article>
{% set headingElement = headingElement|default('h1') %}
<article class="card {{ modifier }} {{ class }}">
<div class="card__content text">
<{{ headingElement }} class="card__title h3">
{% if data.link %}<a href="{{ data.link }}" class="card__link">{% endif %}
{{ data.title }}
{% if data.link %}</a>{% endif %}
</{{ headingElement }}>
<div class="text">
{{ data.description }}
</div>
</div>
{% if data.image %}
{% include '@image' with { data: data.image|srcset('280x155'), class: 'card__image', modifier: 'image--fluid' } %}
{% endif %}
{% if data.categories or data.date %}
<div class="card__meta text-small">
{% if data.categories|length > 0 %}
<ul class="card__list">
{% for item in data.categories.items %}
<li class="card__list-item">
{% if item.link %}
<a href="{{ item.link }}" class="card__cat-link">{{ item.title }}</a>
{% else %}
<span class="card__cat-text">{{ item.title }}</span>
{% endif %}
</li>
{% endfor %}
</ul>
{% endif %}
{% if data.date %}
<time class="card__date" {% if data.date.iso %}datetime="{{ data.date.iso }}"{% endif %}>{{ data.date.value }}</time>
{% endif %}
</div>
{% endif %}
</article>
{
"language": "en-US",
"data": {
"image": true,
"title": "Kasutatud Mazda CX-3: kasutusomadustes mõned puudused, aga töökindluses absoluutne tipp",
"date": {
"value": "22.01.2020",
"iso": "2020-01-22T00:00:00+00:00"
},
"link": "#",
"categories": {
"items": [
{
"title": "Process",
"link": "#"
},
{
"title": "UX",
"link": "#"
}
]
},
"description": "Automaailma kapitaalselt muutnud linnadžiipide buumiga olid sunnitud kaasa minema kõik. Mazda jäi mudelivaliku muutmisega üsna hilja peale, CX-5 kõrvale toodi väiksem CX-3 alles siis, kui mõnel rivaalil oli pisimaastureid juba terve rivi."
}
}
.card {
position: relative;
z-index: 0;
display: flex;
flex-direction: column;
}
.card__meta {
order: -1;
display: flex;
margin-bottom: 16px;
@include bp(md-min) {
margin-bottom: 24px;
}
}
.card__list {
position: relative;
z-index: 2;
display: inline-block;
margin: 0 -8px;
}
.card__list-item {
display: inline-block;
padding: 0 8px;
}
.card__date {
&:not(:first-child) {
margin-left: 16px;
}
}
.card__link {
color: $L-text-strong;
text-decoration: none;
&:hover {
color: $L-text-strong-hover;
}
&:after {
content: '';
display: block;
position: absolute;
z-index: 1;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
}
.card__cat-link {
text-decoration: none;
color: $L-text;
&:hover {
color: $L-text-hover;
}
}
.card__cat-text {
color: $L-text;
}
.card__image {
order: -1;
margin-bottom: 16px;
@include bp(md-min) {
margin-bottom: 24px;
}
.image__img {
width: 100%;
}
}
import './card.scss';
<article class="card ">
<div class="card__content text">
<h1 class="card__title h3">
<a href="#" class="card__link"> Polestar 3 on Rootsi elektriautode brändi esimene linnamaastur
</a>
</h1>
<div class="text">
Kui esimesed kaks Polestari mudelit said alguse kunagistest Volvo kontseptautodest, siis autotootja järjekorras kolmas mudel on esimene auto, mis algusest peale disainitud täielikult Polestari käe all.
</div>
</div>
<figure class="image image--fluid card__image">
<img loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20280%20155%22%3E%3C%2Fsvg%3E" data-srcset="//via.placeholder.com/280x155 280w, //via.placeholder.com/560x310 560w, //via.placeholder.com/840x465 840w, //via.placeholder.com/1120x620 1120w, //via.placeholder.com/1400x775 1400w, //via.placeholder.com/1680x930 1680w, //via.placeholder.com/1960x1085 1960w, //via.placeholder.com/2240x1240 2240w" data-sizes="auto" alt="" class="image__img lazyload">
</figure>
<div class="card__meta text-small">
<ul class="card__list">
<li class="card__list-item">
<a href="#" class="card__cat-link">Process</a>
</li>
<li class="card__list-item">
<a href="#" class="card__cat-link">UX</a>
</li>
</ul>
<time class="card__date" datetime="2020-01-22T00:00:00+00:00">22.01.2020</time>
</div>
</article>
{% set headingElement = headingElement|default('h1') %}
<article class="card {{ modifier }} {{ class }}">
<div class="card__content text">
<{{ headingElement }} class="card__title h3">
{% if data.link %}<a href="{{ data.link }}" class="card__link">{% endif %}
{{ data.title }}
{% if data.link %}</a>{% endif %}
</{{ headingElement }}>
<div class="text">
{{ data.description }}
</div>
</div>
{% if data.image %}
{% include '@image' with { data: data.image|srcset('280x155'), class: 'card__image', modifier: 'image--fluid' } %}
{% endif %}
{% if data.categories or data.date %}
<div class="card__meta text-small">
{% if data.categories|length > 0 %}
<ul class="card__list">
{% for item in data.categories.items %}
<li class="card__list-item">
{% if item.link %}
<a href="{{ item.link }}" class="card__cat-link">{{ item.title }}</a>
{% else %}
<span class="card__cat-text">{{ item.title }}</span>
{% endif %}
</li>
{% endfor %}
</ul>
{% endif %}
{% if data.date %}
<time class="card__date" {% if data.date.iso %}datetime="{{ data.date.iso }}"{% endif %}>{{ data.date.value }}</time>
{% endif %}
</div>
{% endif %}
</article>
{
"language": "en-US",
"data": {
"image": true,
"title": "Polestar 3 on Rootsi elektriautode brändi esimene linnamaastur",
"date": {
"value": "22.01.2020",
"iso": "2020-01-22T00:00:00+00:00"
},
"link": "#",
"categories": {
"items": [
{
"title": "Process",
"link": "#"
},
{
"title": "UX",
"link": "#"
}
]
},
"description": "Kui esimesed kaks Polestari mudelit said alguse kunagistest Volvo kontseptautodest, siis autotootja järjekorras kolmas mudel on esimene auto, mis algusest peale disainitud täielikult Polestari käe all."
}
}
.card {
position: relative;
z-index: 0;
display: flex;
flex-direction: column;
}
.card__meta {
order: -1;
display: flex;
margin-bottom: 16px;
@include bp(md-min) {
margin-bottom: 24px;
}
}
.card__list {
position: relative;
z-index: 2;
display: inline-block;
margin: 0 -8px;
}
.card__list-item {
display: inline-block;
padding: 0 8px;
}
.card__date {
&:not(:first-child) {
margin-left: 16px;
}
}
.card__link {
color: $L-text-strong;
text-decoration: none;
&:hover {
color: $L-text-strong-hover;
}
&:after {
content: '';
display: block;
position: absolute;
z-index: 1;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
}
.card__cat-link {
text-decoration: none;
color: $L-text;
&:hover {
color: $L-text-hover;
}
}
.card__cat-text {
color: $L-text;
}
.card__image {
order: -1;
margin-bottom: 16px;
@include bp(md-min) {
margin-bottom: 24px;
}
.image__img {
width: 100%;
}
}
import './card.scss';
<article class="card ">
<div class="card__content text">
<h1 class="card__title h3">
<a href="#" class="card__link"> Proovisõit: Opel Grandlandil on uus nägu ja mõned üllatused
</a>
</h1>
<div class="text">
Opel Grandland muutus mudelivärskendusega ilusamaks ning sai uut varustust. Auto iseloomu see ei muuda, kuid paar üllatust pakub küll.
</div>
</div>
<figure class="image image--fluid card__image">
<img loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20280%20155%22%3E%3C%2Fsvg%3E" data-srcset="//via.placeholder.com/280x155 280w, //via.placeholder.com/560x310 560w, //via.placeholder.com/840x465 840w, //via.placeholder.com/1120x620 1120w, //via.placeholder.com/1400x775 1400w, //via.placeholder.com/1680x930 1680w, //via.placeholder.com/1960x1085 1960w, //via.placeholder.com/2240x1240 2240w" data-sizes="auto" alt="" class="image__img lazyload">
</figure>
<div class="card__meta text-small">
<ul class="card__list">
<li class="card__list-item">
<a href="#" class="card__cat-link">Process</a>
</li>
<li class="card__list-item">
<a href="#" class="card__cat-link">UX</a>
</li>
</ul>
<time class="card__date" datetime="2020-01-22T00:00:00+00:00">22.01.2020</time>
</div>
</article>
{% set headingElement = headingElement|default('h1') %}
<article class="card {{ modifier }} {{ class }}">
<div class="card__content text">
<{{ headingElement }} class="card__title h3">
{% if data.link %}<a href="{{ data.link }}" class="card__link">{% endif %}
{{ data.title }}
{% if data.link %}</a>{% endif %}
</{{ headingElement }}>
<div class="text">
{{ data.description }}
</div>
</div>
{% if data.image %}
{% include '@image' with { data: data.image|srcset('280x155'), class: 'card__image', modifier: 'image--fluid' } %}
{% endif %}
{% if data.categories or data.date %}
<div class="card__meta text-small">
{% if data.categories|length > 0 %}
<ul class="card__list">
{% for item in data.categories.items %}
<li class="card__list-item">
{% if item.link %}
<a href="{{ item.link }}" class="card__cat-link">{{ item.title }}</a>
{% else %}
<span class="card__cat-text">{{ item.title }}</span>
{% endif %}
</li>
{% endfor %}
</ul>
{% endif %}
{% if data.date %}
<time class="card__date" {% if data.date.iso %}datetime="{{ data.date.iso }}"{% endif %}>{{ data.date.value }}</time>
{% endif %}
</div>
{% endif %}
</article>
{
"language": "en-US",
"data": {
"image": true,
"title": "Proovisõit: Opel Grandlandil on uus nägu ja mõned üllatused",
"date": {
"value": "22.01.2020",
"iso": "2020-01-22T00:00:00+00:00"
},
"link": "#",
"categories": {
"items": [
{
"title": "Process",
"link": "#"
},
{
"title": "UX",
"link": "#"
}
]
},
"description": "Opel Grandland muutus mudelivärskendusega ilusamaks ning sai uut varustust. Auto iseloomu see ei muuda, kuid paar üllatust pakub küll."
}
}
.card {
position: relative;
z-index: 0;
display: flex;
flex-direction: column;
}
.card__meta {
order: -1;
display: flex;
margin-bottom: 16px;
@include bp(md-min) {
margin-bottom: 24px;
}
}
.card__list {
position: relative;
z-index: 2;
display: inline-block;
margin: 0 -8px;
}
.card__list-item {
display: inline-block;
padding: 0 8px;
}
.card__date {
&:not(:first-child) {
margin-left: 16px;
}
}
.card__link {
color: $L-text-strong;
text-decoration: none;
&:hover {
color: $L-text-strong-hover;
}
&:after {
content: '';
display: block;
position: absolute;
z-index: 1;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
}
.card__cat-link {
text-decoration: none;
color: $L-text;
&:hover {
color: $L-text-hover;
}
}
.card__cat-text {
color: $L-text;
}
.card__image {
order: -1;
margin-bottom: 16px;
@include bp(md-min) {
margin-bottom: 24px;
}
.image__img {
width: 100%;
}
}
import './card.scss';
<article class="card ">
<div class="card__content text">
<h1 class="card__title h3">
<a href="#" class="card__link"> Kas autole mõjub halvasti, kui õli on mootoris liiga palju?
</a>
</h1>
<div class="text">
Iga sisepõlemismootor vajab selle komponentide määrimiseks õli. Ja on selgemast selge, et kui õlitase on liiga madal, hakkab õlinappus mootorit kurnama ning hästi see asi ilmselt ei lõpe. Aga mis võib juhtuda siis, kui õli satub mootorisse liiga palju?
</div>
</div>
<figure class="image image--fluid card__image">
<img loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20280%20155%22%3E%3C%2Fsvg%3E" data-srcset="//via.placeholder.com/280x155 280w, //via.placeholder.com/560x310 560w, //via.placeholder.com/840x465 840w, //via.placeholder.com/1120x620 1120w, //via.placeholder.com/1400x775 1400w, //via.placeholder.com/1680x930 1680w, //via.placeholder.com/1960x1085 1960w, //via.placeholder.com/2240x1240 2240w" data-sizes="auto" alt="" class="image__img lazyload">
</figure>
<div class="card__meta text-small">
<ul class="card__list">
<li class="card__list-item">
<a href="#" class="card__cat-link">Process</a>
</li>
<li class="card__list-item">
<a href="#" class="card__cat-link">UX</a>
</li>
</ul>
<time class="card__date" datetime="2020-01-22T00:00:00+00:00">22.01.2020</time>
</div>
</article>
{% set headingElement = headingElement|default('h1') %}
<article class="card {{ modifier }} {{ class }}">
<div class="card__content text">
<{{ headingElement }} class="card__title h3">
{% if data.link %}<a href="{{ data.link }}" class="card__link">{% endif %}
{{ data.title }}
{% if data.link %}</a>{% endif %}
</{{ headingElement }}>
<div class="text">
{{ data.description }}
</div>
</div>
{% if data.image %}
{% include '@image' with { data: data.image|srcset('280x155'), class: 'card__image', modifier: 'image--fluid' } %}
{% endif %}
{% if data.categories or data.date %}
<div class="card__meta text-small">
{% if data.categories|length > 0 %}
<ul class="card__list">
{% for item in data.categories.items %}
<li class="card__list-item">
{% if item.link %}
<a href="{{ item.link }}" class="card__cat-link">{{ item.title }}</a>
{% else %}
<span class="card__cat-text">{{ item.title }}</span>
{% endif %}
</li>
{% endfor %}
</ul>
{% endif %}
{% if data.date %}
<time class="card__date" {% if data.date.iso %}datetime="{{ data.date.iso }}"{% endif %}>{{ data.date.value }}</time>
{% endif %}
</div>
{% endif %}
</article>
{
"language": "en-US",
"data": {
"image": true,
"title": "Kas autole mõjub halvasti, kui õli on mootoris liiga palju?",
"date": {
"value": "22.01.2020",
"iso": "2020-01-22T00:00:00+00:00"
},
"link": "#",
"categories": {
"items": [
{
"title": "Process",
"link": "#"
},
{
"title": "UX",
"link": "#"
}
]
},
"description": "Iga sisepõlemismootor vajab selle komponentide määrimiseks õli. Ja on selgemast selge, et kui õlitase on liiga madal, hakkab õlinappus mootorit kurnama ning hästi see asi ilmselt ei lõpe. Aga mis võib juhtuda siis, kui õli satub mootorisse liiga palju?"
}
}
.card {
position: relative;
z-index: 0;
display: flex;
flex-direction: column;
}
.card__meta {
order: -1;
display: flex;
margin-bottom: 16px;
@include bp(md-min) {
margin-bottom: 24px;
}
}
.card__list {
position: relative;
z-index: 2;
display: inline-block;
margin: 0 -8px;
}
.card__list-item {
display: inline-block;
padding: 0 8px;
}
.card__date {
&:not(:first-child) {
margin-left: 16px;
}
}
.card__link {
color: $L-text-strong;
text-decoration: none;
&:hover {
color: $L-text-strong-hover;
}
&:after {
content: '';
display: block;
position: absolute;
z-index: 1;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
}
.card__cat-link {
text-decoration: none;
color: $L-text;
&:hover {
color: $L-text-hover;
}
}
.card__cat-text {
color: $L-text;
}
.card__image {
order: -1;
margin-bottom: 16px;
@include bp(md-min) {
margin-bottom: 24px;
}
.image__img {
width: 100%;
}
}
import './card.scss';
<article class="card ">
<div class="card__content text">
<h1 class="card__title h3">
<a href="#" class="card__link"> Purunev väntvõll ja auklikud kolvid: need 12 on selle sajandi kõige hullemad mootorid
</a>
</h1>
<div class="text">
Mootori eluiga ja tervis oleneb väga palju omanikust ja tähelepanust, mida jõuallikas saab. Aga siis on mootorid, mille puhul on inseneritöö ebaõnnestunud ja ka kõige hoolsamal omanikul võib asi lõppeda pisaratega.
</div>
</div>
<figure class="image image--fluid card__image">
<img loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20280%20155%22%3E%3C%2Fsvg%3E" data-srcset="//via.placeholder.com/280x155 280w, //via.placeholder.com/560x310 560w, //via.placeholder.com/840x465 840w, //via.placeholder.com/1120x620 1120w, //via.placeholder.com/1400x775 1400w, //via.placeholder.com/1680x930 1680w, //via.placeholder.com/1960x1085 1960w, //via.placeholder.com/2240x1240 2240w" data-sizes="auto" alt="" class="image__img lazyload">
</figure>
<div class="card__meta text-small">
<ul class="card__list">
<li class="card__list-item">
<a href="#" class="card__cat-link">Process</a>
</li>
<li class="card__list-item">
<a href="#" class="card__cat-link">UX</a>
</li>
</ul>
<time class="card__date" datetime="2020-01-22T00:00:00+00:00">22.01.2020</time>
</div>
</article>
{% set headingElement = headingElement|default('h1') %}
<article class="card {{ modifier }} {{ class }}">
<div class="card__content text">
<{{ headingElement }} class="card__title h3">
{% if data.link %}<a href="{{ data.link }}" class="card__link">{% endif %}
{{ data.title }}
{% if data.link %}</a>{% endif %}
</{{ headingElement }}>
<div class="text">
{{ data.description }}
</div>
</div>
{% if data.image %}
{% include '@image' with { data: data.image|srcset('280x155'), class: 'card__image', modifier: 'image--fluid' } %}
{% endif %}
{% if data.categories or data.date %}
<div class="card__meta text-small">
{% if data.categories|length > 0 %}
<ul class="card__list">
{% for item in data.categories.items %}
<li class="card__list-item">
{% if item.link %}
<a href="{{ item.link }}" class="card__cat-link">{{ item.title }}</a>
{% else %}
<span class="card__cat-text">{{ item.title }}</span>
{% endif %}
</li>
{% endfor %}
</ul>
{% endif %}
{% if data.date %}
<time class="card__date" {% if data.date.iso %}datetime="{{ data.date.iso }}"{% endif %}>{{ data.date.value }}</time>
{% endif %}
</div>
{% endif %}
</article>
{
"language": "en-US",
"data": {
"image": true,
"title": "Purunev väntvõll ja auklikud kolvid: need 12 on selle sajandi kõige hullemad mootorid",
"date": {
"value": "22.01.2020",
"iso": "2020-01-22T00:00:00+00:00"
},
"link": "#",
"categories": {
"items": [
{
"title": "Process",
"link": "#"
},
{
"title": "UX",
"link": "#"
}
]
},
"description": "Mootori eluiga ja tervis oleneb väga palju omanikust ja tähelepanust, mida jõuallikas saab. Aga siis on mootorid, mille puhul on inseneritöö ebaõnnestunud ja ka kõige hoolsamal omanikul võib asi lõppeda pisaratega."
}
}
.card {
position: relative;
z-index: 0;
display: flex;
flex-direction: column;
}
.card__meta {
order: -1;
display: flex;
margin-bottom: 16px;
@include bp(md-min) {
margin-bottom: 24px;
}
}
.card__list {
position: relative;
z-index: 2;
display: inline-block;
margin: 0 -8px;
}
.card__list-item {
display: inline-block;
padding: 0 8px;
}
.card__date {
&:not(:first-child) {
margin-left: 16px;
}
}
.card__link {
color: $L-text-strong;
text-decoration: none;
&:hover {
color: $L-text-strong-hover;
}
&:after {
content: '';
display: block;
position: absolute;
z-index: 1;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
}
.card__cat-link {
text-decoration: none;
color: $L-text;
&:hover {
color: $L-text-hover;
}
}
.card__cat-text {
color: $L-text;
}
.card__image {
order: -1;
margin-bottom: 16px;
@include bp(md-min) {
margin-bottom: 24px;
}
.image__img {
width: 100%;
}
}
import './card.scss';
<article class="card ">
<div class="card__content text">
<h1 class="card__title h3">
<a href="#" class="card__link"> Sügis algas ja mott on maas: mõned võtted, kuidas sombusel ajal uut hingamist leida!
</a>
</h1>
<div class="text">
Suvi on läbi ja puhkusejärgne motivatsioonipuhang ning ind uute tegude järele hakkab raugema sama kiiresti, kui õues pimedaks läheb. Mida teha, et teotahe ei kaoks, ning kuidas uus motivatsioonipuhang leida.
</div>
</div>
<figure class="image image--fluid card__image">
<img loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20280%20155%22%3E%3C%2Fsvg%3E" data-srcset="//via.placeholder.com/280x155 280w, //via.placeholder.com/560x310 560w, //via.placeholder.com/840x465 840w, //via.placeholder.com/1120x620 1120w, //via.placeholder.com/1400x775 1400w, //via.placeholder.com/1680x930 1680w, //via.placeholder.com/1960x1085 1960w, //via.placeholder.com/2240x1240 2240w" data-sizes="auto" alt="" class="image__img lazyload">
</figure>
<div class="card__meta text-small">
<ul class="card__list">
<li class="card__list-item">
<a href="#" class="card__cat-link">Process</a>
</li>
<li class="card__list-item">
<a href="#" class="card__cat-link">UX</a>
</li>
</ul>
<time class="card__date" datetime="2020-01-22T00:00:00+00:00">22.01.2020</time>
</div>
</article>
{% set headingElement = headingElement|default('h1') %}
<article class="card {{ modifier }} {{ class }}">
<div class="card__content text">
<{{ headingElement }} class="card__title h3">
{% if data.link %}<a href="{{ data.link }}" class="card__link">{% endif %}
{{ data.title }}
{% if data.link %}</a>{% endif %}
</{{ headingElement }}>
<div class="text">
{{ data.description }}
</div>
</div>
{% if data.image %}
{% include '@image' with { data: data.image|srcset('280x155'), class: 'card__image', modifier: 'image--fluid' } %}
{% endif %}
{% if data.categories or data.date %}
<div class="card__meta text-small">
{% if data.categories|length > 0 %}
<ul class="card__list">
{% for item in data.categories.items %}
<li class="card__list-item">
{% if item.link %}
<a href="{{ item.link }}" class="card__cat-link">{{ item.title }}</a>
{% else %}
<span class="card__cat-text">{{ item.title }}</span>
{% endif %}
</li>
{% endfor %}
</ul>
{% endif %}
{% if data.date %}
<time class="card__date" {% if data.date.iso %}datetime="{{ data.date.iso }}"{% endif %}>{{ data.date.value }}</time>
{% endif %}
</div>
{% endif %}
</article>
{
"language": "en-US",
"data": {
"image": true,
"title": "Sügis algas ja mott on maas: mõned võtted, kuidas sombusel ajal uut hingamist leida!",
"date": {
"value": "22.01.2020",
"iso": "2020-01-22T00:00:00+00:00"
},
"link": "#",
"categories": {
"items": [
{
"title": "Process",
"link": "#"
},
{
"title": "UX",
"link": "#"
}
]
},
"description": "Suvi on läbi ja puhkusejärgne motivatsioonipuhang ning ind uute tegude järele hakkab raugema sama kiiresti, kui õues pimedaks läheb. Mida teha, et teotahe ei kaoks, ning kuidas uus motivatsioonipuhang leida."
}
}
.card {
position: relative;
z-index: 0;
display: flex;
flex-direction: column;
}
.card__meta {
order: -1;
display: flex;
margin-bottom: 16px;
@include bp(md-min) {
margin-bottom: 24px;
}
}
.card__list {
position: relative;
z-index: 2;
display: inline-block;
margin: 0 -8px;
}
.card__list-item {
display: inline-block;
padding: 0 8px;
}
.card__date {
&:not(:first-child) {
margin-left: 16px;
}
}
.card__link {
color: $L-text-strong;
text-decoration: none;
&:hover {
color: $L-text-strong-hover;
}
&:after {
content: '';
display: block;
position: absolute;
z-index: 1;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
}
.card__cat-link {
text-decoration: none;
color: $L-text;
&:hover {
color: $L-text-hover;
}
}
.card__cat-text {
color: $L-text;
}
.card__image {
order: -1;
margin-bottom: 16px;
@include bp(md-min) {
margin-bottom: 24px;
}
.image__img {
width: 100%;
}
}
import './card.scss';