HIDA - Helmholtz Information and Data Science Academy

Microcard 

<!-- Microcard -->
<a class="microcard" href="#">
    <div class="microcard__inner">
        <div class="microcard__image">
            <picture>
                <source srcset="https://placehold.co/350x350/A0A0A6/FFFFFF.webp?text=350x350-webp" type="image/webp" />
                <img class="microcard__image__img" src="https://picsum.photos/id/FFFFFF/350/350" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." width="350" height="350" loading="lazy" />
            </picture>
        </div>
        <div class="microcard__bottom">
            <div class="microcard__headline">
                <h3 class="headline headline--3">Eine Headline</h3>
            </div>
            <div class="microcard__icons"><span class="microcard__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>


<!-- Microcard mit Quickinfo -->
<div class="microcard microcard--quickinfo">
    <div class="microcard__inner">
        <div class="microcard__image">
            <picture>
                <source srcset="https://placehold.co/350x350/A0A0A6/FFFFFF.webp?text=350x350-webp" type="image/webp" />
                <img class="microcard__image__img" src="https://picsum.photos/id/FFFFFF/350/350" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." width="350" height="350" loading="lazy" />
            </picture>
        </div>
        <div class="microcard__bottom">
            <div class="microcard__headline">
                <h3 class="headline headline--3">Eine Headline</h3>
            </div>
            <div class="microcard__quickinfo"><svg class="icon icon--plus" viewBox="0 0 200 200" role="presentation">
                    <use xlink:href="#icon-plus"></use>
                </svg></div>
        </div>
    </div>
    <div class="quickinfo">
        <div class="quickinfo__button-wrap"><button class="icon-button quickinfo__button" type="button" aria-expanded="false" aria-controls="id-d1a2d5-content" id="id-d1a2d5-title"><svg class="icon icon--plus icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-40cf7b-title">
                    <title id="icon-40cf7b-title">Schnellinfo zeigen</title>
                    <use xlink:href="#icon-plus"></use>
                </svg></button></div>
        <article class="quickinfo__panel" id="id-d1a2d5-content" aria-labelledby="id-d1a2d5-title">
            <div class="quickinfo__content" tabindex="-1">
                <div class="quickinfo__content-inner">
                    <div class="quickinfo__block" id="c15210">
                        <h3 class="headline headline--module-3">Ich bin eine Headline für eine Zusatzinfo</h3>
                    </div>
                    <div class="quickinfo__block" id="c15211">
                        <p class="bodytext"><strong>Ich bin eine Zwischenheadline</strong><br />Lorem ipsum dolor sit amet, consetetur sadipscing elitrvero consetetur sadipscing elitr, sed diam nonumy Textlink invidunt ut dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren.</p>
                    </div>
                    <div class="quickinfo__block" id="c15212">
                        <figure class="figure" aria-labelledby="figure-b68d16-label"></figure>
                    </div>
                    <div class="quickinfo__block" id="c15213"><a class="link link--download" href="#" target="_blank">Download (PDF, 1.3MB)</a></div>
                    <div class="quickinfo__block" id="c15215"><a class="button button--primary" href="#"><span class="button__inner"><svg class="icon icon--ticket" viewBox="0 0 200 200" role="presentation">
                                    <use xlink:href="#icon-ticket"></use>
                                </svg><span class="button__text">Button-Text</span></span></a></div><button class="icon-button quickinfo__close" type="button"><svg class="icon icon--close icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-660be9-title">
                            <title id="icon-660be9-title">Schnellinfo schließen</title>
                            <use xlink:href="#icon-close"></use>
                        </svg></button>
                </div>
            </div>
        </article>
    </div>
</div>


