HIDA - Helmholtz Information and Data Science Academy

Three Teaser 

<!-- Three Teaser -->
<div class="three-teaser three-teaser--default">
    <div class="three-teaser__inner">
        <div class="three-teaser__items"><a class="three-teaser__item" href="#">
                <div class="three-teaser__item__inner">
                    <div class="three-teaser__item__kicker">Name Helmholtz Zentrum</div>
                    <div class="three-teaser__item__headline">
                        <h3 class="headline headline--3">Ich bin die Headline</h3>
                    </div>
                    <div class="three-teaser__item__body">
                        <div class="three-teaser__item__subline">19.01.2021</div>
                        <div class="three-teaser__item__text">Hier steht eine optionale Teaserline für eine externen Newsinhalt</div>
                    </div>
                </div>
                <div class="three-teaser__item__icon"><svg class="icon icon--arrow-up-right" viewBox="0 0 200 200" role="presentation">
                        <use xlink:href="#icon-arrow-up-right"></use>
                    </svg></div>
            </a><a class="three-teaser__item" href="#">
                <div class="three-teaser__item__inner">
                    <div class="three-teaser__item__kicker">Name Helmholtz Zentrum</div>
                    <div class="three-teaser__item__headline">
                        <h3 class="headline headline--3">Ich bin die Headline eines Teaser für eine externe Meldung</h3>
                    </div>
                    <div class="three-teaser__item__body">
                        <div class="three-teaser__item__subline">19.01.2021</div>
                        <div class="three-teaser__item__text">Hier steht eine optionale Teaserline für eine externen Newsinhalt</div>
                    </div>
                </div>
                <div class="three-teaser__item__icon"><svg class="icon icon--arrow-up-right" viewBox="0 0 200 200" role="presentation">
                        <use xlink:href="#icon-arrow-up-right"></use>
                    </svg></div>
            </a><a class="three-teaser__item" href="#">
                <div class="three-teaser__item__inner">
                    <div class="three-teaser__item__kicker">Name Helmholtz Zentrum</div>
                    <div class="three-teaser__item__headline">
                        <h3 class="headline headline--3">Ich bin die Headline eines Teaser für eine externe Meldung</h3>
                    </div>
                    <div class="three-teaser__item__body">
                        <div class="three-teaser__item__subline">19.01.2021</div>
                        <div class="three-teaser__item__text">Hier steht eine optionale Teaserline für eine externen Newsinhalt</div>
                    </div>
                </div>
                <div class="three-teaser__item__icon"><svg class="icon icon--arrow-up-right" viewBox="0 0 200 200" role="presentation">
                        <use xlink:href="#icon-arrow-up-right"></use>
                    </svg></div>
            </a></div>
        <div class="three-teaser__button"><a class="button button--secondary" href="#"><span class="button__inner"><span class="button__text">Alle News</span></span></a></div>
    </div>
</div>


<!-- Three Teaser - blue -->
<div class="three-teaser three-teaser--blue-light">
    <div class="three-teaser__inner">
        <div class="three-teaser__headline">
            <h2 class="headline headline--module-2">Course Catalog</h2>
        </div>
        <div class="three-teaser__items"><a class="three-teaser__item" href="#">
                <div class="three-teaser__item__inner">
                    <div class="three-teaser__item__kicker">Name Helmholtz Zentrum</div>
                    <div class="three-teaser__item__headline">
                        <h3 class="headline headline--3">Ich bin die Headline einen Eintrag in den Course Catalog</h3>
                    </div>
                </div>
            </a><a class="three-teaser__item" href="#">
                <div class="three-teaser__item__inner">
                    <div class="three-teaser__item__kicker">Name Helmholtz Zentrum</div>
                    <div class="three-teaser__item__headline">
                        <h3 class="headline headline--3">Ich bin die Headline einen Eintrag in den Course Catalog</h3>
                    </div>
                </div>
            </a><a class="three-teaser__item" href="#">
                <div class="three-teaser__item__inner">
                    <div class="three-teaser__item__kicker">Name Helmholtz Zentrum</div>
                    <div class="three-teaser__item__headline">
                        <h3 class="headline headline--3">Ich bin die Headline einen Eintrag in den Course Catalog</h3>
                    </div>
                </div>
            </a></div>
        <div class="three-teaser__button"><a class="button button--secondary" href="#"><span class="button__inner"><span class="button__text">Zum Course Catalog</span></span></a></div>
    </div>
