Stilguiden VGR

Search card: Person 

<div class="vgr-search-card vgr-search-card--panel vgr-search-card--person">
    <div class="vgr-search-card__header vgr-search-card__header--photo vgr-clearfix">

        <div class="vgr-search-card__image-holder">
            <div class="vgr-search-card__image-container">
                <img class="vgr-search-card__image" src="../../temp/female-1.jpg" alt="alt text" width="66" height="66">
            </div>

            <div class="vgr-search-card__status">
                <svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><title>Skype-status tillgänglig</title><g fill="none" fill-rule="evenodd"><circle fill="#83D746" cx="8" cy="8" r="8"/><path d="M11.704 4.077A.275.275 0 0 0 11.521 4a.27.27 0 0 0-.186.08L5.971 9.835S4.805 8.39 4.74 8.318c-.066-.07-.151-.188-.28-.188-.13 0-.19.099-.257.172-.05.058-.68.68-1.086 1.148a1.325 1.325 0 0 1-.059.067.333.333 0 0 0-.059.182c0 .07.024.128.059.183l.083.083 2.6 2.869c.068.073.151.166.272.166.118 0 .215-.138.271-.198l6.656-7.055A.335.335 0 0 0 13 5.56c0-.08-.03-.147-.07-.205l-1.226-1.28z" fill="#FFF"/></g></svg>
            </div>

        </div>

        <div class="vgr-search-card__introduction">
            <h2 class="vgr-search-card__headline vgr-search-card__headline--white">
                <a href="/">Lorem ipsum</a>
            </h2>

            <p class="vgr-search-card__meta">Applikationsspecialist</p>

            <p class="vgr-search-card__meta" data-expanded="true" aria-expanded="true" aria-controls="vgr-search-card__multi-employee" data-module="toggle">
                <span class="vgr-search-card__placement">Digitala medier & Dokumenthantering</span>

                <span class="vgr-search-card__meta-toggle-btn vgr-search-card__meta-toggle-btn__expand-button__open">
              <svg width="10px" height="10px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                <g id="Group">
                  <path d="M10,0 C4.48,0 0,4.48 0,10 C0,15.52 4.48,20 10,20 C15.52,20 20,15.52 20,10 C20,4.48 15.52,0 10,0 Z" id="Shape" fill="#A2A3A3" fill-rule="nonzero"></path>
                  <polygon id="Path" fill="#FFFFFF" points="11 5 9 5 9 9 5 9 5 11 9 11 9 15 11 15 11 11 15 11 15 9 11 9"></polygon>
                </g>
              </svg>
              <span>Fler anställningar finns</span>
                </span>
                <span class="vgr-search-card__meta-toggle-btn vgr-search-card__meta-toggle-btn__expand-button__close">
              <svg width="10px" height="10px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                <g id="Group">
                  <path d="M10,0 C4.48,0 0,4.48 0,10 C0,15.52 4.48,20 10,20 C15.52,20 20,15.52 20,10 C20,4.48 15.52,0 10,0 Z" id="Shape" fill="#A2A3A3" fill-rule="nonzero"></path>
                  <path d="M11,11 L9,11 L5,11 L5,9 L9,9 L11,9 L15,9 L15,11 L11,11 Z" id="Combined-Shape" fill="#FFFFFF"></path>
                </g>
              </svg>
              <span>Dölj fler anställningar</span>
                </span>

            </p>

        </div>
    </div>

    <div class="vgr-search-card__multi-employee" aria-expanded="true">
        <svg width="26" height="26" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>info</title><path d="M10 0C4.48 0 0 4.48 0 10s4.48 10 10 10 10-4.48 10-10S15.52 0 10 0zm1 15H9V9h2v6zm0-8H9V5h2v2z" fill-rule="evenodd"/></svg>
        <div class="vgr-search-card__multi-employee-information">
            <span class="vgr-search-card__multi-employee-label">Också anställd som:</span>
            <dl class="vgr-detail-list vgr-detail-list--compact">

                <dd class="vgr-detail-list__item"><a class="vgr-detail-list__link vgr-detail-list__link--multi-employee" href="#">Teamledare, Närhälsan Älvängens vårdcentral</a></dd>

                <dd class="vgr-detail-list__item"><a class="vgr-detail-list__link vgr-detail-list__link--multi-employee" href="#">Sjuksköterska Sjukvårdsrådgivare, 117 Vårdguiden på telefon VGR Alingsås</a></dd>

            </dl>
        </div>
    </div>

    <div class="vgr-search-card__information">
        <dl class="vgr-detail-list">
            <dd class="vgr-detail-list__item"><span class="vgr-detail-list__label">Epost</span> <a class="vgr-detail-list__link" href="#">evelyn.stolfer@vgregion.se</a></dd>
            <dd class="vgr-detail-list__item"><span class="vgr-detail-list__label">Telefon</span> <a class="vgr-detail-list__link" href="#">073 - 688 93 53</a></dd>
            <dd class="vgr-detail-list__item"><span class="vgr-detail-list__label">Mobiltelefon</span> <a class="vgr-detail-list__link" href="#">073 - 688 93 53</a></dd>
        </dl>
    </div>

    <div class="vgr-search-card__folded vgr-search-card__information vgr-search-card__information--slim" id="folded-1">

        <dl class="vgr-detail-list">
            <dd class="vgr-detail-list__item"><span class="vgr-detail-list__label">Skype</span> <a class="vgr-detail-list__link" href="#">Ring upp via Skype</a></dd>
            <dd class="vgr-detail-list__item"><span class="vgr-detail-list__label">Växeltelefon</span> <a class="vgr-detail-list__link" href="#">010 - 441 00 00</a></dd>
            <dd class="vgr-detail-list__item"><span class="vgr-detail-list__label">Organisation</span>
                <ul class="vgr-detail-list__group">
                    <li><a class="vgr-detail-list__link" href="#">Digitala medier</a></li>
                    <li><a class="vgr-detail-list__link" href="#">Koncernstab Kommunikation och Externa relationer</a></li>
                    <li><a class="vgr-detail-list__link" href="#">Koncernkontoret</a></li>
                </ul>
            </dd>
            <dd class="vgr-detail-list__item vgr-detail-list__item--margin-bottom"><span class="vgr-detail-list__label">Linjechef</span> <a class="vgr-detail-list__link" href="#">Namn/VGRID</a></dd>
        </dl>

        <div class="vgr-toggle-content">
            <p class="vgr-link-list__heading" aria-controls="vgr-toggle-content__container" data-module="toggle"><svg width="10" height="6" viewBox="0 0 10 6" xmlns="http://www.w3.org/2000/svg"><path d="M8.418.859a.695.695 0 0 1 .978 0 .68.68 0 0 1 0 .969l-3.908 3.83a.697.697 0 0 1-.979 0L.601 1.828a.68.68 0 0 1 0-.969.695.695 0 0 1 .978 0L5 4 8.418.859z" fill="#5B5B5B" fill-rule="evenodd"/></svg>Adresser</p>
            <div class="vgr-toggle-content__container">
                <ul class="vgr-toggle-content__list">
                    <li class="vgr-toggle-content__item">
                        <b>Postadress</b> Koncernstab Kommunikation och Externa relationer<br/> Regionens Hus<br/> Lillhagsparken 5<br/> 462 80 Göteborg
                    </li>
                    <li class="vgr-toggle-content__item">
                        <b>Besöksadress</b> Lillhagsparken 5<br/> 462 80 Göteborg
                    </li>
                </ul>
            </div>
        </div>

        <div class="vgr-toggle-content">
            <p class="vgr-link-list__heading" aria-controls="vgr-toggle-content__container" data-module="toggle"><svg width="10" height="6" viewBox="0 0 10 6" xmlns="http://www.w3.org/2000/svg"><path d="M8.418.859a.695.695 0 0 1 .978 0 .68.68 0 0 1 0 .969l-3.908 3.83a.697.697 0 0 1-.979 0L.601 1.828a.68.68 0 0 1 0-.969.695.695 0 0 1 .978 0L5 4 8.418.859z" fill="#5B5B5B" fill-rule="evenodd"/></svg>Ekonomiska
                uppgifter (beställar-id)</p>
            <div class="vgr-toggle-content__container">
                <dl class="vgr-detail-list vgr-detail-list--margin-bottom">
                    <dd class="vgr-detail-list__item"><span class="vgr-detail-list__label">Ansvar</span> W32150</dd>
                    <dd class="vgr-detail-list__item"><span class="vgr-detail-list__label">Beställar-ID</span> 3215000</dd>
                    <dd class="vgr-detail-list__item"><span class="vgr-detail-list__label">I-nummer</span> i70210</dd>
                </dl>
                <ul class="vgr-toggle-content__list vgr-toggle-content__list--margin-top">
                    <li class="vgr-toggle-content__item">
                        <b>Fakturaadress</b> Regionstyrelsen
                        <br/> Fe 960<br/> 462 80 Göteborg
                    </li>
                </ul>
            </div>
        </div>

        <div class="vgr-toggle-content vgr-toggle-content--internal">
            <a class="vgr-toggle-content__link" href="#"><svg class="rotate90" width="10" height="6" viewBox="0 0 10 6" xmlns="http://www.w3.org/2000/svg"><path d="M8.418.859a.695.695 0 0 1 .978 0 .68.68 0 0 1 0 .969l-3.908 3.83a.697.697 0 0 1-.979 0L.601 1.828a.68.68 0 0 1 0-.969.695.695 0 0 1 .978 0L5 4 8.418.859z" fill="#3796d7" fill-rule="evenodd"/></svg>Visa personer i enheten Digitala medier</a>
        </div>

        <div class="vgr-toggle-content vgr-toggle-content--internal">
            <a class="vgr-toggle-content__link" href="#"><span><svg width="14" height="14" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>info</title><path d="M10 0C4.48 0 0 4.48 0 10s4.48 10 10 10 10-4.48 10-10S15.52 0 10 0zm1 15H9V9h2v6zm0-8H9V5h2v2z" fill="#EBEBEB" fill-rule="evenodd"/></svg></span>Anmäl fel i innehållet</a>
        </div>

    </div>

    <button class="vgr-search-card__expand-button" aria-controls="vgr-search-card__folded" data-module="toggle">
        <svg width="10" height="6" viewBox="0 0 10 6" xmlns="http://www.w3.org/2000/svg"><path d="M8.418.859a.695.695 0 0 1 .978 0 .68.68 0 0 1 0 .969l-3.908 3.83a.697.697 0 0 1-.979 0L.601 1.828a.68.68 0 0 1 0-.969.695.695 0 0 1 .978 0L5 4 8.418.859z" fill="#5B5B5B" fill-rule="evenodd"/></svg><p class="vgr-search-card__expand-button__open-label">Visa mer</p><p class="vgr-search-card__expand-button__close-label">Visa mindre</p>
    </button>