<!-- Microcard mit Quickinfo klein -->
<div class="microcard microcard--small microcard--quickinfo">
    <div class="microcard__inner">
        <div class="microcard__bottom">
            <div class="microcard__headline">
                <h3 class="headline headline--3">Eine Headline</h3>
            </div>
            <div class="microcard__quickinfo"><svg class="icon icon--plus" viewBox="0 0 200 200" role="presentation">
                    <use xlink:href="#icon-plus"></use>
                </svg></div>
        </div>
    </div>
    <div class="quickinfo">
        <div class="quickinfo__button-wrap"><button class="icon-button quickinfo__button" type="button" aria-expanded="false" aria-controls="id-b57bcc-content" id="id-b57bcc-title"><svg class="icon icon--plus icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-1d2dee-title">
                    <title id="icon-1d2dee-title">Schnellinfo zeigen</title>
                    <use xlink:href="#icon-plus"></use>
                </svg></button></div>
        <article class="quickinfo__panel" id="id-b57bcc-content" aria-labelledby="id-b57bcc-title">
            <div class="quickinfo__content" tabindex="-1">
                <div class="quickinfo__content-inner">
                    <div class="quickinfo__block" id="c15210">
                        <h3 class="headline headline--module-3">Ich bin eine Headline für eine Zusatzinfo</h3>
                    </div>
                    <div class="quickinfo__block" id="c15211">
                        <p class="bodytext"><strong>Ich bin eine Zwischenheadline</strong><br />Lorem ipsum dolor sit amet, consetetur sadipscing elitrvero consetetur sadipscing elitr, sed diam nonumy Textlink invidunt ut dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren.</p>
                    </div>
                    <div class="quickinfo__block" id="c15212">
                        <figure class="figure" aria-labelledby="figure-843f83-label"></figure>
                    </div>
                    <div class="quickinfo__block" id="c15213"><a class="link link--download" href="#" target="_blank">Download (PDF, 1.3MB)</a></div>
                    <div class="quickinfo__block" id="c15215"><a class="button button--primary" href="#"><span class="button__inner"><svg class="icon icon--ticket" viewBox="0 0 200 200" role="presentation">
                                    <use xlink:href="#icon-ticket"></use>
                                </svg><span class="button__text">Button-Text</span></span></a></div><button class="icon-button quickinfo__close" type="button"><svg class="icon icon--close icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-1c703a-title">
                            <title id="icon-1c703a-title">Schnellinfo schließen</title>
                            <use xlink:href="#icon-close"></use>
                        </svg></button>
                </div>
            </div>
        </article>
    </div>
</div>


<!-- Microcard News -->
<a class="microcard microcard--has-text" href="#">
    <div class="microcard__inner">
        <div class="microcard__image">
            <picture>
                <source srcset="https://placehold.co/350x350/A0A0A6/FFFFFF.webp?text=350x350-webp" type="image/webp" />
                <img class="microcard__image__img" src="https://picsum.photos/id/FFFFFF/350/350" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." width="350" height="350" loading="lazy" />
            </picture>
        </div>
        <div class="microcard__bottom">
            <div class="microcard__headline">
                <h3 class="headline headline--3">Neue Partner: DASHH und HAW Hamburg</h3>
            </div>
            <div class="microcard__subline">19.01.2021</div>
            <div class="microcard__text">220 Zeichen max. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam sed vitae harum dolore corrupti a molestias blanditiis, deserunt, nostrum nemo distinctio rerumess qui necessitatibus sequi laudantium ipsum.</div>
            <div class="microcard__icons"><span class="microcard__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>


<!-- Microcard Event Typ 1 -->
<a class="microcard microcard--has-details" href="#">
    <div class="microcard__inner">
        <div class="microcard__top">
            <div class="microcard__kicker"><span class="microcard__kicker__text">Hackathon</span></div>
        </div>
        <div class="microcard__image">
            <picture>
                <source srcset="https://placehold.co/400x400/A0A0A6/FFFFFF.webp?text=298x298-webp" type="image/webp" />
                <img class="microcard__image__img" src="https://picsum.photos/id/FFFFFF/298/298" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." width="298" height="298" loading="lazy" />
            </picture>
        </div>
        <div class="microcard__bottom">
            <div class="microcard__headline">
                <h3 class="headline headline--3">Helmholtz GPU HAckathon</h3>
            </div>
            <div class="microcard__details">
                <div class="microcard__details__item"><svg class="icon icon--calendar" viewBox="0 0 200 200" role="presentation">
                        <use xlink:href="#icon-calendar"></use>
                    </svg><span class="microcard__details__item__text">Fr, 6.10.21</span></div>
                <div class="microcard__details__item"><svg class="icon icon--location" viewBox="0 0 200 200" role="presentation">
                        <use xlink:href="#icon-location"></use>
                    </svg><span class="microcard__details__item__text">Ort</span></div>
            </div>
            <div class="microcard__icons"><span class="microcard__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></div>
        </div>
    </div>
