<!-- 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-ce03" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-arrow-right"></use>
</svg></a>
        </div>
    </div>
</div>

<!-- Image Row (farbig) -->
<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 image-row__image--colored" 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 image-row__image--colored" 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 image-row__image--colored" 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 image-row__image--colored" 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 image-row__image--colored" 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-b118" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-arrow-right"></use>
</svg></a>
        </div>
    </div>
</div>

<!-- Different sorting -->
<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-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-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-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-2.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-c19d" 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 })
/* Image Row */
{
  "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"
    }
  ]
}

/* Image Row (farbig) */
{
  "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"
    }
  ],
  "colored": true
}

/* Different sorting */
{
  "more": "Alle zeigen",
  "images": [
    {
      "link": "http://example.com",
      "src": "/images/dummy/dummy-certificate-3.jpg"
    },
    {
      "link": "http://example.com",
      "src": "/images/dummy/dummy-certificate-1.jpg"
    },
    {
      "link": "http://example.com",
      "src": "/images/dummy/dummy-certificate-4.jpg"
    },
    {
      "link": "http://example.com",
      "src": "/images/dummy/dummy-certificate-2.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.