</div>


<!-- Three Teaser - bg-image -->
<div class="three-teaser three-teaser--bg-image">
    <div class="three-teaser__inner">
        <div class="three-teaser__headline">
            <h2 class="headline headline--module-2">Course Catalog</h2>
        </div>
        <div class="three-teaser__text">Die nächsten Data-Science-Events und -Trainings in der Helmholtz-Gemeinschaft.</div>
        <div class="three-teaser__items"><a class="three-teaser__item" href="#">
                <div class="three-teaser__item__inner">
                    <div class="three-teaser__item__kicker">Hackaton</div>
                    <div class="three-teaser__item__headline">
                        <h3 class="headline headline--3">Ich bin die Headline Lorem ipsum dolor sit amet consectetur</h3>
                    </div>
                    <div class="three-teaser__item__date"><svg class="icon icon--calendar" viewBox="0 0 200 200" role="presentation">
                            <use xlink:href="#icon-calendar"></use>
                        </svg><span class="three-teaser__item__date__text">20.01.2022</span></div>
                </div>
            </a><a class="three-teaser__item" href="#">
                <div class="three-teaser__item__inner">
                    <div class="three-teaser__item__kicker">Workshop</div>
                    <div class="three-teaser__item__headline">
                        <h3 class="headline headline--3">Ich bin die Headline Lorem ipsum dolor sit amet consectetur</h3>
                    </div>
                    <div class="three-teaser__item__date"><svg class="icon icon--calendar" viewBox="0 0 200 200" role="presentation">
                            <use xlink:href="#icon-calendar"></use>
                        </svg><span class="three-teaser__item__date__text">20.01.2022</span></div>
                </div>
            </a><a class="three-teaser__item" href="#">
                <div class="three-teaser__item__inner">
                    <div class="three-teaser__item__kicker">Workshop</div>
                    <div class="three-teaser__item__headline">
                        <h3 class="headline headline--3">Ich bin die Headline Lorem ipsum dolor sit amet consectetur</h3>
                    </div>
                    <div class="three-teaser__item__date"><svg class="icon icon--calendar" viewBox="0 0 200 200" role="presentation">
                            <use xlink:href="#icon-calendar"></use>
                        </svg><span class="three-teaser__item__date__text">20.01.2022</span></div>
                </div>
            </a></div>
        <div class="three-teaser__button"><a class="button button--primary" href="#"><span class="button__inner"><span class="button__text">Zum Course Catalog</span></span></a></div>
    </div>
</div>


