VGR Styleguide

Block: Teaser 

<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 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",
  "icon": "ikon",
  "text": "På Grebbestads folkhögskola har vi många olika kurser att välja bland!",
  "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.