Stilguiden VGR

Footer 

<footer class="vgr-footer" role="contentinfo">
    <div class="vgr-container vgr-clearfix">
        <div class="vgr-row">

            <div class="col-md-4">

                <div class="vgr-block vgr-block--default">
                    <div class="vgr-block__container">
                        <div class="vgr-block__header">
                            <h2 class="vgr-block__header-heading">

                                <svg class="vgr-icon vgr-icon--"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/icons/sprite/icons.svg#file-type--mail"></use></svg> Kontakta oss
                            </h2>
                        </div>

                        <div class="vgr-block__content">
                            <div class="vgr-block__text">
                                <p>Västra Götalandsregionen<br>Regionens Hus<br>SE 462 80&nbsp; Vänersborg</p>
                                <p>Växel:&nbsp;010-441 00 00<br>E-post:&nbsp;<a href='mailto:post@vgregion.se' title='E-postadress'>post@vgregion.se</a>&nbsp;<br>Org nr: 232100-0131</p>
                                <p><a href='mailto:webbredaktion.vgr@vgregion.se' title='E-postadress'>Kontakta webbredaktionen&nbsp;</a></p>
                                <p id='ctl00_PageFooter_VGRFooter_GetContactLI'><a id='ctl00_PageFooter_VGRFooter_GetContactLink' href='/kontakt/'>Mer kontaktinformation</a></p>
                                <p><a href='/politik/kontaktuppgifter-till-politiker/'>Kontaktuppgifter till politiker</a></p>
                            </div>
                        </div>

                    </div>
                </div>
                <!-- <div class="vgr-block vgr-block--default">
  <div class="vgr-block__container">
    <a class="vgr-block__linkwrap" href="" aria-label="Title">
      
      
      <div class="vgr-block__header">
        
        <h2 class="vgr-block__header-heading">
          
              <svg class="vgr-icon vgr-icon--" ><use xlink:href="/icons/sprite/icons.svg#file-type--pdf"></use></svg>

          
          Title
        </h2>
        

        

      </div>
      
      <div class="vgr-block__content">

        
          <div class="vgr-block__text">
            <p>Folktandvården Västra Götaland finns i länets alla 49 kommuner och har 156 kliniker inom allmän- och specialisttandvård. Vi tar emot både vuxna och barn.</p>
          </div>
        

      </div>
    </a>
  </div>

</div>
 -->
            </div>

            <div class="col-md-4">

                <div class="vgr-block vgr-block--default">
                    <div class="vgr-block__container">
                        <div class="vgr-block__header">
                            <h2 class="vgr-block__header-heading">

                                Social media och bloggar
                            </h2>
                        </div>

                        <div class="vgr-block__content">
                            <div class="vgr-block__text">
                                <p>Vi finns huvudsakligen&nbsp;i de här sociala medierna:</p>
                                <p><a href='https://www.facebook.com/vastragotalandsregionen'>Facebook</a>&nbsp;|&nbsp;<a href='https://twitter.com/vgregion'>Twitter</a>&nbsp;|&nbsp;<a href='https://www.linkedin.com/company/vastra-gotalandsregionen'>LinkedIn</a>&nbsp;|&nbsp;
                                    <a
                                        href='https://www.youtube.com/user/VGregionen'>Youtube</a>
                                </p>
                                <p>Här finns <a href='/om-vgr/organisation-och-verksamhet/kommunikation/social-media/'>fler sociala medier</a>.</p>
                            </div>
                        </div>

                    </div>
                </div>
                <!-- <div class="vgr-block vgr-block--default">
  <div class="vgr-block__container">
    <a class="vgr-block__linkwrap" href="" aria-label="Title">
      
      
      <div class="vgr-block__header">
        
        <h2 class="vgr-block__header-heading">
          
              <svg class="vgr-icon vgr-icon--" ><use xlink:href="/icons/sprite/icons.svg#file-type--pdf"></use></svg>

          
          Title
        </h2>
        

        

      </div>
      
      <div class="vgr-block__content">

        
          <div class="vgr-block__text">
            <p>Folktandvården Västra Götaland finns i länets alla 49 kommuner och har 156 kliniker inom allmän- och specialisttandvård. Vi tar emot både vuxna och barn.</p>
          </div>
        

      </div>
    </a>
  </div>

</div>
 -->
            </div>

            <div class="col-md-4">

                <div class="vgr-block vgr-block--default">
                    <div class="vgr-block__container">
                        <div class="vgr-block__header">
                            <h2 class="vgr-block__header-heading">

                                Om Västra Götalandsregionen
                            </h2>
                        </div>

                        <div class="vgr-block__content">
                            <div class="vgr-block__text">
                                <p>Vi ansvarar för att du har tillgång till en bra sjukvård och vi skapar förutsättningar för en god hälsa för alla i Västra Götaland.&nbsp;Våra andra uppdrag är att arbeta med kultur, kollektivtrafik, tillväxt och en hållbar
                                    utveckling i Västra Götaland. Västra Götalandsregionen är en politiskt styrd organisation.</p>
                                <div><a href='/'><img src='/img/logotype-white.svg' alt='VGR Logo'</a></div>
                            </div>
                        </div>

                    </div>
                </div>
                <!-- <div class="vgr-block vgr-block--default">
  <div class="vgr-block__container">
    <a class="vgr-block__linkwrap" href="" aria-label="Title">
      
      
      <div class="vgr-block__header">
        
        <h2 class="vgr-block__header-heading">
          
              <svg class="vgr-icon vgr-icon--" ><use xlink:href="/icons/sprite/icons.svg#file-type--pdf"></use></svg>

          
          Title
        </h2>
        

        

      </div>
      
      <div class="vgr-block__content">

        
          <div class="vgr-block__text">
            <p>Folktandvården Västra Götaland finns i länets alla 49 kommuner och har 156 kliniker inom allmän- och specialisttandvård. Vi tar emot både vuxna och barn.</p>
          </div>
        

      </div>
    </a>
  </div>

