<div class="detail-meta ">
<div class="grid grid--no-gutter">
<div class="grid__col grid__col--md-17 grid__col--lg-18 detail-meta__col">
<div class="content-section content-section--sticky detail-meta__col-inner detail-meta__versions">
<div class="content-section__title text-button">Supported languages</div>
<div class="content-section__content">
<div class="detail-meta__languages">Estonian only for free download. Afrikaans, Akan, Albanian, Amharic, Arabic, Armenian, Assamese, Assyrian, Azerbaijani, Bahdini, Bambara, Bashkir, Basque, Belarusian, English included in the commercial version.</div>
<div class="accordion js-accordion-group detail-meta__accordions">
<div class="accordion__item js-accordion is-open" id="accordion-item-1">
<a href="#accordion-item-1" class="accordion__header js-accordion-control">
<div class="accordion__title">Accordion item 1 <svg class="icon accordion__header-icon">
<use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#accordion-open"></use>
</svg>
<svg class="icon accordion__header-icon--collapse accordion__header-icon">
<use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#accordion-collapse"></use>
</svg>
</div>
</a>
<div class="accordion__content js-accordion-content">
<div class="accordion__inner">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum quo voluptatum, accusantium exercitationem totam tempora error delectus libero commodi et. Similique vel exercitationem rerum distinctio itaque sunt voluptatibus enim sint.
</div>
</div>
</div>
<div class="accordion__item js-accordion " id="accordion-item-2">
<a href="#accordion-item-2" class="accordion__header js-accordion-control">
<div class="accordion__title">Accordion item 2 <svg class="icon accordion__header-icon">
<use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#accordion-open"></use>
</svg>
<svg class="icon accordion__header-icon--collapse accordion__header-icon">
<use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#accordion-collapse"></use>
</svg>
</div>
</a>
<div class="accordion__content js-accordion-content">
<div class="accordion__inner">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum quo voluptatum, accusantium exercitationem totam tempora error delectus libero commodi et. Similique vel exercitationem rerum distinctio itaque sunt voluptatibus enim sint.
</div>
</div>
</div>
<div class="accordion__item js-accordion " id="accordion-item-3">
<a href="#accordion-item-3" class="accordion__header js-accordion-control">
<div class="accordion__title">Accordion item 3 <svg class="icon accordion__header-icon">
<use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#accordion-open"></use>
</svg>
<svg class="icon accordion__header-icon--collapse accordion__header-icon">
<use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#accordion-collapse"></use>
</svg>
</div>
</a>
<div class="accordion__content js-accordion-content">
<div class="accordion__inner">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum quo voluptatum, accusantium exercitationem totam tempora error delectus libero commodi et. Similique vel exercitationem rerum distinctio itaque sunt voluptatibus enim sint.
</div>
</div>
</div>
</div>
</div>
</div>
<div class="content-section content-section--sticky detail-meta__examples">
<div class="content-section__title text-button">In use</div>
<div class="content-section__content">
<div class="detail-meta__example">
<div class="content-tooltip ">
<a href="https://google.com" class="button button--icon-text content-tooltip__button " target="_blank">
<span class="button__inner" data-text="Hover me">
<span class="button__text">
Hover me
<svg class="icon button__icon">
<use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#arrow-local"></use>
</svg>
</span>
</span>
</a>
<div class="content-tooltip__container">
<div class="content-section__overflow">
<figure class="image content-section--fluid content-section__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%20510%20695%22%3E%3C%2Fsvg%3E" data-srcset="//via.placeholder.com/510x695 100w" data-sizes="auto" alt="image alt text" class="image__img lazyload">
</figure>
</div>
</div>
</div>
</div>
<div class="detail-meta__example">
<div class="content-tooltip ">
<a href="https://google.com" class="button button--icon-text content-tooltip__button " target="_blank">
<span class="button__inner" data-text="Hover me">
<span class="button__text">
Hover me
<svg class="icon button__icon">
<use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#arrow-local"></use>
</svg>
</span>
</span>
</a>
<div class="content-tooltip__container">
<div class="content-section__overflow">
<figure class="image content-section--fluid content-section__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%20510%20695%22%3E%3C%2Fsvg%3E" data-srcset="//via.placeholder.com/510x695 100w" data-sizes="auto" alt="image alt text" class="image__img lazyload">
</figure>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="grid__col grid__col--md-7 grid__col--lg-6 detail-meta__col detail-meta__col--sidebar">
<div class="content-section content-section--sticky detail-meta__col-inner">
<div class="content-section__title text-button">Quality indicators</div>
<div class="content-section__content">
<div class="quality-indicator">
<div class="quality-indicator__metric">
<span class="quality-indicator__label text-small">character set</span>
<span class="quality-indicator__meter">
<span class="quality-indicator__meter-fill" style="width: 10%"></span>
</span>
</div>
<div class="quality-indicator__metric">
<span class="quality-indicator__label text-small">vector quality</span>
<span class="quality-indicator__meter">
<span class="quality-indicator__meter-fill" style="width: 30%"></span>
</span>
</div>
<div class="quality-indicator__metric">
<span class="quality-indicator__label text-small">spacing</span>
<span class="quality-indicator__meter">
<span class="quality-indicator__meter-fill" style="width: 100%"></span>
</span>
</div>
<div class="quality-indicator__metric">
<span class="quality-indicator__label text-small">kerning</span>
<span class="quality-indicator__meter">
<span class="quality-indicator__meter-fill" style="width: 0%"></span>
</span>
</div>
<div class="quality-indicator__metric">
<span class="quality-indicator__label text-small">family styles</span>
<span class="quality-indicator__meter">
<span class="quality-indicator__meter-fill" style="width: 60%"></span>
</span>
</div>
<div class="quality-indicator__metric">
<span class="quality-indicator__label text-small">open type features</span>
<span class="quality-indicator__meter">
<span class="quality-indicator__meter-fill" style="width: 90%"></span>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="detail-meta {{ modifier }} {{ class }}">
<div class="grid grid--no-gutter">
<div class="grid__col grid__col--md-17 grid__col--lg-18 detail-meta__col">
{% if data.languages or data.versions %}
{% set content %}
{% if data.languages %}
<div class="detail-meta__languages">{{ data.languages }}</div>
{% endif %}
{% if data.versions %}
{% include '@accordion' with { data: data.versions, class: 'detail-meta__accordions', modifier: '' } %}
{% endif %}
{% endset %}
{% include '@content-section' with { modifier: 'content-section--sticky', class: 'detail-meta__col-inner detail-meta__versions', data: { title: data.title, content: content } } %}
{% endif %}
{% if data.examples %}
{% set content %}
{% for example in data.examples.items %}
<div class="detail-meta__example">
{% include '@content-tooltip' with { data: example, class: '', modifier: '' } %}
</div>
{% endfor %}
{% endset %}
{% include '@content-section' with { modifier: 'content-section--sticky', class: 'detail-meta__examples', data: { title: data.examples.title, content: content } } %}
{% endif %}
</div>
<div class="grid__col grid__col--md-7 grid__col--lg-6 detail-meta__col detail-meta__col--sidebar">
{% if data.sidebar %}
{% set content %}
{% include '@quality-indicator' with { data: data.sidebar.indicators, class: 'detail-meta__indicators', modifier: '' } %}
{% endset %}
{% include '@content-section' with { modifier: 'content-section--sticky', class: 'detail-meta__col-inner', data: { title: data.sidebar.title, content: content } } %}
{% endif %}
</div>
</div>
</div>
{
"language": "en-US",
"data": {
"title": "Supported languages",
"languages": "Estonian only for free download. Afrikaans, Akan, Albanian, Amharic, Arabic, Armenian, Assamese, Assyrian, Azerbaijani, Bahdini, Bambara, Bashkir, Basque, Belarusian, English included in the commercial version.",
"versions": {
"items": [
{
"id": "accordion-item-1",
"title": "Accordion item 1",
"content": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum quo voluptatum, accusantium exercitationem totam tempora error delectus libero commodi et. Similique vel exercitationem rerum distinctio itaque sunt voluptatibus enim sint."
},
{
"id": "accordion-item-2",
"title": "Accordion item 2",
"content": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum quo voluptatum, accusantium exercitationem totam tempora error delectus libero commodi et. Similique vel exercitationem rerum distinctio itaque sunt voluptatibus enim sint."
},
{
"id": "accordion-item-3",
"title": "Accordion item 3",
"content": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum quo voluptatum, accusantium exercitationem totam tempora error delectus libero commodi et. Similique vel exercitationem rerum distinctio itaque sunt voluptatibus enim sint."
}
]
},
"examples": {
"title": "In use",
"items": [
{
"button": {
"text": "Hover me",
"icon": "arrow-local",
"link": "https://google.com"
},
"image": {
"srcset": "//via.placeholder.com/510x695 100w",
"alt": "image alt text",
"aspectRatio": {
"width": 510,
"height": 695
}
}
},
{
"button": {
"text": "Hover me",
"icon": "arrow-local",
"link": "https://google.com"
},
"image": {
"srcset": "//via.placeholder.com/510x695 100w",
"alt": "image alt text",
"aspectRatio": {
"width": 510,
"height": 695
}
}
}
]
},
"sidebar": {
"title": "Quality indicators",
"indicators": {
"indicators": [
{
"label": "character set",
"quality": 10
},
{
"label": "vector quality",
"quality": 30
},
{
"label": "spacing",
"quality": 100
},
{
"label": "kerning",
"quality": 0
},
{
"label": "family styles",
"quality": 60
},
{
"label": "open type features",
"quality": 90
}
]
}
}
}
}
.detail-meta__col--sidebar {
@include bp(md-min) {
border-left: 1px solid;
transition: $transition-duration $transition-easing;
transition-property: box-shadow;
}
}
.detail-meta__example {
display: block;
margin-top: 24px;
@include bp(sm-min) {
margin-top: 32px;
}
}
.content-section__content {
.detail-meta__examples & {
padding: 0 32px 40px 16px;
@include bp(sm-min) {
padding: 0 32px 64px 90px;
}
}
.detail-meta__col--sidebar & {
box-shadow: none;
padding: 32px 0 40px 16px;
@include bp(sm-min) {
padding: 40px 32px 64px 32px;
}
@include bp(md-min) {
padding: 40px 32px 64px 60px;
}
}
.detail-meta__versions & {
padding-bottom: 40px;
@include bp(sm-min) {
padding-bottom: 64px;
}
}
}
.detail-meta__languages {
padding: 24px 16px 40px;
@include bp(sm-min) {
padding: 40px 24px 64px 32px;
}
}
.detail-meta__col-inner {
.detail-meta__col--sidebar & {
height: 100%;
}
}
import './detail-meta.scss';