<div class="title ">
<div class="title__inner">
<h1 class="h2 title__heading">Kirjanik Kristiina Kass kutsub naisi emakakaelavähi sõeluuringule</h1>
<div class="title__meta text-small">
<div class="title__author">
By <a href="#" class="title__author-link"> Author Name
</a> </div>
<time class="title__date" datetime="2020-01-22T00:00:00+00:00">Published on 22.01.2020</time>
</div>
<div id="title-categories-20201212" class="title__categories-label">Categories</div>
<ul class="title__categories text-small" aria-labelledby="title-categories-20201212">
<li class="title__category">
<a href="#" class="title__category-link"> Process
</a>
</li>
<li class="title__category">
<a href="#" class="title__category-link"> UX
</a>
</li>
</ul>
</div>
</div>
<div class="title {{ modifier }} {{ class }}">
<div class="title__inner">
<{{ element|default('h1') }} class="h2 title__heading">{{ data.title }}</{{ element|default('h1') }}>
{% if data.author or data.date %}
<div class="title__meta text-small">
{% if data.author %}
<div class="title__author">
{% if data.author.label %}{{ data.author.label ~ ' ' }}{% endif %}
{% if data.author.link %}<a href="{{ data.author.link }}" class="title__author-link">{% endif %}
{{ data.author.name }}
{% if data.author.link %}</a>{% endif %}
</div>
{% endif %}
{% if data.date %}
<time class="title__date" {% if data.date.iso %}datetime="{{ data.date.iso }}"{% endif %}>{% if data.date.label %}{{ data.date.label ~ ' ' }}{% endif %}{{ data.date.value }}</time>
{% endif %}
</div>
{% endif %}
{% if data.categories %}
<div id="{{ 'title-categories-' ~ data.categories.id }}" class="title__categories-label">{{ data.categories.label }}</div>
<ul class="title__categories text-small" aria-labelledby="{{ 'title-categories-' ~ data.categories.id }}">
{% for item in data.categories.items %}
<li class="title__category">
{% if item.link %}<a href="{{ item.link }}" class="title__category-link">{% endif %}
{{ item.title }}
{% if item.link %}</a>{% endif %}
</li>
{% endfor %}
</ul>
{% endif %}
</div>
</div>
{
"language": "en-US",
"data": {
"title": "Kirjanik Kristiina Kass kutsub naisi emakakaelavähi sõeluuringule",
"categories": {
"label": "Categories",
"id": "20201212",
"items": [
{
"title": "Process",
"link": "#"
},
{
"title": "UX",
"link": "#"
}
]
},
"author": {
"label": "By",
"name": "Author Name",
"link": "#"
},
"date": {
"label": "Published on",
"value": "22.01.2020",
"iso": "2020-01-22T00:00:00+00:00"
}
}
}
.title__inner {
display: flex;
flex-direction: column;
}
.title__heading {
color: $color-text-02;
}
.title__categories {
order: -1;
color: $color-text-02;
margin: 0 -8px 24px;
}
.title__category {
display: inline-block;
padding: 0 8px;
}
.title__category-link,
.title__author-link {
color: $color-text-01;
text-decoration: none;
&:hover {
color: $color-brand-01;
}
}
.title__meta {
margin-top: 24px;
color: $color-text-01;
@include bp(sm-min) {
display: flex;
}
}
.title__author {
@include bp(sm-min) {
display: inline-block;
margin-right: 24px;
}
}
.title__date {
margin-top: 8px;
@include bp(sm-min) {
display: inline-block;
margin-top: 0;
}
}
.title__categories-label {
@include visually-hidden();
}
import './title.scss';