HIDA - Helmholtz Information and Data Science Academy

Card 

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


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


<!-- Card Event Type 1 -->
<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__kicker"><svg class="icon icon--calendar" viewBox="0 0 200 200" role="presentation">
                    <use xlink:href="#icon-calendar"></use>
                </svg><span class="card__kicker__text">6.10.2021 · Berlin</span></div>
            <div class="card__headline">
                <h2 class="headline headline--2">Der Zauber der Daten</h2>
            </div>
            <div class="card__subline">Ausstellung</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>


<!-- Card Event Type 2 -->
<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__kicker"><span class="card__kicker__text">Ausstellung</span></div>
            <div class="card__headline">
                <h2 class="headline headline--2">Der Zauber der Daten</h2>
            </div>
            <div class="card__details">
                <div class="card__details__item"><svg class="icon icon--calendar" viewBox="0 0 200 200" role="presentation">
                        <use xlink:href="#icon-calendar"></use>
                    </svg><span class="card__details__item__text">Fr, 6.10.21</span></div>
                <div class="card__details__item"><svg class="icon icon--location" viewBox="0 0 200 200" role="presentation">
                        <use xlink:href="#icon-location"></use>
                    </svg><span class="card__details__item__text">Ort</span></div>
            </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>


<!-- Card Event Type 3 -->
<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"><span class="card__badge">Extern</span>
            <div class="card__kicker"><span class="card__kicker__text">Ausstellung</span></div>
            <div class="card__headline">
                <h2 class="headline headline--2">Der Zauber der Daten</h2>
            </div>
            <div class="card__details">
                <div class="card__details__item"><svg class="icon icon--calendar" viewBox="0 0 200 200" role="presentation">
                        <use xlink:href="#icon-calendar"></use>
                    </svg><span class="card__details__item__text">Fr, 6.10.21</span></div>
                <div class="card__details__item"><svg class="icon icon--location" viewBox="0 0 200 200" role="presentation">
                        <use xlink:href="#icon-location"></use>
                    </svg><span class="card__details__item__text">Ort</span></div>
            </div>
            <div class="card__icons"><span class="card__icons__item"><svg class="icon icon--arrow-up-right" viewBox="0 0 200 200" role="presentation">
                        <use xlink:href="#icon-arrow-up-right"></use>
                    </svg></span><span class="card__icons__item"><svg class="icon icon--ticket" viewBox="0 0 200 200" role="presentation">
                        <use xlink:href="#icon-ticket"></use>
                    </svg></span></div>
        </div>
    </div>
</a>


<!-- Card News -->
<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__play"><svg class="icon icon--play-box" viewBox="0 0 200 200" role="presentation">
            <use xlink:href="#icon-play-box"></use>
        </svg></div>
    <div class="card__body">
        <div class="card__body__inner">
            <div class="card__headline">
                <h2 class="headline headline--2">Heiling durch Gentherapie</h2>
            </div>
            <div class="card__subline">19.01.2021</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>


<!-- Card Quote -->
<a class="card card--quote" 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__quote">
        <div class="card__quote__inner"><span class="card__quote__text">„Hier steht ein Zitat, warum Arbeiten bei Helmholtz toll ist“</span><span class="card__quote__author">Vorname Name</span></div>
    </div>
    <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>


<!-- Card Imagetext -->
<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__imagetext">3 Räume<br />60 Personen</div>
    <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>


#{href && 'a' || tag || 'div'}.card(
  href=href,
  target=target,
  class=classNames(
    !image && 'card--small',
    quote && 'card--quote'
  )
)&attributes(attr)
  if image
    .card__image
      +include('@image', image)

  if play
    .card__play
      +include('@icon', { icon: 'play-box' })

  if imagetext
    .card__imagetext !{render(imagetext, true)}

  if quote
    .card__quote
      .card__quote__inner
        span.card__quote__text !{render(quote.text, true)}
        span.card__quote__author #{quote.author}

  .card__body
    .card__body__inner
      if badge
        span.card__badge #{badge}
      if kickerIcon || kicker
        .card__kicker
          if kickerIcon
            +include('@icon', { icon: kickerIcon })
          if kicker
            span.card__kicker__text #{kicker}

      if headline
        .card__headline
          +include('@headline', { text: headline, size: 2, level: 2 })

      if subline
        .card__subline #{subline}

      if text
        .card__text #{text}

      if details
        .card__details
          each item in details
            .card__details__item
              +include('@icon', { icon: item.icon })
              span.card__details__item__text #{item.text}

      if icons
        .card__icons
          each item in icons
            span.card__icons__item
              +include('@icon', { icon: item.icon })

      if icon
        .card__icons
          span.card__icons__item
            +include('@icon', { icon: icon })
 