</div>
 
<div class="vgr-search-card vgr-search-card--panel vgr-search-card--{{ modifier }}{% if bestbet %} vgr-search-card--bestbet{% endif %}">
  <div class="vgr-search-card__header vgr-search-card__header--photo vgr-clearfix">

    <div class="vgr-search-card__image-holder">
      <div class="vgr-search-card__image-container">
        <img class="vgr-search-card__image" src="{{ image | path }}" alt="{{ imageAlt }}" width="{{ imageWidth }}" height="{{ imageHeight }}">
      </div>

      {% if statusOnline %}
        <div class="vgr-search-card__status">
          <svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><title>Skype-status tillgänglig</title><g fill="none" fill-rule="evenodd"><circle fill="#83D746" cx="8" cy="8" r="8"/><path d="M11.704 4.077A.275.275 0 0 0 11.521 4a.27.27 0 0 0-.186.08L5.971 9.835S4.805 8.39 4.74 8.318c-.066-.07-.151-.188-.28-.188-.13 0-.19.099-.257.172-.05.058-.68.68-1.086 1.148a1.325 1.325 0 0 1-.059.067.333.333 0 0 0-.059.182c0 .07.024.128.059.183l.083.083 2.6 2.869c.068.073.151.166.272.166.118 0 .215-.138.271-.198l6.656-7.055A.335.335 0 0 0 13 5.56c0-.08-.03-.147-.07-.205l-1.226-1.28z" fill="#FFF"/></g></svg>
        </div>
      {% endif %}

      {% if statusOffline %}
        <div class="vgr-search-card__status">
          <svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><title>Skype-status offline</title><g fill="none" fill-rule="evenodd"><circle fill="#FF3607" cx="8" cy="8" r="8"/><path fill="#FFF" d="M4 7h8v2H4z"/></g></svg>
        </div>
      {% endif %}

      {% if statusUnavailable %}
        <div class="vgr-search-card__status">
          <svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><title>Skype-status otillgänglig</title><g fill="none" fill-rule="evenodd"><circle fill="#B8B9B7" cx="8" cy="8" r="8"/><path d="M10.932 10.043l-2.05-2.057 2.055-2.03a.217.217 0 0 0 0-.306l-.585-.588A.215.215 0 0 0 10.2 5a.222.222 0 0 0-.153.062L8.001 7.086 5.952 5.064a.215.215 0 0 0-.153-.062.222.222 0 0 0-.153.062l-.583.587a.217.217 0 0 0 0 .306l2.055 2.03-2.048 2.056a.216.216 0 0 0 0 .306l.584.587a.215.215 0 0 0 .306 0L8 8.887l2.043 2.047a.215.215 0 0 0 .306 0l.585-.587a.216.216 0 0 0 .064-.153.224.224 0 0 0-.066-.151z" fill="#FFF"/></g></svg>
        </div>
      {% endif %}
    </div>

    <div class="vgr-search-card__introduction">
      <h2 class="vgr-search-card__headline vgr-search-card__headline--white">
        <a href="{{ url }}">{{ headline }}</a>
      </h2>
      {% if title %}
        <p class="vgr-search-card__meta">{{ title }}</p>
      {% endif %}
      {% if placement %}
        <p class="vgr-search-card__meta" data-expanded="true" aria-expanded="true" aria-controls="vgr-search-card__multi-employee" data-module="toggle">
          <span class="vgr-search-card__placement">{{ placement }}</span>
          {% if multiEmployee %}
            <span class="vgr-search-card__meta-toggle-btn vgr-search-card__meta-toggle-btn__expand-button__open">
              <svg width="10px" height="10px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                <g id="Group">
                  <path d="M10,0 C4.48,0 0,4.48 0,10 C0,15.52 4.48,20 10,20 C15.52,20 20,15.52 20,10 C20,4.48 15.52,0 10,0 Z" id="Shape" fill="#A2A3A3" fill-rule="nonzero"></path>
                  <polygon id="Path" fill="#FFFFFF" points="11 5 9 5 9 9 5 9 5 11 9 11 9 15 11 15 11 11 15 11 15 9 11 9"></polygon>
                </g>
              </svg>
              <span>Fler anställningar finns</span>
            </span>
            <span class="vgr-search-card__meta-toggle-btn vgr-search-card__meta-toggle-btn__expand-button__close">
              <svg width="10px" height="10px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                <g id="Group">
                  <path d="M10,0 C4.48,0 0,4.48 0,10 C0,15.52 4.48,20 10,20 C15.52,20 20,15.52 20,10 C20,4.48 15.52,0 10,0 Z" id="Shape" fill="#A2A3A3" fill-rule="nonzero"></path>
                  <path d="M11,11 L9,11 L5,11 L5,9 L9,9 L11,9 L15,9 L15,11 L11,11 Z" id="Combined-Shape" fill="#FFFFFF"></path>
                </g>
              </svg>
              <span>Dölj fler anställningar</span>
            </span>
          {% endif %}
        </p>
      {% endif %}
    </div>
  </div>

  <div class="vgr-search-card__multi-employee" aria-expanded="true">
    <svg width="26" height="26" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>info</title><path d="M10 0C4.48 0 0 4.48 0 10s4.48 10 10 10 10-4.48 10-10S15.52 0 10 0zm1 15H9V9h2v6zm0-8H9V5h2v2z" fill-rule="evenodd"/></svg>
    <div class="vgr-search-card__multi-employee-information">
      <span class="vgr-search-card__multi-employee-label">Också anställd som:</span>
      <dl class="vgr-detail-list vgr-detail-list--compact">
        {% for employment in additionalEmployments %}
          <dd class="vgr-detail-list__item"><a class="vgr-detail-list__link vgr-detail-list__link--multi-employee" href="#">{{ employment.title }}, {{ employment.section }}</a></dd>
        {% endfor%}
      </dl>
    </div>
  </div>

  <div class="vgr-search-card__information">
    <dl class="vgr-detail-list">
        <dd class="vgr-detail-list__item"><span class="vgr-detail-list__label">{{ emailLabel }}</span> <a class="vgr-detail-list__link" href="#">{{ email }}</a></dd>
        <dd class="vgr-detail-list__item"><span class="vgr-detail-list__label">{{ landlinelabel }}</span> <a class="vgr-detail-list__link" href="#">{{ landline }}</a></dd>
        <dd class="vgr-detail-list__item"><span class="vgr-detail-list__label">{{ mobileLabel }}</span> <a class="vgr-detail-list__link" href="#">{{ mobile }}</a></dd>
      </dl>
  </div>

  {% if expandable %}
    <div class="vgr-search-card__folded vgr-search-card__information vgr-search-card__information--slim" id="folded-1">

      <dl class="vgr-detail-list">
        <dd class="vgr-detail-list__item"><span class="vgr-detail-list__label">Skype</span> <a class="vgr-detail-list__link" href="#">Ring upp via Skype</a></dd>
        <dd class="vgr-detail-list__item"><span class="vgr-detail-list__label">{{ switchedTelephoneLabel
   }}</span> <a class="vgr-detail-list__link" href="#">{{ switchedTelephone }}</a></dd>
        <dd class="vgr-detail-list__item"><span class="vgr-detail-list__label">Organisation</span>
            <ul class="vgr-detail-list__group">
                <li><a class="vgr-detail-list__link" href="#">Digitala medier</a></li>
                <li><a class="vgr-detail-list__link" href="#">Koncernstab Kommunikation och Externa relationer</a></li>
                <li><a class="vgr-detail-list__link" href="#">Koncernkontoret</a></li>
            </ul>
        </dd>
        <dd class="vgr-detail-list__item vgr-detail-list__item--margin-bottom"><span class="vgr-detail-list__label">Linjechef</span> <a class="vgr-detail-list__link" href="#">Namn/VGRID</a></dd>
      </dl>

      <div class="vgr-toggle-content">
        <p class="vgr-link-list__heading" aria-controls="vgr-toggle-content__container" data-module="toggle"><svg width="10" height="6" viewBox="0 0 10 6" xmlns="http://www.w3.org/2000/svg"><path d="M8.418.859a.695.695 0 0 1 .978 0 .68.68 0 0 1 0 .969l-3.908 3.83a.697.697 0 0 1-.979 0L.601 1.828a.68.68 0 0 1 0-.969.695.695 0 0 1 .978 0L5 4 8.418.859z" fill="#5B5B5B" fill-rule="evenodd"/></svg>Adresser</p>
        <div class="vgr-toggle-content__container">
          <ul class="vgr-toggle-content__list">
            <li class="vgr-toggle-content__item">
              <b>Postadress</b>
              Koncernstab Kommunikation och Externa relationer<br/>
              Regionens Hus<br/>
              Lillhagsparken 5<br/>
              462 80 Göteborg
            </li>
            <li class="vgr-toggle-content__item">
              <b>Besöksadress</b>
              Lillhagsparken 5<br/>
              462 80 Göteborg
            </li>
          </ul>
        </div>
      </div>

      <div class="vgr-toggle-content">
        <p class="vgr-link-list__heading" aria-controls="vgr-toggle-content__container" data-module="toggle"><svg width="10" height="6" viewBox="0 0 10 6" xmlns="http://www.w3.org/2000/svg"><path d="M8.418.859a.695.695 0 0 1 .978 0 .68.68 0 0 1 0 .969l-3.908 3.83a.697.697 0 0 1-.979 0L.601 1.828a.68.68 0 0 1 0-.969.695.695 0 0 1 .978 0L5 4 8.418.859z" fill="#5B5B5B" fill-rule="evenodd"/></svg>Ekonomiska uppgifter (beställar-id)</p>
        <div class="vgr-toggle-content__container">
          <dl class="vgr-detail-list vgr-detail-list--margin-bottom">
            <dd class="vgr-detail-list__item"><span class="vgr-detail-list__label">Ansvar</span> W32150</dd>
            <dd class="vgr-detail-list__item"><span class="vgr-detail-list__label">Beställar-ID</span> 3215000</dd>
            <dd class="vgr-detail-list__item"><span class="vgr-detail-list__label">I-nummer</span> i70210</dd>
          </dl>
          <ul class="vgr-toggle-content__list vgr-toggle-content__list--margin-top">
            <li class="vgr-toggle-content__item">
              <b>Fakturaadress</b>
              Regionstyrelsen<br/>
              Fe 960<br/>
              462 80 Göteborg
            </li>
          </ul>
        </div>
      </div>

      <div class="vgr-toggle-content vgr-toggle-content--internal">
        <a class="vgr-toggle-content__link" href="#"><svg class="rotate90" width="10" height="6" viewBox="0 0 10 6" xmlns="http://www.w3.org/2000/svg"><path d="M8.418.859a.695.695 0 0 1 .978 0 .68.68 0 0 1 0 .969l-3.908 3.83a.697.697 0 0 1-.979 0L.601 1.828a.68.68 0 0 1 0-.969.695.695 0 0 1 .978 0L5 4 8.418.859z" fill="#3796d7" fill-rule="evenodd"/></svg>Visa personer i enheten Digitala medier</a>
      </div>

      <div class="vgr-toggle-content vgr-toggle-content--internal">
        <a class="vgr-toggle-content__link" href="#"><span><svg width="14" height="14" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>info</title><path d="M10 0C4.48 0 0 4.48 0 10s4.48 10 10 10 10-4.48 10-10S15.52 0 10 0zm1 15H9V9h2v6zm0-8H9V5h2v2z" fill="#EBEBEB" fill-rule="evenodd"/></svg></span>Anmäl fel i innehållet</a>
      </div>

    </div>

    <button class="vgr-search-card__expand-button" aria-controls="vgr-search-card__folded" data-module="toggle">
        <svg width="10" height="6" viewBox="0 0 10 6" xmlns="http://www.w3.org/2000/svg"><path d="M8.418.859a.695.695 0 0 1 .978 0 .68.68 0 0 1 0 .969l-3.908 3.83a.697.697 0 0 1-.979 0L.601 1.828a.68.68 0 0 1 0-.969.695.695 0 0 1 .978 0L5 4 8.418.859z" fill="#5B5B5B" fill-rule="evenodd"/></svg><p class="vgr-search-card__expand-button__open-label">Visa mer</p><p class="vgr-search-card__expand-button__close-label">Visa mindre</p>
    </button>
  {% endif %}
