<div><a href="#" class="list-teaser-event">
        <div class="event-date-section">
            <div class="label talk">Vortrag</div><time class="event-date" datetime="2017-06-23"><span class="event-day-month"><span class="event-day">23</span><span class="event-month">Jun</span></span><span class="event-year">2017</span></time>
        </div>
        <div class="list-teaser__content">
            <div class="list-teaser__body">
                <div class="label talk">Vortrag</div>
                <div class="label slides">Folien verfügbar</div>
                <h2 class="list-teaser-event__headline">Vortrag Titel</h2>
                <h3 class="list-teaser-event__subheadline">Vortragsort / 10-12 Uhr<img class="arrow-right" src="../../assets/arrow-long-right-red.svg"></h3>
            </div>
            <div class="list-teaser__footer">
                <div class="author-bio author-bio--short" itemscope itemtype="http://schema.org/Person">
                    <div class="author-bio__image avatar avatar--small"><img class="avatar__image" itemprop="photo" src="../../assets/heribert.jpg" alt="Portrait von Alexander Hesingfeld"></div>
                    <div class="author-bio__text">
                        <div class="author-bio__name" itemprop="name">Heribert Innoq</div>
                        <div class="author-bio__info" itemprop="jobTitle">Senior Consultant</div>
                    </div>
                </div>
            </div>
        </div>
    </a>
    <a href="#" class="list-teaser-event">
        <div class="event-date-section">
            <div class="label talk">Training</div>
            <div class="event-date-wrapper">
                <time class="event-date" datetime="2017-06-23"><span class="event-day-month"><span class="event-day">23</span><span class="event-month">Jun</span></span>
                </time>
                <hr class="event-date-separator">
                <time class="event-date" datetime="2017-06-24"><span class="event-day-month"><span class="event-day">24</span><span class="event-month">Jun</span></span>
                    <span class="event-year">2017</span>
                </time>
            </div>
        </div>
        <div class="list-teaser__content">
            <div class="list-teaser__body">
                <div class="label training">Training</div>
                <h2 class="list-teaser-event__headline">Training Titel</h2>
                <h2 class="list-teaser-event__headline--secondary">Training Untertitel</h2>
                <h3 class="list-teaser-event__subheadline">Trainingsort<img class="arrow-right" src="../../assets/arrow-long-right-red.svg"></h3>
            </div>
            <div class="list-teaser-event__footer">
                <div class="link-teaser">Mehr erfahren</div>
            </div>
        </div>
    </a><a href="#" class="list-teaser-event">
        <div class="event-date-section">
            <div class="label talk">Training</div>
            <div class="event-date-wrapper"><time class="event-date" datetime="2017-06-23"><span class="event-day-month"><span class="event-day">23</span><span class="event-month">Jun</span></span></time>
                <hr class="event-date-separator"><time class="event-date" datetime="2017-06-24"><span class="event-day-month"><span class="event-day">24</span><span class="event-month">Jun</span></span><span class="event-year">2017</span></time></div>
        </div>
        <div class="list-teaser__content">
            <div class="list-teaser__body">
                <div class="label training">Training</div>
                <h2 class="list-teaser-event__headline">Training Titel</h2>
                <h2 class="list-teaser-event__headline--secondary">Training Untertitel</h2>
                <h3 class="list-teaser-event__subheadline">Trainingsort<img class="arrow-right" src="../../assets/arrow-long-right-red.svg"></h3>
            </div>
            <div class="list-teaser-event__footer">
                <div class="label-big hint">Ausverkauft!</div>
            </div>
        </div>
    </a>
    <a href="#" class="list-teaser-event">
        <div class="event-date-section">
            <div class="label talk">Training</div>
            <div class="event-date-wrapper">
                <time class="event-date" datetime="2017-06-23"><span class="event-day-month"><span class="event-day">23</span><span class="event-month">Jun</span></span>
                </time>
                <hr class="event-date-separator">
                <time class="event-date" datetime="2017-06-24"><span class="event-day-month"><span class="event-day">24</span><span class="event-month">Jun</span></span>
                    <span class="event-year">2017</span>
                </time>
            </div>
        </div>
        <div class="list-teaser__content">
            <div class="list-teaser__body">
                <div class="label training">Training</div>
                <h2 class="list-teaser-event__headline">Training Titel</h2>
                <h2 class="list-teaser-event__headline--secondary">Training Untertitel</h2>
                <h3 class="list-teaser-event__subheadline">Trainingsort<img class="arrow-right" src="../../assets/arrow-long-right-red.svg"></h3>
            </div>
            <div class="list-teaser-event__footer">
                <div class="link-teaser">Mehr erfahren</div>
                <div class="label-big hint">Ausverkauft!</div>
            </div>
        </div>
    </a>
