Block

Ready

HTML
View
Context
Assets
Info
Notes


        
        
            <!-- Default -->
<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>


        
            <!-- Contact -->
<div class="vgr-block vgr-block--contact">
    <div class="vgr-block__container">
        <a class="vgr-block__linkwrap" href="" aria-label="Monica Ögren">

            <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> Monica Ögren
                </h2>

                <span class="vgr-block__header-subtitle">Ledning, köks- och måltidsarbete</span>

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


        
            <!-- Teaser -->
<div class="vgr-block vgr-block--teaser">
    <div class="vgr-block__container">
        <a class="vgr-block__linkwrap" href="#" aria-label="Hälsa och vård">

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

            <div class="vgr-block__header">

                <h2 class="vgr-block__header-heading">

                    Hälsa och vård
                </h2>

            </div>

            <div class="vgr-block__content">

                <div class="vgr-block__text">
                    <p>Vi ansvarar för att du har tillgång till god hälso- och sjukvård i Västra Götaland. Det gäller allt från förebyggande friskvård till avancerad specialistvård på sjukhus, vård i hemmet och rehabilitering.</p>
                </div>

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

</div>


        
            <!-- List -->
<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#content-paste"></use></svg> Aktuellt
            </h2>

        </div>

        <div class="vgr-block__content">

            <div class="vgr-block__list-container">
                <ul class="vgr-block__list">

                    <li class="vgr-block__list-item">

                        <a href="/">Fåtal platser kvar!</a>

                        <p>Vi har nu endast ett fåtal platser kvar på vår fina sommarkurs i silversmide. Passa på att söka!</p>

                    </li>

                    <li class="vgr-block__list-item">

                        <a href="/">Sommarkurser släppta för sommaren 2017</a>

                        <p>Välkommen att söka till sommarens kurser!</p>

                    </li>

                    <li class="vgr-block__list-item">

                        <a href="/">Öppet hus</a>

                        <p>Lördag 8 april 2017</p>

                    </li>

                    <li class="vgr-block__list-item">

                        <a href="/">Ny distanskurs i textil</a>

                        <p>Välkommen till distanskurs med LIN-garner på Grebbestads folkhögskola.</p>

                    </li>

                    <li class="vgr-block__list-item">

                        <a href="/">Vad är en folkhögskola</a>

                        <p>En film om folkhögskolan</p>

                    </li>

                </ul>
            </div>

        </div>
    </div>

</div>


        <!-- Default -->
<div class="vgr-block vgr-block--{{ modifier }}">
  <div class="vgr-block__container">
    <a class="vgr-block__linkwrap" href="{{link}}" aria-label="{{title}}">
      {% if image %}
      <div class="vgr-block__image-container">
        <img class="vgr-block__image" src="{{ image | path }}" alt="{{ imageAlt }}">
      </div>
      {% endif %}
      {% if title %}
      <div class="vgr-block__header">
        {% if title %}
        <h2 class="vgr-block__header-heading">
          {% if icon %}
              {% render "@icon", iconData %}
          {% endif %}
          {{ title }}
        </h2>
        {% endif %}

        {% if subtitle %}
        <span class="vgr-block__header-subtitle">{{ subtitle }}</span>
        {% endif %}

      </div>
      {% endif %}
      <div class="vgr-block__content">

        {% if text %}
          <div class="vgr-block__text">
            <p>{{ text }}</p>
          </div>
        {% endif %}

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

</div>

<!-- Contact -->
<div class="vgr-block vgr-block--{{ modifier }}">
  <div class="vgr-block__container">
    <a class="vgr-block__linkwrap" href="{{link}}" aria-label="{{title}}">
      {% if image %}
      <div class="vgr-block__image-container">
        <img class="vgr-block__image" src="{{ image | path }}" alt="{{ imageAlt }}">
      </div>
      {% endif %}
      {% if title %}
      <div class="vgr-block__header">
        {% if title %}
        <h2 class="vgr-block__header-heading">
          {% if icon %}
              {% render "@icon", iconData %}
          {% endif %}
          {{ title }}
        </h2>
        {% endif %}

        {% if subtitle %}
        <span class="vgr-block__header-subtitle">{{ subtitle }}</span>
        {% endif %}

      </div>
      {% endif %}
      <div class="vgr-block__content">

        {% if text %}
          <div class="vgr-block__text">
            <p>{{ text }}</p>
          </div>
        {% endif %}

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

</div>

<!-- Teaser -->
<div class="vgr-block vgr-block--{{ modifier }}">
  <div class="vgr-block__container">
    <a class="vgr-block__linkwrap" href="{{link}}" aria-label="{{title}}">
      {% if image %}
      <div class="vgr-block__image-container">
        <img class="vgr-block__image" src="{{ image | path }}" alt="{{ imageAlt }}">
      </div>
      {% endif %}
      {% if title %}
      <div class="vgr-block__header">
        {% if title %}
        <h2 class="vgr-block__header-heading">
          {% if icon %}
              {% render "@icon", iconData %}
          {% endif %}
          {{ title }}
        </h2>
        {% endif %}

        {% if subtitle %}
        <span class="vgr-block__header-subtitle">{{ subtitle }}</span>
        {% endif %}

      </div>
      {% endif %}
      <div class="vgr-block__content">

        {% if text %}
          <div class="vgr-block__text">
            <p>{{ text }}</p>
          </div>
        {% endif %}

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

