Stilguiden VGR

Hitta 

<a href="#main-content" class="vgr-skip-link">Direkt till huvudinnehållet</a>

<!-- <nav class="vgr-navbar" role="navigation">
  <div class="vgr-container">
    <div class="vgr-row">
      <div class="col-xs-12 col-md-10 col-lg-8 vgr-centered">
        <ul class="vgr-navbar__list vgr-unstyled-list">
          
            
            <li class="vgr-navbar__list-item">
              <a href="/" class="vgr-navbar__list-link">Hjälp</a>
            </li>
            
          
            
              <li class="vgr-navbar__list-item vgr-navbar__list-item--current">
                <a href="/" class="vgr-navbar__list-link" aria-current="page">Sparade sökningar</a>
              </li>
            
          
            
            <li class="vgr-navbar__list-item">
              <a href="/" class="vgr-navbar__list-link">Synpunkter</a>
            </li>
            
          
            
            <li class="vgr-navbar__list-item">
              <a href="/" class="vgr-navbar__list-link">Sponsra en sida</a>
            </li>
            
          
        </ul>
      </div>
    </div>
  </div>
</nav>
 -->

<header role="banner">
    <div class="vgr-header-search">
        <div class="vgr-container">
            <div class="vgr-row">
                <div class="col-xs-12 col-md-10 col-lg-8 vgr-centered">
                    <div class="vgr-logo vgr-logo--svg vgr-logo--">
                        <a href="/" aria-label="Gå till startsidan">
    <img src="/img/logotype-white.svg" alt="Logotype">
  </a>
                    </div>

                    <div class="search__wrapper">
                        <form method="get" class="search__form">
                            <label class="search__label">
          <span class="vgr-visually-hidden">Sök på webbplatsen</span>
          <input type="search" name="q" placeholder="Sök på webbplatsen" class="search-input-box search__field">
      </label>

                            <button class="vgr-button" type="submit">
<svg class="vgr-icon vgr-icon--" ><use xlink:href="/icons/sprite/icons.svg#search"></use></svg>
 
</button>

                        </form>
                    </div>

                    <nav class="vgr-search-utilities">
                        <ul class="vgr-search-utilities__list vgr-unstyled-list">
                            <li class="vgr-search-utilities__item">
                                <a href="/" class="vgr-search-utilities__link">Hjälp</a>
                            </li>
                            <li class="vgr-search-utilities__item vgr-search-utilities__item--current">
                                <a href="/" class="vgr-search-utilities__link" aria-current="page">Sparade sökningar</a>
                            </li>
                            <li class="vgr-search-utilities__item">
                                <a href="/" class="vgr-search-utilities__link">Synpunkter</a>
                            </li>
                            <li class="vgr-search-utilities__item">
                                <a href="/" class="vgr-search-utilities__link">Sponsra en sida</a>
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
    </div>
</header>

<nav class="vgr-tabs" role="navigation">
    <div class="vgr-container">
        <div class="vgr-row">
            <div class="col-xs-12 col-md-10 col-lg-8 vgr-centered">
                <ul class="vgr-tabs__list vgr-unstyled-list">

                    <li class="vgr-tabs__list-item">
                        <a href="/" class="vgr-tabs__list-link">Webb</a>
                    </li>

                    <li class="vgr-tabs__list-item vgr-tabs__list-item--current">
                        <a href="/" class="vgr-tabs__list-link" aria-current="page">Dokument</a>
                    </li>

                    <li class="vgr-tabs__list-item">
                        <a href="/" class="vgr-tabs__list-link">Medarbetare</a>
                    </li>

                    <li class="vgr-tabs__list-item">
                        <a href="/" class="vgr-tabs__list-link">Organisation</a>
                    </li>

                </ul>
            </div>
        </div>
    </div>
</nav>

