hkk Frontend 2017

Image Row: Image Row 

<div class="image-row">
    <div class="image-row__inner">
        <div class="image-row__item">
            <a class="image-row__item-link" href="http://example.com"><img class="image-row__image" src="/images/dummy/dummy-certificate-1.jpg" /></a>
        </div>
        <div class="image-row__item">
            <a class="image-row__item-link" href="http://example.com"><img class="image-row__image" src="/images/dummy/dummy-certificate-2.jpg" /></a>
        </div>
        <div class="image-row__item">
            <a class="image-row__item-link" href="http://example.com"><img class="image-row__image" src="/images/dummy/dummy-certificate-3.jpg" /></a>
        </div>
        <div class="image-row__item">
            <a class="image-row__item-link" href="http://example.com"><img class="image-row__image" src="/images/dummy/dummy-certificate-4.jpg" /></a>
        </div>
        <div class="image-row__item">
            <a class="image-row__item-link" href="http://example.com"><img class="image-row__image" src="/images/dummy/dummy-certificate-5.jpg" /></a>
        </div>
        <div class="image-row__more"><a class="teaser-link" href=""><span class="teaser-link__inner">Alle zeigen</span>
<svg class="icon icon--arrow-right" id="icon-3b98" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-arrow-right"></use>
</svg></a>
        </div>
    </div>
</div>
 
-
  //- Prepare attr object
  imageAttr = attr || {};
  imageAttr.class = classList(imageAttr.class);

  //- Set hidden content option
  if (colored) imageAttr.class.push('image-row__image--colored');

//- Render image row
.image-row
  .image-row__inner
    //- Images
    if images
      each image in images
        .image-row__item
          a.image-row__item-link(href=image.link)
            img.image-row__image&attributes(imageAttr)(src=image.src)
  
    //- More link
    if more
      .image-row__more
        != include('@teaser-link', { text: more })
 
{
  "more": "Alle zeigen",
  "images": [
    {
      "link": "http://example.com",
      "src": "/images/dummy/dummy-certificate-1.jpg"
    },
    {
      "link": "http://example.com",
      "src": "/images/dummy/dummy-certificate-2.jpg"
    },
    {
      "link": "http://example.com",
      "src": "/images/dummy/dummy-certificate-3.jpg"
    },
    {
      "link": "http://example.com",
      "src": "/images/dummy/dummy-certificate-4.jpg"
    },
    {
      "link": "http://example.com",
      "src": "/images/dummy/dummy-certificate-5.jpg"
    }
  ]
}
  • Content: 
    .image-row {
  margin: 3rem 0;

  @include mq($from: m) {
    margin: 7rem 0;
  }
}

.image-row__inner {
  align-items: center;
  display: flex;
  justify-content: space-between;

  @include mq($until: m) {
    flex-wrap: wrap;

    &::after {
      content: '';
      width: 100%;
    }
  }
}

.image-row__item {
  flex-basis: 33.33%;
  text-align: center;

  @include mq($until: m) {
    padding: 0 1rem;

    &:nth-child(n + 4) {
      display: none;
    }
  }

  @include mq($until: l) {
    &:nth-child(n + 5) {
      display: none;
    }
  }

  @include mq($from: m) {
    max-width: 100%;
    padding: 0 1.5rem;
  }

  @include mq($from: l) {
    padding: 0 3rem;
  }
}

.image-row__more {
  padding: 0;

  @include mq($until: m) {
    margin-top: 2rem;
    order: 1;
  }

  @include mq($from: m) {
    min-width: 10rem;
  }

  @include mq($from: l) {
    min-width: 16rem;
    padding: 0 3rem;
  }
}

.image-row__image {
  filter: grayscale(1);
  max-height: 8rem;
  opacity: 0.37;
  transition: all 0.15s ease;

  &:hover {
    filter: none;
    opacity: 1;
  }
}

.image-row__image--colored {
  filter: none;
  opacity: 1;
}
  • URL: /components/raw/image-row/image-row.scss
  • Filesystem Path: src/components/organisms/image-row/image-row.scss
  • Size: 1.1 KB

There are no notes for this item.