Copy environment

Profile Bar 

<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="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">
                {% if data.title %}
                    <div class="profile-bar__title">
                        {{ data.title }}
                    </div>
                {% endif %}
                {% if data.id %}
                    <div class="profile-bar__id">
                        {{ data.id }}
                    </div>
                {% endif %}
            </div>
            {% if data.profile %}
                <div class="grid__col grid__col--xs-4 grid__col--min-sm profile-bar__account">
                    {% include '@profile' with { data: data.profile, class: '', modifier: ''} %}
                </div>
            {% endif %}
        </div>
    </div>
</div>

{
  "language": "en-US",
  "data": {
    "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
    }
  }
}
  • Content: 
    .profile-bar {
    background-color: $brand-primary;
    color: $L-text-inverted;
    padding: 12px 0;

    @include bp(md-min) {
        padding: 20px 0;
    }
}

.profile-bar__title {
    font-size: $font-size-large;
    font-weight: $font-weight-bold;
    letter-spacing: $letter-spacing-default;
    margin-bottom: 8px;

    @include bp(sm-min) {
        font-size: $font-size-h3-xs;
    }
}

.profile-bar__id {
    font-size: $font-size-base;
    letter-spacing: $letter-spacing-default;
    margin-bottom: 8px;

    @include bp(sm-min) {
        margin-bottom: 0;
    }
}
  • URL: /components/raw/profile-bar/profile-bar.scss
  • Filesystem Path: src/patterns/modules/profile-bar/profile-bar.scss
  • Size: 578 Bytes
  • Handle: @profile-bar--default
  • Filesystem Path: src/patterns/modules/profile-bar/profile-bar.twig
  • References (1): @profile
  • Referenced by (1): @view-dashboard