<main id="main-container" role="main">
    <div class="vgr-container">
        <div class="vgr-row">
            <div class="col-md-10 col-lg-8 vgr-centered">
                <div class="vgr-search-information">
                    <p>Ungefär 1490 resultat</p>
                    <p>Menade du <a href="/">evelyn.stolfer@vgregion.se</a></p>
                </div>
                <ul class="vgr-search-results vgr-unstyled-list">

                    <li class="vgr-search-results__item">
                        <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>

                    </li>

                    <li class="vgr-search-results__item">
                        <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>

                    </li>

                    <li class="vgr-search-results__item">
                        <div class="vgr-search-card vgr-search-card--panel">
                            <h2 class="vgr-search-card__headline">
                                <a href="/">Pressmeddelanden - Västra Götalandsregionen</a>
                            </h2>
                            <time class="vgr-search-card__date" datetime="2015-08-19">19 augusti 2015</time> -
                            <p class="vgr-search-card__source">Västra Götalandsregionens webbplats</p>
                            <p class="vgr-search-card__excerpt">Lorem <mark>Evelyn</mark> ipsum dolor sit amet, consectetur adipiscing elit. Phasellus laoreet tristique erat a tincidunt. Morbi eleifend augue sit amet nunc vulputate finibus…</p>
                        </div>

                    </li>

                    <li class="vgr-search-results__item">
                        <div class="vgr-search-card vgr-search-card--panel">
                            <h2 class="vgr-search-card__headline">
                                <a href="/">Maria C. Webre</a>
                            </h2>
                            <time class="vgr-search-card__date" datetime="2015-08-19">19 augusti 2015</time> -
                            <p class="vgr-search-card__source">Västra Götalandsregionen</p>
                            <p class="vgr-search-card__excerpt">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus laoreet tristique erat a tincidunt. Morbi eleifend augue sit amet nunc vulputate finibus…</p>
                        </div>

                    </li>

                    <li class="vgr-search-results__item">
                        <div class="vgr-search-card vgr-search-card--panel">
                            <h2 class="vgr-search-card__headline">
                                <a href="/">Global Assurance Facilitator</a>
                            </h2>
                            <time class="vgr-search-card__date" datetime="2015-08-19">19 augusti 2015</time> -
                            <p class="vgr-search-card__source">Västra Götalandsregionen</p>
                            <p class="vgr-search-card__excerpt">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus laoreet tristique erat a tincidunt. Morbi eleifend augue sit amet nunc vulputate finibus…</p>
                        </div>

                    </li>

                    <li class="vgr-search-results__item">
                        <div class="vgr-search-card vgr-search-card--panel">
                            <h2 class="vgr-search-card__headline">
                                <a href="/">Internal Communications Architect</a>
                            </h2>
                            <time class="vgr-search-card__date" datetime="2015-08-19">19 augusti 2015</time> -
                            <p class="vgr-search-card__source">Västra Götalandsregionen</p>
                            <p class="vgr-search-card__excerpt">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus laoreet tristique erat a tincidunt. Morbi eleifend augue sit amet nunc vulputate finibus…</p>
                        </div>

                    </li>

                    <li class="vgr-search-results__item">
                        <div class="vgr-search-card vgr-search-card--panel">
                            <h2 class="vgr-search-card__headline">
                                <a href="/">Corporate Program Consultant</a>
                            </h2>
                            <time class="vgr-search-card__date" datetime="2015-08-19">19 augusti 2015</time> -
                            <p class="vgr-search-card__source">Västra Götalandsregionen</p>
                            <p class="vgr-search-card__excerpt">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus laoreet tristique erat a tincidunt. Morbi eleifend augue sit amet nunc vulputate finibus…</p>
                        </div>

                    </li>

                    <li class="vgr-search-results__item">
                        <div class="vgr-search-card vgr-search-card--panel">
                            <h2 class="vgr-search-card__headline">
                                <a href="/">Forward Applications Manager</a>
                            </h2>
                            <time class="vgr-search-card__date" datetime="2015-08-19">19 augusti 2015</time> -
                            <p class="vgr-search-card__source">Västra Götalandsregionen</p>
                            <p class="vgr-search-card__excerpt">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus laoreet tristique erat a tincidunt. Morbi eleifend augue sit amet nunc vulputate finibus…</p>
                        </div>

                    </li>

                    <li class="vgr-search-results__item">
                        <div class="vgr-search-card vgr-search-card--panel">
                            <h2 class="vgr-search-card__headline">
                                <a href="/">Senior Paradigm Designer</a>
                            </h2>
                            <time class="vgr-search-card__date" datetime="2015-08-19">19 augusti 2015</time> -
                            <p class="vgr-search-card__source">Västra Götalandsregionen</p>
                            <p class="vgr-search-card__excerpt">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus laoreet tristique erat a tincidunt. Morbi eleifend augue sit amet nunc vulputate finibus…</p>
                        </div>

                    </li>

                    <li class="vgr-search-results__item">
                        <div class="vgr-search-card vgr-search-card--panel">
                            <h2 class="vgr-search-card__headline">
                                <a href="/">Global Optimization Agent</a>
                            </h2>
                            <time class="vgr-search-card__date" datetime="2015-08-19">19 augusti 2015</time> -
                            <p class="vgr-search-card__source">Västra Götalandsregionen</p>
                            <p class="vgr-search-card__excerpt">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus laoreet tristique erat a tincidunt. Morbi eleifend augue sit amet nunc vulputate finibus…</p>
                        </div>

                    </li>

                    <li class="vgr-search-results__item">
                        <div class="vgr-search-card vgr-search-card--panel">
                            <h2 class="vgr-search-card__headline">
                                <a href="/">Direct Intranet Executive</a>
                            </h2>
                            <time class="vgr-search-card__date" datetime="2015-08-19">19 augusti 2015</time> -
                            <p class="vgr-search-card__source">Västra Götalandsregionen</p>
                            <p class="vgr-search-card__excerpt">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus laoreet tristique erat a tincidunt. Morbi eleifend augue sit amet nunc vulputate finibus…</p>
                        </div>

                    </li>

                    <li class="vgr-search-results__item">
                        <div class="vgr-search-card vgr-search-card--panel">
                            <h2 class="vgr-search-card__headline">
                                <a href="/">Dynamic Configuration Assistant</a>
                            </h2>
                            <time class="vgr-search-card__date" datetime="2017-01-12">19 augusti 2015</time> -
                            <p class="vgr-search-card__source">Västra Götalandsregionen</p>
                            <p class="vgr-search-card__excerpt">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus laoreet tristique erat a tincidunt. Morbi eleifend augue sit amet nunc vulputate finibus…</p>
                        </div>

                    </li>

                </ul>
                <nav role="navigation" aria-label="Navigera bland sökresultaten">
                    <p id="" class="vgr-visually-hidden"></p>
                    <ol class="vgr-pagination" aria-labelledby="">

                        <li class="vgr-pagination__item vgr-pagination__item--icon vgr-pagination__item--prev">
                            <form action="/ftv-webbtidsbokning/AvailableAppointments/" method="get">
                                <input name="index" type="hidden" value="0">
                                <button aria-label="Föregående sida" class="vgr-button vgr-button--subtle" type="submit" disabled="">Föregående</button>
                            </form>
                        </li>

                        <li class="vgr-pagination__item vgr-pagination__item--num">
                            <form action="/ftv-webbtidsbokning/AvailableAppointments/" class="display-flex vgr-pagination__form" method="get">
                                <label for="pagination_numinput" class="vgr-pagination__text">Sida</label>
                                <input id="pagination_numinput" name="index" class="vgr-form__input vgr-pagination__numinput" type="number" min="1" max="17" value="1">
                                <div class="vgr-pagination__text vgr-pagination__text--block">
                                    av 17
                                </div>
                                <button aria-label="Gå till vald sida" class="vgr-button vgr-button--subtle" type="submit">Gå</button>
                            </form>
                        </li>

                        <li class="vgr-pagination__item vgr-pagination__item--icon vgr-pagination__item--next">
                            <form action="/ftv-webbtidsbokning/AvailableAppointments/" method="get">
                                <input name="index" type="hidden" value="2">
                                <button aria-label="Nästa sida" class="vgr-button vgr-button--subtle" type="submit">Nästa</button>
                            </form>
                        </li>

                    </ol>
                </nav>

            </div>
        </div>
    </div>