/* Card */
{
  "href": "#",
  "target": null,
  "quote": null,
  "imagetext": null,
  "image": {
    "width": 610,
    "height": 610,
    "alt": "Alternativ-Text"
  },
  "play": null,
  "kickerIcon": null,
  "kicker": null,
  "headline": "Eine Headline",
  "subline": null,
  "details": null,
  "icon": "arrow-right",
  "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."
}


/* Card small */
{
  "href": "#",
  "target": null,
  "quote": null,
  "imagetext": null,
  "image": null,
  "play": null,
  "kickerIcon": "toolbox",
  "kicker": null,
  "headline": "Data-Science Jobs bei Helmholtz",
  "subline": null,
  "details": null,
  "icon": "arrow-right"
}


/* Card Event Type 1 */
{
  "href": "#",
  "target": null,
  "quote": null,
  "imagetext": null,
  "image": {
    "width": 610,
    "height": 610,
    "alt": "Alternativ-Text"
  },
  "play": null,
  "kickerIcon": "calendar",
  "kicker": "6.10.2021 · Berlin",
  "headline": "Der Zauber der Daten",
  "subline": "Ausstellung",
  "details": null,
  "icon": "arrow-right"
}


/* Card Event Type 2 */
{
  "href": "#",
  "target": null,
  "quote": null,
  "imagetext": null,
  "image": {
    "width": 610,
    "height": 610,
    "alt": "Alternativ-Text"
  },
  "play": null,
  "kickerIcon": null,
  "kicker": "Ausstellung",
  "headline": "Der Zauber der Daten",
  "subline": null,
  "details": [
    {
      "icon": "calendar",
      "text": "Fr, 6.10.21"
    },
    {
      "icon": "location",
      "text": "Ort"
    }
  ],
  "icon": "arrow-right"
}


/* Card Event Type 3 */
{
  "href": "#",
  "target": null,
  "quote": null,
  "imagetext": null,
  "image": {
    "width": 610,
    "height": 610,
    "alt": "Alternativ-Text"
  },
  "play": null,
  "kickerIcon": null,
  "kicker": "Ausstellung",
  "headline": "Der Zauber der Daten",
  "subline": null,
  "details": [
    {
      "icon": "calendar",
      "text": "Fr, 6.10.21"
    },
    {
      "icon": "location",
      "text": "Ort"
    }
  ],
  "icon": null,
  "badge": "Extern",
  "icons": [
    {
      "icon": "arrow-up-right"
    },
    {
      "icon": "ticket"
    }
  ]
}


/* Card News */
{
  "href": "#",
  "target": null,
  "quote": null,
  "imagetext": null,
  "image": {
    "width": 610,
    "height": 610,
    "alt": "Alternativ-Text"
  },
  "play": true,
  "kickerIcon": null,
  "kicker": null,
  "headline": "Heiling durch Gentherapie",
  "subline": "19.01.2021",
  "details": null,
  "icon": "arrow-right"
}


/* Card Quote */
{
  "href": "#",
  "target": null,
  "quote": {
    "text": "„Hier steht ein Zitat, warum Arbeiten bei Helmholtz toll ist“\n",
    "author": "Vorname Name"
  },
  "imagetext": null,
  "image": {
    "width": 610,
    "height": 610,
    "alt": "Alternativ-Text"
  },
  "play": null,
  "kickerIcon": "toolbox",
  "kicker": null,
  "headline": "Data-Science Jobs bei Helmholtz",
  "subline": null,
  "details": null,
  "icon": "arrow-right"
}


/* Card Imagetext */
{
  "href": "#",
  "target": null,
  "quote": null,
  "imagetext": "3 Räume<br />60 Personen\n",
  "image": {
    "width": 610,
    "height": 610,
    "alt": "Alternativ-Text"
  },
  "play": null,
  "kickerIcon": "map",
  "kicker": null,
  "headline": "HIDA-Eventspace für Ihre Veranstaltung",
  "subline": null,
  "details": null,
  "icon": "arrow-right"
}
  • Content: 
    .card {
  display: block;
  padding-bottom: 6rem;
  position: relative;
  transition: color 0.2s;
  width: 100%;

  @media(hover: hover) and (pointer: fine) {
    &:hover {
      color: $color-blue;
    }
  }

  @include mq($from: m) {
    padding-bottom: 4.5rem;
    width: 61rem;
  }
}