</a>


<!-- Microcard Event Typ2 -->
<a class="microcard" href="#">
    <div class="microcard__inner">
        <div class="microcard__top">
            <div class="microcard__kicker"><svg class="icon icon--calendar" viewBox="0 0 200 200" role="presentation">
                    <use xlink:href="#icon-calendar"></use>
                </svg><span class="microcard__kicker__text">6.10. - 10.10.2021 · Online</span></div><span class="microcard__badge">Extern</span>
        </div>
        <div class="microcard__image">
            <picture>
                <source srcset="https://placehold.co/200x200/A0A0A6/FFFFFF.webp?text=200x200-webp" type="image/webp" />
                <img class="microcard__image__img" src="https://picsum.photos/id/FFFFFF/200/200" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." width="200" height="200" loading="lazy" />
            </picture>
        </div>
        <div class="microcard__bottom">
            <div class="microcard__headline">
                <h3 class="headline headline--3">Machine Learning in the Marine Science: Opportunities and Challanges</h3>
            </div>
            <div class="microcard__subline">Konferenz · von Youmares 11</div>
            <div class="microcard__icons"><span class="microcard__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="microcard__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>


#{href && 'a' || tag || 'div'}.microcard(
  href=href,
  target=target,
  class=classNames(
    !picture && 'microcard--small',
    text && 'microcard--has-text',
    details && 'microcard--has-details',
    stretched && 'microcard--stretched',
    quickinfo && 'microcard--quickinfo'
  )
)&attributes(attr)
  .microcard__inner

    if kickerIcon || kicker || badge
      .microcard__top
        if kickerIcon || kicker
          .microcard__kicker
            if kickerIcon
              +include('@icon', { icon: kickerIcon })
            if kicker
              span.microcard__kicker__text #{kicker}
        if badge
          span.microcard__badge #{badge}

    if picture
      .microcard__image
        +include('@picture', picture)

    .microcard__bottom
      if headline
        .microcard__headline
          +include('@headline--headline-3', { text: headline })

      if subline
        .microcard__subline #{subline}

      if text
        .microcard__text #{text}

      if details
        .microcard__details
          each item in details
            .microcard__details__item
              +include('@icon', { icon: item.icon })
              span.microcard__details__item__text #{item.text}

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

      if icon
        .microcard__icons
          span.microcard__icons__item
            +include('@icon', { icon: icon })

      if quickinfo
        .microcard__quickinfo
          +include('@icon', { icon: 'plus' })

  if quickinfo
    +include('@quickinfo')
 
/* Microcard */
{
  "href": "#",
  "target": null,
  "kickerIcon": null,
  "kicker": null,
  "badge": null,
  "picture": {
    "width": 350,
    "height": 350,
    "imageClass": "microcard__image__img",
    "items": [
      {
        "src": "https://placehold.co/350x350/A0A0A6/FFFFFF.webp?text=350x350-webp",
        "type": "webp",
        "breakpoint": null
      }
    ]
  },
  "headline": "Eine Headline",
  "subline": null,
  "text": null,
  "details": null,
  "icons": null,
  "icon": "arrow-right",
  "quickinfo": null
}