</div>
 
{
  "headline": "Lorem ipsum",
  "url": "/",
  "datetime": "2015-08-19",
  "date": "19 augusti 2015",
  "source": "Västra Götalandsregionen",
  "excerpt": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus laoreet tristique erat a tincidunt. Morbi eleifend augue sit amet nunc vulputate finibus…",
  "modifier": "person",
  "expandable": true,
  "bestbet": null,
  "statusOnline": true,
  "statusOffline": null,
  "statusUnavailable": null,
  "image": "/temp/female-1.jpg",
  "mapAddress": "/temp/map.png",
  "imageAlt": "alt text",
  "imageHeight": "66",
  "imageWidth": "66",
  "title": "Applikationsspecialist",
  "placement": "Digitala medier & Dokumenthantering",
  "emailLabel": "Epost",
  "email": "evelyn.stolfer@vgregion.se",
  "landlinelabel": "Telefon",
  "landline": "073 - 688 93 53",
  "mobileLabel": "Mobiltelefon",
  "mobile": "073 - 688 93 53",
  "switchedTelephoneLabel": "Växeltelefon",
  "switchedTelephone": "010 - 441 00 00",
  "faxNumberLabel": "Faxnummer",
  "faxNumber": "010 - 441 00 00",
  "multiEmployee": true,
  "additionalEmployments": [
    {
      "title": "Teamledare",
      "section": "Närhälsan Älvängens vårdcentral"
    },
    {
      "title": "Sjuksköterska Sjukvårdsrådgivare",
      "section": "117 Vårdguiden på telefon VGR Alingsås"
    }
  ]
}
  • Content: 
    .vgr-search-card {
  margin-bottom: .625rem;
  padding: 1rem .75rem;
  background: $color-white;

  $headline-size: 1.125rem;
  $meta-size: 14px;
  $meta-size-smaller: 12px;
  $meta-color: #0c6725;
  $excerpt-size: 14px;

  p {
    font-family: $secondary-font-stack;
    font-size: 14px;
    max-width: none;
  }

  [aria-expanded=true] {
    display: block;
  }

  [aria-expanded=false] {
    display: none;
  }

  &--panel {
    box-shadow: 0 1px 3px rgba($color-black, .2);

    @media screen and (min-width:0\0) {
        /* IE9 and IE10 */
        box-shadow: 0 1px 10px rgba($color-black, .2);
    }
  }

  &__folded {
    display: none;
    padding-top: 0.825rem;
    border-top: 1px solid $color-gray-lighter;
  }

  &__headline {
    margin: 0;
    padding: 8px 0 0 0;
    font-weight: 100;
    font-size: $large-font-size;
    line-height: 140%;

    &--white {
      color: #fff;
      padding: 0px 0 0 0;
      font-weight: 100;

      a:link,
      a:focus,
      a:visited {
        color: #fff;
      }
    }
  }

  &__image-holder {
    position: relative;
    float: left;
    margin: .5rem;
    width: 3.75rem;
    height: 3.75rem;
  }

  &__image-container {
    border-radius: 100%;
    overflow: hidden;
    width: 3.75rem;
    height: 3.75rem;
    position: relative;
  }

  &__image {
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50%;
    margin-left: -50%;
  }

  &__status {
    position: absolute;
    right: 2px;
    bottom: 2px;
    width: 16px;
    height: 16px;
    overflow: hidden;

    svg {
      width: 100%;
      height: 100%;
      position: absolute;
      margin: 0;
      padding: 0;
      top: 0;
      left: 0;
      shape-rendering: auto;
    }
  }

  &__introduction {
    display: block;
    overflow: hidden;
    padding: 9px 0px 6px 0px;
  }

  &__date {
    color: $meta-color;
    font-size: 14px;
  }

  &__source {
    display: inline;
    color: $meta-color;
    font-size: 14px;
  }

  &__excerpt {
    margin: 0;
    font-size: $excerpt-size;
  }

  &__meta {
    margin: 0;
    font-size: 14px;
    line-height: 140%;
  }

  &__placement {
    display: inline;
    padding-right: 4px;
  }

  &__meta-toggle-btn {
    font-size: $meta-size-smaller;
    color: #3796d7;
    padding-right: 6px;

    span {
      &:hover {
        cursor: pointer;
        text-decoration: underline;
        color: lighten( #3796d7, 5%);
      }
    }

    &__expand-button__close {
      display: none;
    }

    &__expand-button__open {
      display: inline-block;
    }

    svg {
      fill: #EBEBEB;
      shape-rendering: auto;
    }
  }
}

.vgr-search-card__header {
    width: calc(100% + 1.5rem);
    background: #004E7D;
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .05);
    color: #fff;

    &--photo {
      margin: -1rem -.75rem 0;
    }
  }

  .vgr-search-card--bestbet {
    .vgr-search-card__header {
      background: #004674;
      color: #fff;

      a {
        color: inherit;
      }
    }
  }

  .vgr-search-card__multi-employee {
    margin: 0 -.75rem;
    padding: .5rem .5rem .5rem .5rem;
    background-color: #E6EDF2;
    font-size: 14px;
    vertical-align: top;

    [aria-expanded=true] {
      display: block;
    }

    [aria-expanded=false] {
      display: none;
    }

    svg {
      vertical-align: top;
      padding-top: .1rem;
      padding-right: .2rem;
      padding-bottom: .5rem;
      vertical-align: top;
      display: inline;
      shape-rendering: auto;
    }

    &-label {
      vertical-align: top;
      color: $color-black;
      font-weight: bolder;
      margin-bottom: -4px;
      display: block;
    }

    &-information {
      vertical-align: top;
      margin-top: -.4rem;
      padding-top: 0;
      display: inline-block;
      overflow: hidden;
      width: 80%;

      a:hover {
        text-decoration: none;
      }
    }
  }

  .vgr-search-card__information {
    margin-top: 0.825rem;
    margin-bottom: 0.825rem;

    &--slim {
      margin-bottom: 0rem;
    }

    &[aria-hidden="true"] {
      display: none;
    }
  }

  .vgr-detail-list {
    display: table;
    margin: 0;
    width: 100%;
    font-size: 14px;
    line-height: 22px;

    &--bottom-border {
      border-bottom: 1px solid $color-gray-lighter;
    }

    &--compact {
      line-height: 1.4em;
    }

    &--margin-bottom {
      margin-bottom: 1.6rem;
    }

    &__title {
      color: #727272;
    }

    &__item {
      margin-left: 0;

      &--margin-bottom {
        line-height: 60px;
      }
    }

    &__label {
      padding-right: 10px;
      color: #000;
      font-weight: 700;
    }

    &__link {
      color: #3796d7;
      text-decoration: none;

      &--multi-employee {
        color: $text-color;
        text-decoration: underline;

        &:hover {
          text-decoration: underline;
        }
      }
    }

    &__group {
      display: inline-block;
      vertical-align: top;
      list-style: none;
      padding: 0;
      -webkit-margin-before: 0px;
      -webkit-margin-after: 0px;
      margin-bottom: 0.1em;
    }

    @media screen and (min-width: $small) {
      &__item {
        display: table-row;
      }

      &__label {
        display: table-cell;
        width: 130px;
      }

      &__group {}
    }
  }

  .vgr-link-list {
    font-size: 14px;

    &__heading {
      padding: 0.5rem 0 0.5rem 0;
      margin: 0;
      border-top: 1px solid $color-gray-lighter;
      color: #727272;
      font-size: 14px;
    }

    &__item {
      &:not(:first-child) {
        margin-top: 5px;
      }
    }

    &__link {
      display: block;
      padding: 8px;
      border: 1px solid #e3e3e3;
      background: #f6f6f6;
      line-height: 1;
    }
  }

  .vgr-search-card__map {
    margin: 0 -.75rem;
  }

  .vgr-toggle-content {
    list-style-type: none;
    -webkit-margin-before: 0px;
    -webkit-margin-after: 0px;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    -webkit-padding-start: 0px;

    &__container {
      padding: 0px;
      padding-top: 0.5rem;
      white-space: nowrap;
      display: none;
      color: #000;

      [aria-expanded=true] {
        display: block;
      }

      [aria-expanded=false] {
        display: none;
      }
    }

    &__list {
      margin: 0px;
      padding: 0px;
      white-space: nowrap;

      &--margin-top {
        margin-top: 0.825rem;
      }
    }

    &__item {
      display: block;
      background: #fff;
      font-size: 14px;
      line-height: 22px;
      padding: 0px;
      margin: 0px;
      margin-bottom: 30px;

      b {
        display: block;
      }
    }

    svg {
      margin: 0 10px 2px 0;
      shape-rendering: auto;
    }

    &__link {
      font-size: 14px;
      color: #3796d7;
      text-decoration: none;
      display: block;
      padding: 0.5rem 0 0.5rem 0;
      border-top: 1px solid $color-gray-lighter;
      width: 100%;

      &:hover {
        color: #3796d7;
        text-decoration: underline;
      }

      svg {
        margin: 0 6px -2px 0;
        shape-rendering: auto;
      }

      svg.rotate90 {
        margin-right: 10px;
        -webkit-transform: rotate(-90deg);
        -moz-transform: rotate(-90deg);
        -o-transform: rotate(-90deg);
        transform: rotate(-90deg);
        margin: 0 10px 2px 0;
      }

      span {
        background: #999;
        margin-right: 6px;
        margin-bottom: 4px;
        vertical-align: middle;
        border-radius: 100%;
        width: 14px;
        height: 14px;
        display: inline-block;

        svg {
          margin: 0;
          vertical-align: top;
          shape-rendering: auto;
        }
      }
    }

    .vgr-link-list__heading {
      cursor: pointer;

      &:hover {
        text-decoration: underline;
      }

      &[data-expanded] {
        svg {
          -webkit-transform: rotate(180deg);
          -moz-transform: rotate(180deg);
          -o-transform: rotate(180deg);
          transform: rotate(180deg);
          shape-rendering: auto;
        }
      }
    }
  }

  .vgr-search-card__expand-button {
    display: block;
    margin: 0 -.75rem -1rem;
    padding: 0.8rem;
    width: calc(100% + 1.5rem);
    border: 0;
    background: #EBEBEB;
    color: #5B5B5B;
    text-align: left;
    font-size: 14px;
    cursor: pointer;
    transition: background .1s ease-in-out;

    svg {
      margin-right: .5rem;
      vertical-align: middle;
      shape-rendering: auto;
    }

    &:hover {
      background: #efefef;
      text-decoration: underline;
    }

    &__open-label {
      display: inline;
    }

    &__close-label {
      display: none;
    }
  }

  .vgr-search-card__folded[aria-expanded="true"]+.vgr-search-card__expand-button .vgr-search-card__expand-button__open-label {
    display: none;
  }

  .vgr-search-card__folded[aria-expanded="true"]+.vgr-search-card__expand-button .vgr-search-card__expand-button__close-label {
    display: inline;
  }

  .vgr-search-card__meta[data-expanded] .vgr-search-card__meta-toggle-btn__expand-button__open {
    display: none;
  }

  .vgr-search-card__meta[data-expanded] .vgr-search-card__meta-toggle-btn__expand-button__close {
    display: inline-block;
  }

  .vgr-search-card__folded[aria-expanded="true"]+.vgr-search-card__expand-button svg {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
  }

  @media screen and (min-width:0\0) {
    /* IE9 and IE10 */
    .vgr-search-card--panel {
      box-shadow: 0 1px 10px rgba($color-black, .2);
    }
  }

  @supports (-ms-accelerator:true) {
    /* Microsoft Edge 13 */
    .vgr-search-card--panel {
      box-shadow: 0 1px 10px rgba($color-black, .2);
    }
  }

  _:-ms-lang(x), _:-webkit-full-screen, .vgr-search-card--panel {
    /* Microsoft Edge 12+ */
    box-shadow: 0 1px 10px rgba($color-black, .2);
   }
  • URL: /components/raw/search-card/_search-card.scss
  • Filesystem Path: components/components/search/search-card/_search-card.scss
  • Size: 9.9 KB