<!-- Three Teaser - blue-gray -->
<div class="three-teaser three-teaser--blue-gray">
    <div class="three-teaser__inner">
        <div class="three-teaser__headline">
            <h2 class="headline headline--module-2">HIDA Jobs</h2>
        </div>
        <div class="three-teaser__text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy.</div>
        <div class="three-teaser__items"><a class="three-teaser__item" href="#">
                <div class="three-teaser__item__inner">
                    <div class="three-teaser__item__kicker">Arbeitsbereich</div>
                    <div class="three-teaser__item__headline">
                        <h3 class="headline headline--3">Hier steht der Name der Position Lorem ipsum</h3>
                    </div>
                    <div class="three-teaser__item__location"><svg class="icon icon--location" viewBox="0 0 200 200" role="presentation">
                            <use xlink:href="#icon-location"></use>
                        </svg><span class="three-teaser__item__location__text">Musterstadt</span></div>
                    <div class="three-teaser__item__institution"><svg class="icon icon--building" viewBox="0 0 200 200" role="presentation">
                            <use xlink:href="#icon-building"></use>
                        </svg><span class="three-teaser__item__institution__text">Name der Institution</span></div>
                </div>
            </a><a class="three-teaser__item" href="#">
                <div class="three-teaser__item__inner">
                    <div class="three-teaser__item__kicker">Arbeitsbereich</div>
                    <div class="three-teaser__item__headline">
                        <h3 class="headline headline--3">Hier steht der Name der Position</h3>
                    </div>
                    <div class="three-teaser__item__location"><svg class="icon icon--location" viewBox="0 0 200 200" role="presentation">
                            <use xlink:href="#icon-location"></use>
                        </svg><span class="three-teaser__item__location__text">Musterstadt</span></div>
                    <div class="three-teaser__item__institution"><svg class="icon icon--building" viewBox="0 0 200 200" role="presentation">
                            <use xlink:href="#icon-building"></use>
                        </svg><span class="three-teaser__item__institution__text">Name der Institution</span></div>
                </div>
            </a><a class="three-teaser__item" href="#">
                <div class="three-teaser__item__inner">
                    <div class="three-teaser__item__kicker">Arbeitsbereich</div>
                    <div class="three-teaser__item__headline">
                        <h3 class="headline headline--3">Hier steht der Name der Position</h3>
                    </div>
                    <div class="three-teaser__item__location"><svg class="icon icon--location" viewBox="0 0 200 200" role="presentation">
                            <use xlink:href="#icon-location"></use>
                        </svg><span class="three-teaser__item__location__text">Musterstadt</span></div>
                    <div class="three-teaser__item__institution"><svg class="icon icon--building" viewBox="0 0 200 200" role="presentation">
                            <use xlink:href="#icon-building"></use>
                        </svg><span class="three-teaser__item__institution__text">Name der Institution</span></div>
                </div>
            </a></div>
        <div class="three-teaser__button"><a class="button button--secondary" href="#"><span class="button__inner"><span class="button__text">Button-Text</span></span></a></div>
    </div>
</div>


#{tag || 'div'}.three-teaser(
  class=classNames(
    `three-teaser--${color || 'default'}`
  )
)&attributes(attr)
  .three-teaser__inner

    if headline
      .three-teaser__headline
        +include('@headline--module-2', headline)

    if text
      .three-teaser__text #{text}

    .three-teaser__items
      each item in items
        a.three-teaser__item(href=item.href)
          .three-teaser__item__inner

            if item.kicker
              .three-teaser__item__kicker #{item.kicker}

            if item.headline
              .three-teaser__item__headline
                +include('@headline--headline-3', { text: item.headline })

            if item.subline || item.text
              .three-teaser__item__body
                if item.subline
                  .three-teaser__item__subline #{item.subline}
                if item.text
                  .three-teaser__item__text #{item.text}

            if item.date
              .three-teaser__item__date
                +include('@icon', { icon: 'calendar' })
                span.three-teaser__item__date__text #{item.date}

            if item.location
              .three-teaser__item__location
                +include('@icon', { icon: 'location' })
                span.three-teaser__item__location__text #{item.location}

            if item.institution
              .three-teaser__item__institution
                +include('@icon', { icon: 'building' })
                span.three-teaser__item__institution__text #{item.institution}

          if item.icon
            .three-teaser__item__icon
              +include('@icon', { icon: item.icon })

    if button
      .three-teaser__button
        +include('@button--secondary', button)
 
/* Three Teaser */
{
  "items": [
    {
      "href": "#",
      "kicker": "Name Helmholtz Zentrum",
      "headline": "Ich bin die Headline",
      "subline": "19.01.2021",
      "text": "Hier steht eine optionale Teaserline für eine externen Newsinhalt",
      "icon": "arrow-up-right"
    },
    {
      "href": "#",
      "kicker": "Name Helmholtz Zentrum",
      "headline": "Ich bin die Headline eines Teaser für eine externe Meldung",
      "subline": "19.01.2021",
      "text": "Hier steht eine optionale Teaserline für eine externen Newsinhalt",
      "icon": "arrow-up-right"
    },
    {
      "href": "#",
      "kicker": "Name Helmholtz Zentrum",
      "headline": "Ich bin die Headline eines Teaser für eine externe Meldung",
      "subline": "19.01.2021",
      "text": "Hier steht eine optionale Teaserline für eine externen Newsinhalt",
      "icon": "arrow-up-right"
    }
  ],
  "button": {
    "href": "#",
    "text": "Alle News"
  }
}


