HIDA - Helmholtz Information and Data Science Academy

Two Cards: Two Cards 

<div class="two-cards">
    <div class="two-cards__headline">
        <h2 class="headline headline--module-2">Weitere Themen</h2>
    </div>
    <div class="two-cards__inner">
        <div class="two-cards__item"><a class="card" href="#">
                <div class="card__image">
                    <div class="image loading" style="padding-top: 100%;"><noscript><img class="image__fallback" alt="Alternativ-Text" width="610" height="610" src="https://via.placeholder.com/610x610/A0A0A6/FFFFFF.png?text=610x610" /></noscript><img class="image__img js-lazyload" alt="Alternativ-Text" width="610" height="610" data-src="https://via.placeholder.com/610x610/A0A0A6/FFFFFF.png?text=610x610" /></div>
                </div>
                <div class="card__body">
                    <div class="card__body__inner">
                        <div class="card__headline">
                            <h2 class="headline headline--2">Eine Headline</h2>
                        </div>
                        <div class="card__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.</div>
                        <div class="card__icons"><span class="card__icons__item"><svg class="icon icon--arrow-right" viewBox="0 0 200 200" role="presentation">
                                    <use xlink:href="#icon-arrow-right"></use>
                                </svg></span></div>
                    </div>
                </div>
            </a></div>
        <div class="two-cards__item"><a class="card" href="#">
                <div class="card__image">
                    <div class="image loading" style="padding-top: 100%;"><noscript><img class="image__fallback" alt="Alternativ-Text" width="610" height="610" src="https://via.placeholder.com/610x610/A0A0A6/FFFFFF.png?text=610x610" /></noscript><img class="image__img js-lazyload" alt="Alternativ-Text" width="610" height="610" data-src="https://via.placeholder.com/610x610/A0A0A6/FFFFFF.png?text=610x610" /></div>
                </div>
                <div class="card__body">
                    <div class="card__body__inner">
                        <div class="card__headline">
                            <h2 class="headline headline--2">Eine Headline</h2>
                        </div>
                        <div class="card__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.</div>
                        <div class="card__icons"><span class="card__icons__item"><svg class="icon icon--arrow-right" viewBox="0 0 200 200" role="presentation">
                                    <use xlink:href="#icon-arrow-right"></use>
                                </svg></span></div>
                    </div>
                </div>
            </a></div>
    </div>
</div>
 
#{tag || 'div'}.two-cards()&attributes(attr)
  if headline
    .two-cards__headline
      +include('@headline--module-2', headline)
  .two-cards__inner
    each item in items
      .two-cards__item
        +include(`@${item.use}`, item.settings || {})
 
{
  "headline": {
    "text": "Weitere Themen"
  },
  "items": [
    {
      "use": "card"
    },
    {
      "use": "card"
    }
  ]
}
  • Content: 
    .two-cards {
  padding: 0 1.5rem;
  position: relative;
  z-index: 1;

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

  @include mq($from: xl) {
    padding: 0 9rem;
  }
}

.two-cards__headline {
  margin-bottom: 6rem;
  text-align: center;

  @include mq($from: l) {
    margin-bottom: 10rem;
  }
}

.two-cards__inner {
  margin: 0 auto;
  max-width: 61rem;

  @include mq($from: l) {
    display: flex;
    max-width: 127rem;
  }
}

.two-cards__item {
  @include mq($until: l) {
    &:first-child {
      margin-bottom: 6rem;
    }
  }

  @include mq($from: l) {
    padding: 0 2rem;
    width: 50%;
  }
}

.two-cards__item .card {
  width: 100%;
}

.two-cards__item .card--small {
  @include mq($from: l) {
    height: 100%;
  }
}
  • URL: /components/raw/two-cards/two-cards.scss
  • Filesystem Path: src/components/organisms/two-cards/two-cards.scss
  • Size: 739 Bytes

There are no notes for this item.