</div>
<div>
    <a href="#" class="list-teaser-event">
        <div class="event-date-section">
            <div class="label talk">Vortrag</div>
            <time class="event-date" datetime="2017-06-23">
                <span class="event-day-month">
                    <span class='event-day'>23</span>
                    <span class='event-month'>Jun</span>
                </span>
                <span class='event-year'>2017</span>
            </time>
        </div>
        <div class="list-teaser__content">
            <div class="list-teaser__body">
                <div class="label talk">Vortrag</div>
                <div class="label slides">Folien verfügbar</div>
                <h2 class="list-teaser-event__headline">Vortrag Titel</h2>
                <h3 class="list-teaser-event__subheadline">
                    Vortragsort / 10-12 Uhr
                    <img class="arrow-right" src={context.app.uri("assets/arrow-long-right-red.svg")} />
                </h3>
            </div>
            <div class="list-teaser__footer">
                <div class="author-bio author-bio--short" itemscope itemtype="http://schema.org/Person">
                    <div class="author-bio__image avatar avatar--small">
                        <img class="avatar__image" itemprop="photo" src={context.app.uri("assets/heribert.jpg")} alt="Portrait von Alexander Hesingfeld" />
                    </div>
                    <div class="author-bio__text">
                        <div class="author-bio__name" itemprop="name">
                            Heribert Innoq
                        </div>
                        <div class="author-bio__info" itemprop="jobTitle" >Senior Consultant</div>
                    </div>
                </div>
            </div>
        </div>
    </a>

    <a href="#" class="list-teaser-event">
      <div class="event-date-section">
          <div class="label talk">Training</div>
          <div class="event-date-wrapper">
              <time class="event-date" datetime="2017-06-23">
                  <span class="event-day-month">
                      <span class='event-day'>23</span>
                      <span class='event-month'>Jun</span>
                  </span>
              </time>
              <hr class="event-date-separator" />
              <time class="event-date" datetime="2017-06-24">
                  <span class="event-day-month">
                      <span class='event-day'>24</span>
                      <span class='event-month'>Jun</span>
                  </span>
                  <span class='event-year'>2017</span>
              </time>
          </div>
      </div>
      <div class="list-teaser__content">
          <div class="list-teaser__body">
              <div class="label training">Training</div>
              <h2 class="list-teaser-event__headline">Training Titel</h2>
              <h2 class="list-teaser-event__headline--secondary">Training Untertitel</h2>
              <h3 class="list-teaser-event__subheadline">
                  Trainingsort
                  <img class="arrow-right" src={context.app.uri("assets/arrow-long-right-red.svg")} />
              </h3>
          </div>
          <div class="list-teaser-event__footer">
              <div class="link-teaser">Mehr erfahren</div>
          </div>
      </div>
    </a>

    <a href="#" class="list-teaser-event">
      <div class="event-date-section">
          <div class="label talk">Training</div>
          <div class="event-date-wrapper">
              <time class="event-date" datetime="2017-06-23">
                  <span class="event-day-month">
                      <span class='event-day'>23</span>
                      <span class='event-month'>Jun</span>
                  </span>
              </time>
              <hr class="event-date-separator" />
              <time class="event-date" datetime="2017-06-24">
                  <span class="event-day-month">
                      <span class='event-day'>24</span>
                      <span class='event-month'>Jun</span>
                  </span>
                  <span class='event-year'>2017</span>
              </time>
          </div>
      </div>
      <div class="list-teaser__content">
          <div class="list-teaser__body">
              <div class="label training">Training</div>
              <h2 class="list-teaser-event__headline">Training Titel</h2>
              <h2 class="list-teaser-event__headline--secondary">Training Untertitel</h2>
              <h3 class="list-teaser-event__subheadline">
                  Trainingsort
                  <img class="arrow-right" src={context.app.uri("assets/arrow-long-right-red.svg")} />
              </h3>
          </div>
          <div class="list-teaser-event__footer">
              <div class="label-big hint">Ausverkauft!</div>
          </div>
      </div>
    </a>

    <a href="#" class="list-teaser-event">
      <div class="event-date-section">
          <div class="label talk">Training</div>
          <div class="event-date-wrapper">
              <time class="event-date" datetime="2017-06-23">
                  <span class="event-day-month">
                      <span class='event-day'>23</span>
                      <span class='event-month'>Jun</span>
                  </span>
              </time>
              <hr class="event-date-separator" />
              <time class="event-date" datetime="2017-06-24">
                  <span class="event-day-month">
                      <span class='event-day'>24</span>
                      <span class='event-month'>Jun</span>
                  </span>
                  <span class='event-year'>2017</span>
              </time>
          </div>
      </div>
      <div class="list-teaser__content">
          <div class="list-teaser__body">
              <div class="label training">Training</div>
              <h2 class="list-teaser-event__headline">Training Titel</h2>
              <h2 class="list-teaser-event__headline--secondary">Training Untertitel</h2>
              <h3 class="list-teaser-event__subheadline">
                  Trainingsort
                  <img class="arrow-right" src={context.app.uri("assets/arrow-long-right-red.svg")} />
              </h3>
          </div>
          <div class="list-teaser-event__footer">
              <div class="link-teaser">Mehr erfahren</div>
              <div class="label-big hint">Ausverkauft!</div>
          </div>
      </div>
    </a>
