HIDA - Helmholtz Information and Data Science Academy

Logo Wall: Logo wall default 

<div class="logo-wall">
    <div class="logo-wall__inner">
        <div class="logo-wall__headline">
            <h2 class="headline headline--module-2">Unsere Partner</h2>
        </div>
        <div class="logo-wall__logos"><a class="logo-wall__item" href="#" title="Lorem ipsum dolor" target="_blank">
                <div class="image image--contain loading" style="padding-top: 50%;"><noscript><img class="image__fallback" alt="Alternativ-Text" width="160" height="80" src="../../images/content/logo-01.jpg" /></noscript><img class="image__img js-lazyload" alt="Alternativ-Text" width="160" height="80" data-src="../../images/content/logo-01.jpg" /></div>
            </a><a class="logo-wall__item" href="#" title="Lorem ipsum dolor" target="_blank">
                <div class="image image--contain loading" style="padding-top: 50%;"><noscript><img class="image__fallback" alt="Alternativ-Text" width="160" height="80" src="../../images/content/logo-02.jpg" /></noscript><img class="image__img js-lazyload" alt="Alternativ-Text" width="160" height="80" data-src="../../images/content/logo-02.jpg" /></div>
            </a><a class="logo-wall__item" href="#" title="Lorem ipsum dolor" target="_blank">
                <div class="image image--contain loading" style="padding-top: 50%;"><noscript><img class="image__fallback" alt="Alternativ-Text" width="160" height="80" src="../../images/content/logo-03.jpg" /></noscript><img class="image__img js-lazyload" alt="Alternativ-Text" width="160" height="80" data-src="../../images/content/logo-03.jpg" /></div>
            </a><a class="logo-wall__item" href="#" title="Lorem ipsum dolor" target="_blank">
                <div class="image image--contain loading" style="padding-top: 50%;"><noscript><img class="image__fallback" alt="Alternativ-Text" width="160" height="80" src="../../images/content/logo-04.jpg" /></noscript><img class="image__img js-lazyload" alt="Alternativ-Text" width="160" height="80" data-src="../../images/content/logo-04.jpg" /></div>
            </a><a class="logo-wall__item" href="#" title="Lorem ipsum dolor" target="_blank">
                <div class="image image--contain loading" style="padding-top: 50%;"><noscript><img class="image__fallback" alt="Alternativ-Text" width="160" height="80" src="../../images/content/logo-03.jpg" /></noscript><img class="image__img js-lazyload" alt="Alternativ-Text" width="160" height="80" data-src="../../images/content/logo-03.jpg" /></div>
            </a><a class="logo-wall__item" href="#" title="Lorem ipsum dolor" target="_blank">
                <div class="image image--contain loading" style="padding-top: 50%;"><noscript><img class="image__fallback" alt="Alternativ-Text" width="160" height="80" src="../../images/content/logo-02.jpg" /></noscript><img class="image__img js-lazyload" alt="Alternativ-Text" width="160" height="80" data-src="../../images/content/logo-02.jpg" /></div>
            </a><a class="logo-wall__item" href="#" title="Lorem ipsum dolor" target="_blank">
                <div class="image image--contain loading" style="padding-top: 50%;"><noscript><img class="image__fallback" alt="Alternativ-Text" width="160" height="80" src="../../images/content/logo-03.jpg" /></noscript><img class="image__img js-lazyload" alt="Alternativ-Text" width="160" height="80" data-src="../../images/content/logo-03.jpg" /></div>
            </a><a class="logo-wall__item" href="#" title="Lorem ipsum dolor" target="_blank">
                <div class="image image--contain loading" style="padding-top: 50%;"><noscript><img class="image__fallback" alt="Alternativ-Text" width="160" height="80" src="../../images/content/logo-04.jpg" /></noscript><img class="image__img js-lazyload" alt="Alternativ-Text" width="160" height="80" data-src="../../images/content/logo-04.jpg" /></div>
            </a><a class="logo-wall__item" href="#" title="Lorem ipsum dolor" target="_blank">
                <div class="image image--contain loading" style="padding-top: 50%;"><noscript><img class="image__fallback" alt="Alternativ-Text" width="160" height="80" src="../../images/content/logo-01.jpg" /></noscript><img class="image__img js-lazyload" alt="Alternativ-Text" width="160" height="80" data-src="../../images/content/logo-01.jpg" /></div>
            </a><a class="logo-wall__item" href="#" title="Lorem ipsum dolor" target="_blank">
                <div class="image image--contain loading" style="padding-top: 50%;"><noscript><img class="image__fallback" alt="Alternativ-Text" width="160" height="80" src="../../images/content/logo-02.jpg" /></noscript><img class="image__img js-lazyload" alt="Alternativ-Text" width="160" height="80" data-src="../../images/content/logo-02.jpg" /></div>
            </a><a class="logo-wall__item" href="#" title="Lorem ipsum dolor" target="_blank">
                <div class="image image--contain loading" style="padding-top: 50%;"><noscript><img class="image__fallback" alt="Alternativ-Text" width="160" height="80" src="../../images/content/logo-04.jpg" /></noscript><img class="image__img js-lazyload" alt="Alternativ-Text" width="160" height="80" data-src="../../images/content/logo-04.jpg" /></div>
            </a><a class="logo-wall__item" href="#" title="Lorem ipsum dolor" target="_blank">
                <div class="image image--contain loading" style="padding-top: 50%;"><noscript><img class="image__fallback" alt="Alternativ-Text" width="160" height="80" src="../../images/content/logo-01.jpg" /></noscript><img class="image__img js-lazyload" alt="Alternativ-Text" width="160" height="80" data-src="../../images/content/logo-01.jpg" /></div>
            </a></div>
    </div>