</div>
 -->
            </div>

        </div>
    </div>
</footer>
 
<footer class="vgr-footer" role="contentinfo">
  <div class="vgr-container vgr-clearfix">
    <div class="vgr-row">
      {% for item in items %}
        <div class="col-md-4">

          <div class="vgr-block vgr-block--default">
            <div class="vgr-block__container">
              <div class="vgr-block__header">
                <h2 class="vgr-block__header-heading">
                  {% if item.icon %}
                    <svg class="vgr-icon vgr-icon--"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/icons/sprite/icons.svg#{{item.icon}}"></use></svg>
                  {% endif %}
                  {{ item.title }}
                </h2>
              </div>

              <div class="vgr-block__content">
                <div class="vgr-block__text">
                  {{ item.content }}
                </div>
              </div>

            </div>
          </div>
          <!-- {% render "@block", item.blockData, true %} -->
        </div>
      {% endfor %}
    </div>
  </div>
</footer>
 
{
  "items": [
    {
      "title": "Kontakta oss",
      "content": "<p>Västra Götalandsregionen<br>Regionens Hus<br>SE 462 80&nbsp; Vänersborg</p><p>Växel:&nbsp;010-441 00 00<br>E-post:&nbsp;<a href='mailto:post@vgregion.se' title='E-postadress'>post@vgregion.se</a>&nbsp;<br>Org nr: 232100-0131</p><p><a href='mailto:webbredaktion.vgr@vgregion.se' title='E-postadress'>Kontakta webbredaktionen&nbsp;</a></p><p id='ctl00_PageFooter_VGRFooter_GetContactLI'><a id='ctl00_PageFooter_VGRFooter_GetContactLink' href='/kontakt/'>Mer kontaktinformation</a></p><p><a href='/politik/kontaktuppgifter-till-politiker/'>Kontaktuppgifter till politiker</a></p>",
      "icon": "file-type--mail",
      "image": "/temp/block-image.jpg",
      "imageAlt": "Alternative text"
    },
    {
      "title": "Social media och bloggar",
      "content": "<p>Vi finns huvudsakligen&nbsp;i de här sociala medierna:</p><p><a href='https://www.facebook.com/vastragotalandsregionen'>Facebook</a>&nbsp;|&nbsp;<a href='https://twitter.com/vgregion'>Twitter</a>&nbsp;|&nbsp;<a href='https://www.linkedin.com/company/vastra-gotalandsregionen'>LinkedIn</a>&nbsp;|&nbsp;<a href='https://www.youtube.com/user/VGregionen'>Youtube</a></p><p>Här finns <a href='/om-vgr/organisation-och-verksamhet/kommunikation/social-media/'>fler sociala medier</a>.</p>",
      "icon": null,
      "image": "/temp/block-image.jpg",
      "imageAlt": "Alternative text"
    },
    {
      "title": "Om Västra Götalandsregionen",
      "content": "<p>Vi ansvarar för att du har tillgång till en bra sjukvård och vi skapar förutsättningar för en god hälsa för alla i Västra Götaland.&nbsp;Våra andra uppdrag är att arbeta med kultur, kollektivtrafik, tillväxt och en hållbar utveckling i Västra Götaland. Västra Götalandsregionen är en politiskt styrd organisation.</p><div><a href='/'><img src='/img/logotype-white.svg' alt='VGR Logo'</a></div>",
      "icon": null,
      "image": "/temp/block-image.jpg",
      "imageAlt": "Alternative text"
    }
  ]
}
  • Content: 
    .vgr-footer {
  padding: 1em 0;
  background: $theme-color;
  font-family: $secondary-font-stack;
  color: $color-white;

  .vgr-block {
    float: none;
    padding: 0;
  }

  .vgr-block__header {
    position: relative;
    padding: .7rem 0;
    border-bottom: 2px solid $color-white;
  }

  .vgr-block__header-heading {
    font-size: 1.2rem;
  }

  .vgr-block__container {
    border: none;
    background: transparent;
  }

  .vgr-block__text {
    padding: .7em 0;

    img { margin-top: 1rem; }
  }

  div, p, a {
    font-family: $secondary-font-stack;
    color: $color-white;
    font-size: .9rem;
  }
}
  • URL: /components/raw/footer/_footer.scss
  • Filesystem Path: components/navigations/footer/_footer.scss
  • Size: 614 Bytes

There are no notes for this item.