Copy environment

Dashboard 

<div class="profile-bar">
    <div class="h-container">
        <div class="grid grid--no-wrap-sm grid--middle-xs">
            <div class="grid__col grid__col--xs-4 grid__col--max-sm">
                <div class="profile-bar__title">
                    Tere, NOPE
                </div>
                <div class="profile-bar__id">
                    ID - 142831
                </div>
            </div>
            <div class="grid__col grid__col--xs-4 grid__col--min-sm profile-bar__account">

                <div class="profile">
                    <button class="profile__toggle js-profile-toggle" type="button">
                        <span class="profile__toggle-inner">
                            <span class="grid grid--no-wrap">
                                <span class="grid__col grid__col--max">
                                    <span class="profile__role">NOPE kliendihaldur</span>
                                    <span class="profile__name text-small">
                                        <span class="profile__name-inner">
                                            Kaarel Nurmsalu
                                        </span>
                                    </span>
                                </span>
                                <span class="grid__col grid__col--min">
                                    <svg class="icon  profile__icon" focusable="false">
                                        <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#chevron-bottom"></use>
                                    </svg>
                                </span>
                            </span>
                        </span>
                    </button>
                    <div class="profile__content text-small">
                        <div class="profile__content-inner">
                            <div class="grid grid--no-wrap grid--equalheight">
                                <div class="grid__col grid__col--min">
                                    <figure class="image image--full image--round profile__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%2048%2048%22%3E%3C%2Fsvg%3E" data-srcset="//via.placeholder.com/100x100 100w, //via.placeholder.com/200x200 200w, //via.placeholder.com/300x300 300w, //via.placeholder.com/400x400 400w, //via.placeholder.com/500x500 500w, //via.placeholder.com/600x600 600w, //via.placeholder.com/700x700 700w, //via.placeholder.com/800x800 800w, //via.placeholder.com/48x48 48w, //via.placeholder.com/96x96 96w" data-sizes="auto" alt="" class="image__img lazyload">

                                    </figure>
                                </div>
                                <div class="grid__col grid__col--max">
                                    <div class="profile__data">
                                        <div class="profile__role">NOPE kliendihaldur</div>
                                        <span class="profile__name">Kaarel Nurmsalu</span> <a class="profile__phone" href="tel:+372&nbsp;53&nbsp;453&nbsp;833">+372&nbsp;53&nbsp;453&nbsp;833</a><br> <a class="profile__email" href="mailto:kaarel.nurmsalu@ramirent.ee">kaarel.nurmsalu@ramirent.ee</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<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>
 
{% include '@profile-bar' with { data: data.profileBar, class: '', modifier: '' } %}
{% include '@dashboard' with { data: data.dashboard, class: '', modifier: '' } %}

{
  "language": "en-US",
  "data": {
    "dashboard": {
      "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": "#"
        }
      ]
    },
    "profileBar": {
      "title": "Tere, NOPE",
      "id": "ID - 142831",
      "profile": {
        "role": "NOPE kliendihaldur",
        "name": "Kaarel Nurmsalu",
        "phone": "+372&nbsp;53&nbsp;453&nbsp;833",
        "email": "kaarel.nurmsalu@ramirent.ee",
        "image": true
      }
    }
  }
}
  • Handle: @view-dashboard
  • Filesystem Path: src/patterns/views/dashboard/dashboard.twig
  • References (2): @profile-bar, @dashboard