Seach Card Person

Ett söklistningskort med kontakt- och organisationsuppgifter för en enskild anställd.

Externa beroenden:

SCSS-variabler

$secondary-font-stack: Helvetica, Arial, sans-serif !default;
$large-font-size: 18px !default;
$small: 640px !default;
$text-color: #494746 !default;
$color-white: #fff !default;
$color-black: #000 !default;
$color-gray-lighter: #ddd !default;

Se SCSS-kod under fliken “Assets” i menyn ovan

HTML

N/A

JAVASCRIPT

N/A

ÖVRIGT

N/A

Designreferenser:

Design Desktop: https://xd.adobe.com/view/06ce1fa0-a13f-49e4-9606-01547d5220a3/

Design Mobile: https://xd.adobe.com/view/48872f8c-db79-4e69-8f14-92ad56f9cb7f/

Kompilerad CSS:

  .vgr-search-card {
    margin-bottom: .625rem;
    padding: 1rem .75rem;
    background: #fff;
  }
  .vgr-search-card p {
      font-family: Helvetica, Arial, sans-serif;
      font-size: 14px;
      max-width: none;
  }
  .vgr-search-card [aria-expanded=true] {
      display: block;
  }
  .vgr-search-card [aria-expanded=false] {
      display: none;
  }
  .vgr-search-card–panel {
      -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  }
  .vgr-search-cardfolded {
      display: none;
      padding-top: 0.825rem;
      border-top: 1px solid #ddd;
  }
  .vgr-search-cardheadline {
      margin: 0;
      padding: 8px 0 0 0;
      font-weight: 100;
      font-size: 1.125rem;
      line-height: 140%;
  }
  .vgr-search-cardheadline–white {
      color: #fff;
      padding: 0px 0 0 0;
      font-weight: 100;
  }
  .vgr-search-cardheadline–white a:link,
  .vgr-search-cardheadline–white a:focus,
  .vgr-search-cardheadline–white a:visited {
      color: #fff;
  }
  .vgr-search-cardimage-holder {
      position: relative;
      float: left;
      margin: .5rem;
      width: 3.75rem;
      height: 3.75rem;
  }
  .vgr-search-cardimage-container {
      border-radius: 100%;
      overflow: hidden;
      width: 3.75rem;
      height: 3.75rem;
      position: relative;
  }
  .vgr-search-cardimage {
      width: 100%;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -50%;
      margin-left: -50%;
  }
  .vgr-search-cardstatus {
      position: absolute;
      right: 2px;
      bottom: 2px;
      width: 16px;
      height: 16px;
      overflow: hidden;
  }
  .vgr-search-cardstatus svg {
      width: 100%;
      height: 100%;
      position: absolute;
      margin: 0;
      padding: 0;
      top: 0;
      left: 0;
      shape-rendering: auto;
  }
  .vgr-search-cardintroduction {
      display: block;
      overflow: hidden;
      padding: 9px 0px 6px 0px;
  }
  .vgr-search-carddate {
      color: #0c6725;
      font-size: 14px;
  }
  .vgr-search-cardsource {
      display: inline;
      color: #0c6725;
      font-size: 14px;
  }
  .vgr-search-cardexcerpt {
      margin: 0;
      font-size: 14px;
  }
  .vgr-search-cardmeta {
      margin: 0;
      font-size: 14px;
      line-height: 140%;
  }
  .vgr-search-cardplacement {
      display: inline;
      padding-right: 4px;
  }
  .vgr-search-cardmeta-toggle-btn {
      font-size: 12px;
      color: #3796d7;
      padding-right: 6px;
  }
  .vgr-search-cardmeta-toggle-btn span:hover {
      cursor: pointer;
      text-decoration: underline;
      color: #4ca1db;
  }
  .vgr-search-cardmeta-toggle-btnexpand-buttonclose {
      display: none;
  }
  .vgr-search-cardmeta-toggle-btnexpand-buttonopen {
      display: inline-block;
  }
  .vgr-search-cardmeta-toggle-btn svg {
      fill: #EBEBEB;
      shape-rendering: auto;
  }
  .vgr-search-cardheader {
      width: calc(100% + 1.5rem);
      background: #004E7D;
      -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.05);
      box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.05);
      color: #fff;
  }
  .vgr-search-cardheader–photo {
      margin: -1rem -.75rem 0;
  }
  .vgr-search-card–bestbet .vgr-search-cardheader {
      background: #004674;
      color: #fff;
  }
  .vgr-search-card–bestbet .vgr-search-cardheader a {
      color: inherit;
  }
  .vgr-search-cardmulti-employee {
      margin: 0 -.75rem;
      padding: .5rem .5rem .5rem .5rem;
      background-color: #E6EDF2;
      font-size: 14px;
      vertical-align: top;
  }
  .vgr-search-cardmulti-employee [aria-expanded=true] {
      display: block;
  }
  .vgr-search-cardmulti-employee [aria-expanded=false] {
      display: none;
  }
  .vgr-search-cardmulti-employee svg {
      vertical-align: top;
      padding-top: .1rem;
      padding-right: .2rem;
      padding-bottom: .5rem;
      vertical-align: top;
      display: inline;
      shape-rendering: auto;
  }
  .vgr-search-cardmulti-employee-label {
      vertical-align: top;
      color: #000;
      font-weight: bolder;
      margin-bottom: -4px;
      display: block;
  }
  .vgr-search-cardmulti-employee-information {
      vertical-align: top;
      margin-top: -.4rem;
      padding-top: 0;
      display: inline-block;
      overflow: hidden;
      width: 80%;
  }
  .vgr-search-cardmulti-employee-information a:hover {
      text-decoration: none;
  }
  .vgr-search-cardinformation {
      margin-top: 0.825rem;
      margin-bottom: 0.825rem;
  }
  .vgr-search-cardinformation–slim {
      margin-bottom: 0rem;
  }
  .vgr-search-cardinformation[aria-hidden=”true”] {
      display: none;
  }