/* Three Teaser - blue */
{
  "color": "blue-light",
  "headline": {
    "text": "Course Catalog"
  },
  "items": [
    {
      "href": "#",
      "kicker": "Name Helmholtz Zentrum",
      "headline": "Ich bin die Headline einen Eintrag in den Course Catalog"
    },
    {
      "href": "#",
      "kicker": "Name Helmholtz Zentrum",
      "headline": "Ich bin die Headline einen Eintrag in den Course Catalog"
    },
    {
      "href": "#",
      "kicker": "Name Helmholtz Zentrum",
      "headline": "Ich bin die Headline einen Eintrag in den Course Catalog"
    }
  ],
  "button": {
    "href": "#",
    "text": "Zum Course Catalog"
  }
}


/* Three Teaser - bg-image */
{
  "color": "bg-image",
  "headline": {
    "text": "Course Catalog"
  },
  "text": "Die nächsten Data-Science-Events und -Trainings in der Helmholtz-Gemeinschaft.",
  "items": [
    {
      "href": "#",
      "kicker": "Hackaton",
      "headline": "Ich bin die Headline Lorem ipsum dolor sit amet consectetur",
      "date": "20.01.2022"
    },
    {
      "href": "#",
      "kicker": "Workshop",
      "headline": "Ich bin die Headline Lorem ipsum dolor sit amet consectetur",
      "date": "20.01.2022"
    },
    {
      "href": "#",
      "kicker": "Workshop",
      "headline": "Ich bin die Headline Lorem ipsum dolor sit amet consectetur",
      "date": "20.01.2022"
    }
  ],
  "button": {
    "href": "#",
    "text": "Zum Course Catalog",
    "style": "primary"
  }
}


