<div class="dashboard">
<div class="h-container">
<div class="grid dashboard__items">
<div class="grid__col grid__col--xs-4 grid__col--sm-2 grid__col--lg-4 grid__col--xl-3">
<div class="stats">
<div class="stats__text">
Krediidilimiit
</div>
<div class="stats__item">
<span class="stats__item-value">2 000 000€</span>
</div>
</div>
</div>
<div class="grid__col grid__col--xs-4 grid__col--sm-2 grid__col--lg-4 grid__col--xl-3">
<div class="stats">
<div class="stats__text">
Avatud krediiti
</div>
<div class="stats__item">
<span class="stats__item-value">-657.32€</span>
<div class="stats__item-info">/ 166% kasutatud</div>
</div>
</div>
</div>
</div>
<div class="grid dashboard__cards">
<div class="grid__col grid__col--xs-4 grid__col--sm-2 grid__col--lg-4 grid__col--xl-3">
<div class="dashboard-card">
<a href="#" class="dashboard-card__link">
<div class="dashboard-card__inner">
<div class="dashboard-card__icon-wrapper">
<svg class="icon dashboard-card__icon" focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#dashboard-balance"></use>
</svg>
</div>
<div class="dashboard-card__content">
<div class="dashboard-card__title">
Arvete saldo
</div>
<div class="grid grid--no-wrap grid--middle-xs dashboard-card__subtitle">
<div class="grid__col grid__col--max-xs ">
1657.32 €
</div>
<div class="grid__col grid__col--min-xs dashboard-card__button-wrapper">
<svg class="icon dashboard-card__button" focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#arrow-right"></use>
</svg>
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<div class="grid__col grid__col--xs-4 grid__col--sm-2 grid__col--lg-4 grid__col--xl-3">
<div class="dashboard-card dashboard-card--deadline">
<a href="#" class="dashboard-card__link">
<div class="dashboard-card__inner">
<div class="dashboard-card__icon-wrapper">
<svg class="icon dashboard-card__icon" focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#dashboard-calender"></use>
</svg>
</div>
<div class="dashboard-card__content">
<div class="dashboard-card__title">
Tähtaja ületanud arved
</div>
<div class="grid grid--no-wrap grid--middle-xs dashboard-card__subtitle">
<div class="grid__col grid__col--max-xs ">
1176.48 €
</div>
<div class="grid__col grid__col--min-xs dashboard-card__button-wrapper">
<svg class="icon dashboard-card--deadline dashboard-card__button" focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#arrow-right"></use>
</svg>
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<div class="grid__col grid__col--xs-4 grid__col--sm-2 grid__col--lg-4 grid__col--xl-3">
<div class="dashboard-card">
<a href="#" class="dashboard-card__link">
<div class="dashboard-card__inner">
<div class="dashboard-card__icon-wrapper">
<svg class="icon dashboard-card__icon" focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#dashboard-document"></use>
</svg>
</div>
<div class="dashboard-card__content">
<div class="dashboard-card__title">
Kinnitamata pakkumised
</div>
<div class="grid grid--no-wrap grid--middle-xs dashboard-card__subtitle">
<div class="grid__col grid__col--max-xs ">
2
</div>
<div class="grid__col grid__col--min-xs dashboard-card__button-wrapper">
<svg class="icon dashboard-card__button" focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#arrow-right"></use>
</svg>
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<div class="grid__col grid__col--xs-4 grid__col--sm-2 grid__col--lg-4 grid__col--xl-3">
<div class="dashboard-card">
<a href="#" class="dashboard-card__link">
<div class="dashboard-card__inner">
<div class="dashboard-card__icon-wrapper">
<svg class="icon dashboard-card__icon" focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#dashboard-signing"></use>
</svg>
</div>
<div class="dashboard-card__content">
<div class="dashboard-card__title">
Allkirjastamata lepingud
</div>
<div class="grid grid--no-wrap grid--middle-xs dashboard-card__subtitle">
<div class="grid__col grid__col--max-xs ">
1
</div>
<div class="grid__col grid__col--min-xs dashboard-card__button-wrapper">
<svg class="icon dashboard-card__button" focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#arrow-right"></use>
</svg>
</div>
</div>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="dashboard">
<div class="h-container">
{% if data.items %}
<div class="grid dashboard__items">
{% for item in data.items %}
<div class="grid__col grid__col--xs-4 grid__col--sm-2 grid__col--lg-4 grid__col--xl-3">
{% include '@stats' with { data: item, modifier:'', class:'' } %}
</div>
{% endfor %}
</div>
{% endif %}
{% if data.cards %}
<div class="grid dashboard__cards">
{% for card in data.cards %}
<div class="grid__col grid__col--xs-4 grid__col--sm-2 grid__col--lg-4 grid__col--xl-3">
{% include '@dashboard-card' with { data: card, modifier: card.modifier, class:'' } %}
</div>
{% endfor %}
</div>
{% endif %}
</div>
</div>
{
"language": "en-US",
"data": {
"items": [
{
"image": true,
"title": "Krediidilimiit",
"value": "2 000 000€"
},
{
"image": true,
"title": "Avatud krediiti",
"value": "-657.32€",
"info": "/ 166% kasutatud"
}
],
"cards": [
{
"title": "Arvete saldo",
"subtitle": "1657.32 €",
"icon": "dashboard-balance",
"link": "#"
},
{
"modifier": "dashboard-card--deadline",
"title": "Tähtaja ületanud arved",
"subtitle": "1176.48 €",
"icon": "dashboard-calender",
"link": "#"
},
{
"title": "Kinnitamata pakkumised",
"subtitle": "2",
"icon": "dashboard-document",
"link": "#"
},
{
"title": "Allkirjastamata lepingud",
"subtitle": "1",
"icon": "dashboard-signing",
"link": "#"
}
]
}
}
.dashboard {
padding: 24px 0 48px;
@include bp(md-min) {
padding: 32px 0 64px;
}
}
.dashboard__cards {
.dashboard__items + & {
margin-top: 24px;
@include bp(md-min) {
margin-top: 32px;
}
}
}
import './dashboard.scss';