Two Cards

Design

HTML
View
Context
Assets
Info
Notes


        
        
            <!-- 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>


        
            <!-- 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 || {})


        
        
            /* Two Cards */
{
  "headline": {
    "text": "Weitere Themen"
  },
  "items": [
    {
      "use": "card"
    },
    {
      "use": "card"
    }
  ]
}


        
            /* Two Cards small */
{
  "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"
      }
    }
  ]
}

File:

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

Handle: @two-cards
Variants (2): Two Cards , Two Cards small
Preview:
- With layout
- Component only
Filesystem Path: src/components/organisms/two-cards/two-cards.pug
References (1): @headline--module-2

There are no notes for this item.