</div>

<!-- List -->
<div class="vgr-block vgr-block--{{ modifier }}">
  <div class="vgr-block__container">
    {% if image %}
    <div class="vgr-block__image-container">
      <img class="vgr-block__image" src="{{ image | path }}" alt="{{ imageAlt }}">
    </div>
    {% endif %}
    {% if title %}
    <div class="vgr-block__header">
      {% if title %}
      <h2 class="vgr-block__header-heading">
        {% if icon %}
            {% render "@icon", iconData %}
        {% endif %}
        {{ title }}
      </h2>
      {% endif %}

      {% if subtitle %}
      <span class="vgr-block__header-subtitle">{{ subtitle }}</span>
      {% endif %}

    </div>
    {% endif %}
    <div class="vgr-block__content">

      {% if list %}
      <div class="vgr-block__list-container">
        <ul  class="vgr-block__list">

          {% for item in list %}
          <li class="vgr-block__list-item">
            {% if item.linkText %}
            <a href="{{ item.url }}">{{ item.linkText }}</a>
            {% endif %}

            {% if item.description %}
            <p>{{ item.description }}</p>
            {% endif %}

          </li>
          {% endfor %}

        </ul>
      </div>
      {% endif %}

    </div>
  </div>


</div>


        
        
            /* Default */
{
  "title": "Title",
  "modifier": "default",
  "icon": "ikon",
  "text": "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."
}


        
            /* Contact */
{
  "title": "Monica Ögren",
  "modifier": "contact",
  "icon": "ikon",
  "text": "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.",
  "subtitle": "Ledning, köks- och måltidsarbete"
}


        
            /* Teaser */
{
  "title": "Hälsa och vård",
  "modifier": "teaser",
  "icon": null,
  "text": "Vi ansvarar för att du har tillgång till god hälso- och sjukvård i Västra Götaland. Det gäller allt från förebyggande friskvård till avancerad specialistvård på sjukhus, vård i hemmet och rehabilitering.",
  "image": "/temp/placeholder-block.jpg",
  "imageAlt": "Alternative text",
  "link": "#"
}


        
            /* List */
{
  "title": "Aktuellt",
  "modifier": "list",
  "icon": true,
  "text": "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.",
  "iconData": {
    "id": "content-paste"
  },
  "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"
    }
  ]
}

File:

Content:


                                /* ==========================================================================
   Components Block
   ========================================================================== */

.vgr-block {
  float: left;
  box-sizing: border-box;
  flex: none;
  padding-right: $gutter-width;
  padding-left: $gutter-width;

  &__container {
    word-wrap: break-word;
    font-size: $small-font-size;
    font-family: $secondary-font-stack;
    line-height: 1.4;
    margin-bottom: $gutter;
  }

  &__container {
    border: 1px solid #ddd;
    background-color: #fff;
  }

  &__header {
    position: relative;
    padding: .7rem 1rem;
    border-bottom: 2px solid #005c95;
  }

  &__header-heading {
    margin: 0;
    font-weight: 400;
  }

  &__image-container {

  }

  &__image {
    width: 100%;
    height: auto;
  }

  &__linkwrap {
    display: block;
    height: 100%;
    text-decoration: none;
    color: #494746;

    &:hover {
      color: #003d62;
      box-shadow: 1px 1px 15px rgba(0,0,0,.3);
      & .vgr-block__image { opacity: .95; }
    }

    &:focus {
      outline: 0;
      background-color: #fabb00;
      color: #000;
    }
  }

  &__text {
    font-family: $secondary-font-stack;
    padding: .7rem 1rem;
  }

  &__text p {
    font-family: $secondary-font-stack;
  }

  .vgr-icon {
    width: 1.5rem;
    height: 1.5rem;
    fill: currentColor;
    vertical-align: middle;
  }
}

.teaserblock__linkwrap:focus {
  outline: 0;
  background-color: #fabb00;
  color: #000;
}

.vgr-block--teaser,
.vgr-block--teaser-linked {

  .vgr-block__header-heading {
  }
}

.vgr-block__list-container {

  .vgr-block__list {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .vgr-block__list-item {
    padding: .7rem 1rem;

    p {
      margin-top: .3rem;

      &:last-child {
        margin-bottom: 0;
      }
    }
  }

  .vgr-block__list-item:not(:last-child) {
    border-bottom: 1px solid #ddd;
  }
}

URL: /components/raw/block/_block.scss
Filesystem Path: components/components/block/_block.scss
Size: 1.9 KB

Handle: @block
Variants (4): Default , Contact , Teaser , List
Preview:
- With layout
- Component only
Filesystem Path: components/components/block/block.html
References (1): @icon
Referenced by (2): @row, @footer

There are no notes for this item.

Block

Search

Search Card

Icons

General

Specific

Javascript

Logo

Extended Links