Kompilerad JavaScript:

  function Toggle(el) {
    var toggle = {};
    var element = el;
    var containerID = element.getAttribute(‘aria-controls’);
    var container = document.getElementById(containerID);

    toggle.init = function() {
        if (!container) {
            container = container || toggle.findContainer(element.parentNode);
            container = container || toggle.findContainer(element.parentNode.parentNode);
            container = container || toggle.findContainer(element.parentNode.parentNode.parentNode);
        }

        if (container) {
            toggle.addEvents();
        }
    };

    toggle.findContainer = function(node) {
        var found = node.getElementsByClassName(containerID);
        found = found ? found[0] : null;

        return found;
    };

    toggle.addEvents = function() {
        element.addEventListener(‘click’, this.onClick);
    };

    toggle.removeEvents = function() {
        element.removeEventListener(‘click’, this.onClick);
    };

    toggle.onClick = function(e) {
        if (e) {
            e.preventDefault();
            e.stopImmediatePropagation();
        }

        var expanded = container.getAttribute(‘aria-expanded’);
        if (expanded === ‘true’) {
            container.setAttribute(‘aria-expanded’, ‘false’);
            element.removeAttribute(‘data-expanded’);
        } else {
            container.setAttribute(‘aria-expanded’, ‘true’);
            element.setAttribute(‘data-expanded’, ‘’);
        }
    };

    toggle.kill = function() {
        this.removeEvents();
    };

    toggle.init();

    return toggle;
  }

Utvecklingslogg:

2018-02-23

  • Dokumentation: var och hur kan den tillämpas

2018-02-20

  • Kvalitetsgranskning av komponent

2018-01-12

  • Komponent implementerad i stilguiden

2017-12-12

  • Genomgång av skisser och eventuell funktionsbeskrivning

2017-02-12

  • Designleverans