</div>
/* No context defined for this component. */
  • Content:
    $event-date-section-height: ($label-font-size * $label-line-height) + (2 * $spacer-xxs);
    
    .list-teaser-event {
      @extend %list-teaser;
    
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: $event-date-section-height + $spacer-base;
      background-color: $list-teaser-background-color;
    
      .list-teaser-event__footer {
        @extend %list-teaser-footer;
    
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
    
        .link-teaser {
          margin-bottom: $spacer-sm;
        }
      }
    
      .list-teaser-event__footer,
      .list-teaser__footer {
        .author-bio {
          flex-basis: 100%;
          margin-bottom: 0;
        }
      }
    }
    
    .list-teaser__content {
      display: flex;
      flex-direction: column;
      flex-grow: 1;
      justify-content: space-between;
      width: 100%;
    }
    
    .list-teaser-event__headline {
      @extend %h3;
    
      margin-bottom: $spacer-xs;
      line-height: $list-teaser-event-headline-line-height-small;
      color: $list-teaser-event-headline-color;
      font-size: $list-teaser-event-headline-font-size-small;
    }
    
    .list-teaser-event__headline--secondary {
      @extend %h5;
    
      margin-bottom: $spacer-sm;
      color: $list-teaser-event-subheadline-color;
    }
    
    .list-teaser-event__subheadline {
      @extend %body-font-italic;
    
      margin-bottom: $spacer-xs;
      line-height: $list-teaser-event-subheadline-line-height-small;
      font-size: $list-teaser-event-subheadline-font-size-small;
    }
    
    //
    // Media Queries
    //
    @media screen and (max-width: $grid-breakpoint-md) {
      .list-teaser-event {
        .label {
          margin-bottom: 0;
          text-align: center;
    
          &.training,
          &.talk {
            border-left: 0;
          }
        }
    
        .list-teaser__content {
          align-self: flex-start; // Prevent content to be centered vertically
        }
      }
    }
    
    @media screen and (min-width: $grid-breakpoint-md) {
      .list-teaser-event {
        flex-direction: row;
        align-items: stretch;
        margin-top: 0;
    
        .event-date-section {
          .label {
            display: none;
          }
        }
    
        .list-teaser-event__footer {
          flex-direction: row-reverse;
          justify-content: space-between;
        }
      }
    
      .list-teaser-event__headline {
        line-height: $list-teaser-event-headline-line-height;
        font-size: $list-teaser-event-headline-font-size;
      }
    
      .list-teaser-event__subheadline {
        line-height: $list-teaser-event-subheadline-line-height;
        font-size: $list-teaser-event-subheadline-font-size;
      }
    }
    
    @media screen and (min-width: $grid-breakpoint-lg) {
      .list-teaser-event {
        .list-teaser-event__footer,
        .list-teaser__footer {
          .author-bio {
            flex-basis: auto;
          }
        }
      }
    }
    
  • URL: /components/raw/event-list-teaser/_event-list-teaser.scss
  • Filesystem Path: components/02-molecules/visual-elements/teaser/list-teaser/event-list-teaser/_event-list-teaser.scss
  • Size: 2.6 KB
  • Handle: @event-list-teaser
  • Preview:
  • Filesystem Path: components/02-molecules/visual-elements/teaser/list-teaser/event-list-teaser/event-list-teaser.html

There are no notes for this item.