VGR Styleguide

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.