Block: 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>
<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>
{
  "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"
    }
  ]
}
  • 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;
      }
    
      .vgr-icon {
        width: 1.5rem;
        height: 1.5rem;
        fill: currentColor;
        vertical-align: middle;
      }
    }
    
    .vgr-block--teaser,
    .vgr-block--teaser-linked {
    
      .vgr-block__text {
        color: #494746;
        padding: .7rem 1rem;
      }
    }
    
    .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/block/_block.scss
  • Size: 1.4 KB

There are no notes for this item.