<div class="vgr-block vgr-block--teaser-linked">
    <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">

                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 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 text %}
      <div class="vgr-block__text">
        <p>{{ text }}</p>
      </div>
      {% endif %}

    </div>
  </div>


</div>
{
  "title": "Sök till våra kurser",
  "modifier": "teaser-linked",
  "icon": null,
  "text": "På Grebbestads folkhögskola har vi många olika kurser att välja bland!",
  "iconData": {
    "id": "content-paste"
  },
  "image": "/temp/block-image.jpg",
  "imageAlt": "Alternative text"
}
  • 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.