/* Microcard mit Quickinfo */
{
  "href": null,
  "target": null,
  "kickerIcon": null,
  "kicker": null,
  "badge": null,
  "picture": {
    "width": 350,
    "height": 350,
    "imageClass": "microcard__image__img",
    "items": [
      {
        "src": "https://placehold.co/350x350/A0A0A6/FFFFFF.webp?text=350x350-webp",
        "type": "webp",
        "breakpoint": null
      }
    ]
  },
  "headline": "Eine Headline",
  "subline": null,
  "text": null,
  "details": null,
  "icons": null,
  "icon": null,
  "quickinfo": true
}


/* Microcard mit Quickinfo klein */
{
  "href": null,
  "target": null,
  "kickerIcon": null,
  "kicker": null,
  "badge": null,
  "picture": null,
  "headline": "Eine Headline",
  "subline": null,
  "text": null,
  "details": null,
  "icons": null,
  "icon": null,
  "quickinfo": true
}


/* Microcard News */
{
  "href": "#",
  "target": null,
  "kickerIcon": null,
  "kicker": null,
  "badge": null,
  "picture": {
    "width": 350,
    "height": 350,
    "imageClass": "microcard__image__img",
    "items": [
      {
        "src": "https://placehold.co/350x350/A0A0A6/FFFFFF.webp?text=350x350-webp",
        "type": "webp",
        "breakpoint": null
      }
    ]
  },
  "headline": "Neue Partner: DASHH und HAW Hamburg",
  "subline": "19.01.2021",
  "text": "220 Zeichen max. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam sed vitae harum dolore corrupti a molestias blanditiis, deserunt, nostrum nemo distinctio rerumess qui necessitatibus sequi laudantium ipsum.",
  "details": null,
  "icons": null,
  "icon": "arrow-right",
  "quickinfo": null
}


/* Microcard Event Typ 1 */
{
  "href": "#",
  "target": null,
  "kickerIcon": null,
  "kicker": "Hackathon",
  "badge": null,
  "picture": {
    "width": 298,
    "height": 298,
    "imageClass": "microcard__image__img",
    "items": [
      {
        "src": "https://placehold.co/400x400/A0A0A6/FFFFFF.webp?text=298x298-webp",
        "type": "webp",
        "breakpoint": null
      }
    ]
  },
  "headline": "Helmholtz GPU HAckathon",
  "subline": null,
  "text": null,
  "details": [
    {
      "icon": "calendar",
      "text": "Fr, 6.10.21"
    },
    {
      "icon": "location",
      "text": "Ort"
    }
  ],
  "icons": null,
  "icon": "arrow-up-right",
  "quickinfo": null
}


