VGR Styleguide

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--list">
                    <div class="vgr-block__container">

                        <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> För dig som är
                            </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>
                    </div>

                </div>

            </div>

            <div class="col-md-4">
                <div class="vgr-block vgr-block--teaser">
                    <div class="vgr-block__container">

                        <div class="vgr-block__image-container">
                            <img class="vgr-block__image" src="../../temp/block-image.jpg" alt="Alternative text">
                        </div>

                        <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> Sök till våra kurser
                            </h2>

                        </div>

                        <div class="vgr-block__content">

                            <div class="vgr-block__text">
                                <p>På Grebbestads folkhögskola har vi många olika kurser att välja bland!</p>
                            </div>

                        </div>
                    </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">

                                <svg class="vgr-icon vgr-icon--"><use xlink:href="/icons/sprite/icons.svg#file-type--pdf"></use></svg> Kontakta våra kliniker
                            </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>
                    </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">
          {% render "@block", item.blockData, true %}
      </div>
      {% endfor %}
    </div>
  </div>
</footer>
 
{
  "items": [
    {
      "blockData": {
        "title": "För dig som är",
        "modifier": "list",
        "list": [
          {
            "url": "/",
            "linkText": "Fåtal platser kvar!",
            "description": "Vi har nu endast ett fåtal platser kvar på vår fina sommarkurs i silversmide. Passa på att söka!"
          },
          {
            "url": "/",
            "linkText": "Sommarkurser släppta för sommaren 2017",
            "description": "Välkommen att söka till sommarens kurser!"
          },
          {
            "url": "/",
            "linkText": "Öppet hus",
            "description": "Lördag 8 april 2017"
          },
          {
            "url": "/",
            "linkText": "Ny distanskurs i textil",
            "description": "Välkommen till distanskurs med LIN-garner på Grebbestads folkhögskola."
          },
          {
            "url": "/",
            "linkText": "Vad är en folkhögskola",
            "description": "En film om folkhögskolan"
          }
        ]
      }
    },
    {
      "blockData": {
        "title": "Sök till våra kurser",
        "modifier": "teaser",
        "text": "På Grebbestads folkhögskola har vi många olika kurser att välja bland!",
        "image": "/temp/block-image.jpg",
        "imageAlt": "Alternative text"
      }
    },
    {
      "blockData": {
        "title": "Kontakta våra kliniker",
        "modifier": "default"
      }
    }
  ]
}
  • Content: 
    .vgr-footer {
  padding: $gutter-width 0;
  background: $theme-color;
}
  • URL: /components/raw/footer/_footer.scss
  • Filesystem Path: components/footer/_footer.scss
  • Size: 73 Bytes

There are no notes for this item.