HIDA - Helmholtz Information and Data Science Academy

Two Cards: Two Cards small 

<div class="two-cards">
    <div class="two-cards__headline">
        <h2 class="headline headline--module-2">Mehr über HIDA</h2>
    </div>
    <div class="two-cards__inner">
        <div class="two-cards__item"><a class="card card--small" href="#">
                <div class="card__body">
                    <div class="card__body__inner">
                        <div class="card__kicker"><svg class="icon icon--map" viewBox="0 0 200 200" role="presentation">
                                <use xlink:href="#icon-map"></use>
                            </svg></div>
                        <div class="card__headline">
                            <h2 class="headline headline--2">HIDA-Eventspace für Ihre Veranstaltung</h2>
                        </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 card--small" href="#">
                <div class="card__body">
                    <div class="card__body__inner">
                        <div class="card__kicker"><svg class="icon icon--toolbox" viewBox="0 0 200 200" role="presentation">
                                <use xlink:href="#icon-toolbox"></use>
                            </svg></div>
                        <div class="card__headline">
                            <h2 class="headline headline--2">Data-Science Jobs bei Helmholtz</h2>
                        </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": "Mehr über HIDA"
  },
  "items": [
    {
      "use": "card--small",
      "settings": {
        "kickerIcon": "map",
        "headline": "HIDA-Eventspace für Ihre Veranstaltung"
      }
    },
    {
      "use": "card--small",
      "settings": {
        "kickerIcon": "toolbox",
        "headline": "Data-Science Jobs bei Helmholtz"
      }
    }
  ]
}
  • 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.