/* Microcard Event Typ2 */
{
  "href": "#",
  "target": null,
  "kickerIcon": "calendar",
  "kicker": "6.10. - 10.10.2021 · Online",
  "badge": "Extern",
  "picture": {
    "width": 200,
    "height": 200,
    "imageClass": "microcard__image__img",
    "items": [
      {
        "src": "https://placehold.co/200x200/A0A0A6/FFFFFF.webp?text=200x200-webp",
        "type": "webp",
        "breakpoint": null
      }
    ]
  },
  "headline": "Machine Learning in the Marine Science: Opportunities and Challanges",
  "subline": "Konferenz · von Youmares 11",
  "text": null,
  "details": null,
  "icons": [
    {
      "icon": "arrow-up-right"
    },
    {
      "icon": "ticket"
    }
  ],
  "icon": null,
  "quickinfo": null
}
  • Content: 
    .microcard {
  color: $color-dark;
  display: block;
  height: 48rem;
  position: relative;
  transition: color 0.2s;
  width: 40rem;

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

  &::before,
  &::after {
    content: '';
    left: 3.5rem;
    position: absolute;
    width: calc(100% - 3.5rem);
  }

  &::before {
    background: #fff;
    height: calc(100% - 8rem);
    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: 8rem;
  }

  .article &,
  .grid & {
    width: 100%;

    @include mq($from: m) {
      &::before {
        height: calc(100% - 5rem);
      }

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

  .slider & {
    @include mq($until: m) {
      &::before {
        height: calc(100% - 5rem);
      }

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

.microcard--has-text,
.microcard--has-details {
  height: 55rem;
}

.microcard--small {
  height: auto;

  &::before,
  &::after {
    left: 0;
    width: 100%;
  }

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

  &::after {
    height: 5rem;
  }

  .microcard__inner {
    padding: 3rem 2.5rem;
  }
}


.microcard__inner {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 3rem 2.5rem 2rem 6rem;
  position: relative;
  z-index: 1;
}

.microcard__top {
  align-items: baseline;
  display: flex;
  flex-shrink: 0;
  margin: -1rem 0 1.5rem;
}

.microcard__kicker {
  flex-grow: 1;
}

.microcard__kicker .icon {
  color: $color-blue;
  font-size: 1.4rem;
  margin-right: 0.5rem;
  position: relative;
  top: -0.1rem;
}

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

.microcard__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;
  text-transform: uppercase;
}

.microcard__image {
  background: #fff;
  flex: 1 0 auto;
  left: -6rem;
  position: relative;
  transition: width 0.2s;
  width: calc(100% + 3.5rem);
}

.microcard__image__img {
  box-shadow: $box-shadow-default;
  height: 100%;
  left: 0;
  max-height: 100%;
  max-width: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  width: auto;
}

.microcard__bottom {
  flex-shrink: 0;

  &:not(:first-child) {
    padding-top: 2rem;
  }
}

.microcard__headline {
  margin-bottom: 1rem;
}

.microcard__headline .headline {
  .text-float &,
  .article &,
  .grid &,
  .two-microcards & {
    @include mq($from: m) {
      font-size: 1.9rem;
      line-height: 2.5rem;
      min-height: 7.5rem;
    }
  }

  .microcard-wall & {
    @include mq($from: m) {
      font-size: 1.9rem;
      line-height: 2.5rem;
      min-height: 10.8rem;
    }
  }

  @include mq($until: m) {
    hyphens: auto;
    overflow-wrap: break-word;
    word-wrap: break-word;
  }
}

.microcard--small .microcard__headline .headline {
  min-height: inherit;
}

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

@media(hover: hover) and (pointer: fine) {
  .microcard:hover .microcard__text {
    max-height: 20rem;
  }
}

.microcard__details {
  margin-top: 1.5rem;
}

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

.microcard__icons {
  display: flex;
  margin: 1rem 0 0 -1rem;

  .text-float &,
  .article &,
  .grid &,
  .two-microcards & {
    @include mq($from: m) {
      margin-top: 2.9rem;
    }
  }
}

.microcard__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;
  }
}

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

.microcard__quickinfo {
  color: $color-blue;
  display: inline-block;
  height: 3rem;
  line-height: 1;
  margin-top: 1rem;
  position: relative;
  width: 3rem;

  .icon {
    height: 3rem;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 3rem;
  }
}

.microcard .quickinfo,
.microcard .quickinfo__button {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 2;

  .icon {
    display: none;
  }
}

.article,
.grid,
.two-microcards {
  @include mq($until: m) {
    .microcard {
      background: #fff;
      height: auto;
    }

    .microcard__inner {
      flex-direction: row;
      padding: 3rem 1.5rem;
    }

    .microcard__image {
      flex: none;
      height: 10rem;
      left: 0;
      width: 10rem;
    }

    .microcard__image__img {
      box-shadow: -0.5rem 1.5rem 10rem 0 rgba($color-dark, 0.25);
    }

    .microcard__bottom {
      flex: 1;
      padding: 0 0 0 2rem;
    }

    .microcard__headline {
      margin-top: -0.5rem;
    }
  }
}

.article__inner .tabs-slider .microcard {
  width: 40rem;

  @include mq($until: m) {
    background: none;
    margin: 0;
    width: calc(100% - 1.5rem);
  }
}
  • URL: /components/raw/microcard/microcard.scss
  • Filesystem Path: src/components/molecules/microcard/microcard.scss
  • Size: 5.5 KB

Image Sizes

default: 350 * 350, ratio 1 / 1

microcard–event-type-1

default: 298 * 298, ratio 1 / 1

microcard–event-type-2

default: 200 * 200, ratio 1 / 1