</main>
 
{% block main %}
  {% render '@skip-link' %}
  <!-- {% render "@navbar" %} -->

  <header role="banner">
    <div class="vgr-header-search">
      <div class="vgr-container">
        <div class="vgr-row">
          <div class="col-xs-12 col-md-10 col-lg-8 vgr-centered">
            {% render "@logo--svg--white" %}
            {% render "@search-bar" %}
            <nav class="vgr-search-utilities">
              <ul class="vgr-search-utilities__list vgr-unstyled-list">
                <li class="vgr-search-utilities__item">
                  <a href="/" class="vgr-search-utilities__link">Hjälp</a>
                </li>
                  <li class="vgr-search-utilities__item vgr-search-utilities__item--current">
                    <a href="/" class="vgr-search-utilities__link" aria-current="page">Sparade sökningar</a>
                  </li>
                <li class="vgr-search-utilities__item">
                  <a href="/" class="vgr-search-utilities__link">Synpunkter</a>
                </li>
                <li class="vgr-search-utilities__item">
                  <a href="/" class="vgr-search-utilities__link">Sponsra en sida</a>
                </li>
              </ul>
            </nav>
          </div>
        </div>
      </div>
    </div>
  </header>

  {% render "@tabs", tabList %}

  <main id="main-container" role="main">
    <div class="vgr-container">
      <div class="vgr-row">
        <div class="col-md-10 col-lg-8 vgr-centered">
          <div class="vgr-search-information">
            <p>Ungefär {{ searchItems }} resultat</p>
            <p>Menade du <a href="/">{{ didYouMean }}</a></p>
          </div>
          <ul class="vgr-search-results vgr-unstyled-list">
            {% for item in person %}
              <li class="vgr-search-results__item">
                {% render "@search-card--person" %}
              </li>
            {% endfor %}
            {% for item in searchResults %}
              <li class="vgr-search-results__item">
                {% render "@search-card--panel", item.resultList %}
              </li>
            {% endfor %}
          </ul>
          {% render "@standard-pagination" %}
        </div>
      </div>
    </div>
  </main>