/* Three Teaser - blue-gray */
{
  "color": "blue-gray",
  "headline": {
    "text": "HIDA Jobs"
  },
  "text": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy.",
  "items": [
    {
      "href": "#",
      "kicker": "Arbeitsbereich",
      "headline": "Hier steht der Name der Position Lorem ipsum",
      "location": "Musterstadt",
      "institution": "Name der Institution"
    },
    {
      "href": "#",
      "kicker": "Arbeitsbereich",
      "headline": "Hier steht der Name der Position",
      "location": "Musterstadt",
      "institution": "Name der Institution"
    },
    {
      "href": "#",
      "kicker": "Arbeitsbereich",
      "headline": "Hier steht der Name der Position",
      "location": "Musterstadt",
      "institution": "Name der Institution"
    }
  ],
  "button": {
    "href": "#",
    "text": "Button-Text",
    "style": "secondary"
  }
}
  • Content: 
    .three-teaser {
  padding: 0 1.5rem;

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

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

.three-teaser--blue-light,
.three-teaser--bg-image {
  padding: 5rem 1.5rem;

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

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

.three-teaser--bg-image {
  background-image: url('../images/backgrounds/bg-three-teaser.jpg');
  background-size: cover;
  color: #fff;

  .body--iframe & {
    @include mq($from: xl) {
      padding: 6rem 9rem;
    }
  }
}

.three-teaser--blue-light {
  background: $color-blue-light;
}

.three-teaser--blue-gray {
  @include mq($from: m) {
    margin-top: -0.1rem;
  }
}

.three-teaser--full-width {
  left: 50%;
  margin-left: -50vw;
  position: relative;
  width: 100vw;
}

.three-teaser__headline {
  color: #fff;
  margin-bottom: 2rem;
}

.three-teaser--blue-gray .three-teaser__headline {
  color: $color-dark;
}

.three-teaser__text {
  margin-bottom: 3rem;
}

.three-teaser__headline + .three-teaser__text {
  margin-top: -1rem;
}

.three-teaser__inner {
  margin: 0 auto;
  max-width: 127rem;
}

.three-teaser__items {
  @include mq($from: m) {
    display: flex;
    margin: 0 -3rem;
  }
}

.three-teaser__item {
  display: block;
  padding: 2rem 0;
  position: relative;

  &:not(:last-child) {
    @include mq($until: m) {
      border-bottom: 1px solid $color-border-gray-light;
    }
  }

  @include mq($from: m) {
    padding: 3rem;
    width: 33.3333%;
  }
}

.three-teaser--blue-light .three-teaser__item {
  &:not(:last-child) {
    @include mq($until: m) {
      border-bottom: 1px solid $color-border-blue-light;
    }
  }
}

.three-teaser--default .three-teaser__item,
.three-teaser--blue-gray .three-teaser__item {
  @include mq($from: m) {
    &::before,
    &::after {
      content: '';
      left: 0;
      opacity: 0;
      position: absolute;
      transition: opacity 0.2s;
      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;
    }

    @media(hover: hover) and (pointer: fine) {
      &:hover::before,
      &:hover::after {
        opacity: 1;
      }
    }
  }
}

.three-teaser__item__inner {
  position: relative;
  z-index: 1;
}

.three-teaser--blue-gray .three-teaser__item__inner,
.three-teaser--bg-image .three-teaser__item__inner {
  @include mq($from: m) {
    height: 100%;
  }
}

.three-teaser__item:not(:last-child) .three-teaser__item__inner {
  &::before {
    background: $color-border-gray-light;
    content: '';
    height: 14rem;
    position: absolute;
    right: -3rem;
    top: 0.2rem;
    width: 0.1rem;
  }
}

.three-teaser__item:not(:last-child) .three-teaser__item__inner::before {
  .three-teaser--blue-light & {
    background: $color-border-blue-light;
  }

  .three-teaser--blue-gray &,
  .three-teaser--bg-image & {
    height: calc(100%);
  }
}


.three-teaser__item__kicker {
  color: $color-blue;
  font-family: $font-family-secondary;
  font-size: 1.5rem;
  font-weight: $font-weight-bold;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
}

.three-teaser--bg-image .three-teaser__item__kicker {
  color: $color-blue-light;
}

.three-teaser--bg-image .three-teaser__item__headline {
  transition: color 0.2s;
}

.three-teaser--blue-gray .three-teaser__item__headline {
  @include mq($from: m) {
    min-height: 6.4rem;
  }
}

@media(hover: hover) and (pointer: fine) {
  .three-teaser--bg-image .three-teaser__item:hover .three-teaser__item__headline {
    color: $color-blue-light;
  }
}

.three-teaser__item__body {
  margin-top: 1rem;

  @include mq($until: m) {
    display: none;
  }

  @include mq($from: m) {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s;
  }
}

@media(hover: hover) and (pointer: fine) {
  .three-teaser__item:hover .three-teaser__item__body {
    @include mq($from: m) {
      max-height: 15rem;
    }
  }
}

.three-teaser__item__icon {
  position: relative;
  z-index: 1;
}

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

.three-teaser--blue-light .three-teaser__item__icon {
  display: none;
}

.three-teaser__button {
  padding-top: 5rem;
  text-align: center;
}

.three-teaser__item__date,
.three-teaser__item__location,
.three-teaser__item__institution {
  margin-top: 0.5rem;
  padding-left: 2.8rem;
  position: relative;

  @include mq($from: m) {
    margin-top: 1rem;
  }
}

.three-teaser__item__location + .three-teaser__item__institution {
  margin-top: 0;
}

.three-teaser__item__date .icon,
.three-teaser__item__location .icon,
.three-teaser__item__institution .icon {
  left: 0;
  position: absolute;
  top: 0.6rem;
}
  • URL: /components/raw/three-teaser/three-teaser.scss
  • Filesystem Path: src/components/organisms/three-teaser/three-teaser.scss
  • Size: 5.1 KB

There are no notes for this item.