.card--small {
  padding-bottom: 0;
}

.card__image .image {
  box-shadow: $box-shadow-default;
}

.card__body {
  bottom: 0;
  left: 1.5rem;
  position: absolute;
  right: 1.5rem;

  &::before,
  &::after {
    content: '';
    left: 0;
    position: absolute;
    width: 100%;
  }

  &::before {
    background: #fff;
    height: calc(100% - 5rem);
    top: 0;
  }

  &::after {
    background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 80"><defs/><path fill="' + #fff + '" d="M0 80V0h800v-40h800V-.09a40 40 0 0 1-11.75 28.32l-40.2 40.09A40 40 0 0 1 1519.82 80H0z"/></svg>');
    background-position: right bottom;
    background-size: auto 100%;
    bottom: 0;
    content: '';
    height: 5rem;
  }

  @include mq($from: m) {
    left: 4rem;
    right: 4rem;

    &::before {
      height: calc(100% - 8rem);
    }

    &::after {
      height: 8rem;
    }
  }
}

.card--small .card__body {
  position: static;
}

.card__body__inner {
  padding: 2.5rem 2rem;
  position: relative;
  z-index: 1;

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

.card__kicker {
  margin-bottom: 1rem;
}

.card__kicker .icon {
  color: $color-blue;
  font-size: 1.8rem;
  margin-right: 0.8rem;
  position: relative;
  top: -0.2rem;
}

.card__kicker__text {
  color: $color-blue;
  font-family: $font-family-secondary;
  font-size: 1.5rem;
  font-weight: $font-weight-bold;
  text-transform: uppercase;
}

.card__headline {
  margin-bottom: 1rem;
}

.card__text {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s;
}

@media(hover: hover) and (pointer: fine) {
  .card:hover .card__text {
    max-height: 13rem;
  }
}

.card__details {
  margin-top: 1.5rem;
}

.card__details .icon {
  margin-right: 0.8rem;
  position: relative;
  top: -0.2rem;
}

.card__icons {
  display: flex;
  margin: 0 0 0 -1rem;
  padding-top: 1rem;
}

.card__icons__item {
  padding: 0 1rem;
  position: relative;

  &:not(:first-child)::before {
    background: $color-border-gray-light;
    bottom: 0.4rem;
    content: '';
    display: block;
    left: 0;
    position: absolute;
    top: 0.8rem;
    width: 0.1rem;
  }
}

.card__icons .icon {
  color: $color-blue;
  font-size: 1.4rem;
}

.card__play {
  color: $color-blue;
  left: 50%;
  position: absolute;
  top: calc(40%);
  transform: translate(-50%, -50%);

  @include mq($from: m) {
    top: calc(50% - 3rem);
  }
}

.card__play,
.card__play .icon {
  height: 8rem;
  width: 8rem;
}

.card__quote {
  left: 5rem;
  position: absolute;
  top: 7rem;
}

.card__quote__text {
  color: $color-turquoise;
  display: block;
  font-family: $font-family-secondary;
  font-size: 5.2rem;
  font-weight: $font-weight-bold;
  letter-spacing: -0.2rem;
  line-height: calc(5.8 / 5.2);
}

.card__quote__author {
  color: #fff;
  display: block;
  margin-top: 1rem;
}

.card__imagetext {
  color: $color-dark;
  display: block;
  font-family: $font-family-secondary;
  font-size: 7.8rem;
  font-weight: $font-weight-bold;
  left: 5rem;
  letter-spacing: -0.33rem;
  line-height: calc(8.2 / 7.8);
  position: absolute;
  top: 7rem;
}

.card__badge {
  background: $color-violet;
  border-radius: 3px;
  color: #fff;
  font-family: $font-family-secondary;
  font-size: 1.4rem;
  font-weight: $font-weight-bold;
  padding: 0 0.5rem;
  position: absolute;
  right: 2rem;
  text-transform: uppercase;
  top: 3rem;

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

.card__badge + .card__kicker {
  padding-right: 8rem;
}
  • URL: /components/raw/card/card.scss
  • Filesystem Path: src/components/molecules/card/card.scss
  • Size: 3.8 KB

There are no notes for this item.