</div>
 
//- Render logo-wall
#{tag || 'div'}.logo-wall(
  class=classNames(
    isSingle && 'logo-wall--single'
  )
)&attributes(attr)
  .logo-wall__inner
    if headline
      .logo-wall__headline
        +include('@headline--module-2', { text: headline })
    .logo-wall__logos
      each item in items
        a.logo-wall__item(href=item.href, title=item.title, target=item.target)
          +include('@image', {
            src: item.src,
            width: item.width,
            height: item.height,
            alt: item.alt,
            contain: true
          })
 
{
  "headline": "Unsere Partner",
  "items": [
    {
      "href": "#",
      "target": "_blank",
      "title": "Lorem ipsum dolor",
      "src": "/images/content/logo-01.jpg",
      "width": 160,
      "height": 80,
      "alt": "Alternativ-Text"
    },
    {
      "href": "#",
      "target": "_blank",
      "title": "Lorem ipsum dolor",
      "src": "/images/content/logo-02.jpg",
      "width": 160,
      "height": 80,
      "alt": "Alternativ-Text"
    },
    {
      "href": "#",
      "target": "_blank",
      "title": "Lorem ipsum dolor",
      "src": "/images/content/logo-03.jpg",
      "width": 160,
      "height": 80,
      "alt": "Alternativ-Text"
    },
    {
      "href": "#",
      "target": "_blank",
      "title": "Lorem ipsum dolor",
      "src": "/images/content/logo-04.jpg",
      "width": 160,
      "height": 80,
      "alt": "Alternativ-Text"
    },
    {
      "href": "#",
      "target": "_blank",
      "title": "Lorem ipsum dolor",
      "src": "/images/content/logo-03.jpg",
      "width": 160,
      "height": 80,
      "alt": "Alternativ-Text"
    },
    {
      "href": "#",
      "target": "_blank",
      "title": "Lorem ipsum dolor",
      "src": "/images/content/logo-02.jpg",
      "width": 160,
      "height": 80,
      "alt": "Alternativ-Text"
    },
    {
      "href": "#",
      "target": "_blank",
      "title": "Lorem ipsum dolor",
      "src": "/images/content/logo-03.jpg",
      "width": 160,
      "height": 80,
      "alt": "Alternativ-Text"
    },
    {
      "href": "#",
      "target": "_blank",
      "title": "Lorem ipsum dolor",
      "src": "/images/content/logo-04.jpg",
      "width": 160,
      "height": 80,
      "alt": "Alternativ-Text"
    },
    {
      "href": "#",
      "target": "_blank",
      "title": "Lorem ipsum dolor",
      "src": "/images/content/logo-01.jpg",
      "width": 160,
      "height": 80,
      "alt": "Alternativ-Text"
    },
    {
      "href": "#",
      "target": "_blank",
      "title": "Lorem ipsum dolor",
      "src": "/images/content/logo-02.jpg",
      "width": 160,
      "height": 80,
      "alt": "Alternativ-Text"
    },
    {
      "href": "#",
      "target": "_blank",
      "title": "Lorem ipsum dolor",
      "src": "/images/content/logo-04.jpg",
      "width": 160,
      "height": 80,
      "alt": "Alternativ-Text"
    },
    {
      "href": "#",
      "target": "_blank",
      "title": "Lorem ipsum dolor",
      "src": "/images/content/logo-01.jpg",
      "width": 160,
      "height": 80,
      "alt": "Alternativ-Text"
    }
  ],
  "text": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua."
}
  • Content: 
    .logo-wall {
  background: #fff;
  position: relative;
}

.logo-wall__inner {
  position: relative;
  z-index: 1;
}

.logo-wall__headline {
  margin-bottom: 5rem;
  text-align: center;

  @include mq($from: m) {
    margin-bottom: 8rem;
  }
}

.logo-wall__logos {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: -3rem;

  @include mq($from: m) {
    margin: -4rem -3rem;
  }
}

.logo-wall__item {
  display: inline-block;
  margin: 3rem;

  @include mq($from: m) {
    margin: 4rem 3rem;
  }
}

.logo-wall__item .image {
  height: 8rem;
  width: 16rem;

  .logo-wall--single & {
    height: 8rem;
    width: 24rem;
  }
}
  • URL: /components/raw/logo-wall/logo-wall.scss
  • Filesystem Path: src/components/molecules/logo-wall/logo-wall.scss
  • Size: 669 Bytes

There are no notes for this item.