{% endblock %}
 
{
  "searchItems": "1490",
  "didYouMean": "evelyn.stolfer@vgregion.se",
  "person": [
    {
      "headline": "12Lorem ipsum",
      "title": "1213131Applikationsspecialist",
      "expandable": true
    },
    {
      "headline": "12Lorem ipsum",
      "title": "1213131Applikationsspecialist",
      "expandable": true
    }
  ],
  "searchResults": [
    {
      "resultList": {
        "headline": "Pressmeddelanden - Västra Götalandsregionen",
        "modifier": "default",
        "url": "/",
        "datetime": "2015-08-19",
        "date": "19 augusti 2015",
        "source": "Västra Götalandsregionens webbplats",
        "excerpt": "Lorem <mark>Evelyn</mark> ipsum dolor sit amet, consectetur adipiscing elit. Phasellus laoreet tristique erat a tincidunt. Morbi eleifend augue sit amet nunc vulputate finibus…"
      }
    },
    {
      "resultList": {
        "headline": "Maria C. Webre",
        "url": "/",
        "datetime": "2015-08-19",
        "date": "19 augusti 2015",
        "modifier": "default",
        "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…"
      }
    },
    {
      "resultList": {
        "headline": "Global Assurance Facilitator",
        "url": "/",
        "datetime": "2015-08-19",
        "date": "19 augusti 2015",
        "modifier": "default",
        "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…"
      }
    },
    {
      "resultList": {
        "headline": "Internal Communications Architect",
        "url": "/",
        "datetime": "2015-08-19",
        "date": "19 augusti 2015",
        "modifier": "default",
        "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…"
      }
    },
    {
      "resultList": {
        "headline": "Corporate Program Consultant",
        "url": "/",
        "datetime": "2015-08-19",
        "date": "19 augusti 2015",
        "modifier": "default",
        "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…"
      }
    },
    {
      "resultList": {
        "headline": "Forward Applications Manager",
        "url": "/",
        "datetime": "2015-08-19",
        "date": "19 augusti 2015",
        "modifier": "default",
        "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…"
      }
    },
    {
      "resultList": {
        "headline": "Senior Paradigm Designer",
        "url": "/",
        "datetime": "2015-08-19",
        "date": "19 augusti 2015",
        "modifier": "default",
        "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…"
      }
    },
    {
      "resultList": {
        "headline": "Global Optimization Agent",
        "url": "/",
        "datetime": "2015-08-19",
        "date": "19 augusti 2015",
        "modifier": "default",
        "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…"
      }
    },
    {
      "resultList": {
        "headline": "Direct Intranet Executive",
        "url": "/",
        "datetime": "2015-08-19",
        "date": "19 augusti 2015",
        "modifier": "default",
        "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…"
      }
    },
    {
      "resultList": {
        "headline": "Dynamic Configuration Assistant",
        "url": "/",
        "datetime": "2017-01-12",
        "date": "19 augusti 2015",
        "modifier": "default",
        "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…"
      }
    }
  ]
}
  • Content: 
    .vgr-header-search {
  padding: 1rem 0;
  background: #005B97;

  .vgr-logo {
    padding-right: 15px;
    padding-left: 15px;
    justify-content: center;
  }

  .vgr-search-utilities__list {
    padding-right: 15px;
    padding-left: 15px;
    display: flex;
    justify-content: flex-end;
    flex-direction: row;

    & .vgr-search-utilities__item {
      padding: 0.5em 0.25em 0;
    }

    & .vgr-search-utilities__link {
      color: $color-white;
      text-decoration: none;
      font-size: 14px;

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

  .search__form .vgr-button { padding: 1.5rem; }
}

.vgr-search-information {
  padding: .75rem;
}

.vgr-search-information p,
.vgr-search-results p {
  font-size: 14px;
  font-family: $secondary-font-stack;
  margin: 0;
}
  • URL: /components/raw/hitta-medarbetare/_hitta-medarbetare.scss
  • Filesystem Path: components/templates/hitta-medarbetare/_hitta-medarbetare.scss
  • Size: 788 Bytes

Hitta medarbetare

Mall sammansatt av: @skip-link, @navbar, @logo–svg–white, @search-bar, @tabs, @search-card–person, @search-card–panel, @standard-pagination

Externa beroenden

SCSS

$color-white: #fff; $secondary-font-stack: Helvetica, Arial, sans-serif !default;

HTML

-

JAVASCRIPT

ES2015 Syntax (Babel). Beroende av toggle.js (finns i sin helhet längst ner på denns sida) eller script med motsvarande funktionalitet.)

ÖVRIGT
Designskisser desktop
Designskisser mobil

Stöds i vanligt förekommande moderna webbläsare samt >IE9.

JavaScript - toggle.js

  export default class toggle {
    constructor(element) {
        // Get the name of the element/container to be shown or hidden
        let containerID = element.getAttribute('aria-controls');

        // Find the actual element with that name based on ID
        let container = document.getElementById(containerID);

        if(!container) {
            // No element with that ID was found. Look for a class inside immediate parent instead
            container = container || this.findContainer(element.parentNode, containerID);
            container = container || this.findContainer(element.parentNode.parentNode, containerID);
            container = container || this.findContainer(element.parentNode.parentNode.parentNode, containerID);
        }

        if(container) {
            this.element = element;
            this.element.parentClass = this;
            this.container = container;
            this.addEvents();
        }
        else {
            throw new NoElementException('Element must be available in DOM');
        }
    }

    findContainer(node, containerID)
    {
        let found = node.getElementsByClassName(containerID);
        found = found ? found[0] : null;

        return found;
    }

    addEvents()
    {
        this.element.addEventListener('click', this.onClick);
    }

    removeEvents()
    {
        this.element.removeEventListener('click', this.onClick);
    }

    onClick(e)
    {
        if(e) {
            e.preventDefault();
            e.stopImmediatePropagation();
        }

        let element = this.parentClass.element;
        let container = this.parentClass.container;

        let transitionTime = element.getAttribute('data-transition-time');
        if (transitionTime) {
            container.classList.add('animating');
            setTimeout(() => container.classList.remove('animating'), parseInt(transitionTime));
        }

        let 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', '');
        }
    }

    kill()
    {
        removeEvents();
    }
}

Utvecklingslogg

2018-02-13

  • Komponent testad.