Event List Teaser 

<div class="demo demo--black">
    <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
                    <span class="icon icon-arrow-long-right icon--brand-primary"></span>
                </h3>
            </div>
            <div class="list-teaser__footer">
                <div rel="author" class="author-bio author-bio--short" href="#author-bio" itemscope itemtype="http://schema.org/Person">
                    <div class="author-bio__image avatar avatar--sm">
                        <img itemprop="photo" class="avatar__image" src="../../assets/example-content/heribert.jpg" alt="Portrait von Heribert Innoq" />
                    </div>
                    <address>
                        <span rel="author" class="author-bio__name" itemprop="fullName">Heribert Innoq</span>
                        <span class="author-bio__info" itemprop="jobTitle">Senior Consultant</span>
                    </address>
                </div>
                <div rel="author" class="author-bio author-bio--short" href="#author-bio" itemscope itemtype="http://schema.org/Person">
                    <div class="author-bio__image avatar avatar--sm">
                        <img itemprop="photo" class="avatar__image" src="../../assets/example-content/heribert.jpg" alt="Portrait von Heribert Innoq" />
                    </div>
                    <address>
                        <span rel="author" class="author-bio__name" itemprop="fullName">Heribert Innoq</span>
                        <span class="author-bio__info" itemprop="jobTitle">Senior Consultant</span>
                    </address>
                </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
                    <span class="icon icon-arrow-long-right icon--brand-primary"></span>
                </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
                    <span class="icon icon-arrow-long-right icon--brand-primary"></span>
                </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
                    <span class="icon icon-arrow-long-right icon--brand-primary"></span>
                </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 class="demo demo--black">
    <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
                    <span class="icon icon-arrow-long-right icon--brand-primary"></span>
                </h3>
            </div>
            <div class="list-teaser__footer">
                <div rel="author" class="author-bio author-bio--short" href="#author-bio" itemscope itemtype="http://schema.org/Person">
                    <div class="author-bio__image avatar avatar--sm">
                        <img itemprop="photo" class="avatar__image" src="{{ path '/assets/example-content/heribert.jpg' }}"  alt="Portrait von Heribert Innoq"/>
                    </div>
                    <address>
                        <span rel="author" class="author-bio__name" itemprop="fullName">Heribert Innoq</span>
                        <span class="author-bio__info" itemprop="jobTitle">Senior Consultant</span>
                    </address>
                </div>
                <div rel="author" class="author-bio author-bio--short" href="#author-bio" itemscope itemtype="http://schema.org/Person">
                    <div class="author-bio__image avatar avatar--sm">
                        <img itemprop="photo" class="avatar__image" src="{{ path '/assets/example-content/heribert.jpg' }}"
                            alt="Portrait von Heribert Innoq" />
                    </div>
                    <address>
                        <span rel="author" class="author-bio__name" itemprop="fullName">Heribert Innoq</span>
                        <span class="author-bio__info" itemprop="jobTitle">Senior Consultant</span>
                    </address>
                </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
                    <span class="icon icon-arrow-long-right icon--brand-primary"></span>
                </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
                    <span class="icon icon-arrow-long-right icon--brand-primary"></span>
                </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
                    <span class="icon icon-arrow-long-right icon--brand-primary"></span>
                </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. */
  • Content: 
    $event-date-section-height: ($font-size-xs) + (2 * $spacer-xxs);

.list-teaser-event {
  @extend %list-teaser;

  display: flex;
  flex-direction: column;
  align-items: center;

  width: 100%;
  margin-top: $event-date-section-height;

  background-color: $list-teaser-background-color;

  .event-date-section {
    margin-top: -1.8rem; //Magic Number
  }

  .list-teaser-event__footer {
    @extend %list-teaser-footer;

    flex-direction: column;
    align-items: center;

    .link-teaser {
      margin-bottom: $spacer-sm;
    }
  }

  .list-teaser-event__footer,
  .list-teaser__footer {
    .author-bio {
      flex-basis: 100%;
      color: $list-teaser-event-subheadline-color;
    }
  }
}

a.list-teaser-event {
  @extend %hover-glow;
}

.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;
  font-size: $font-size-md;
  color: $list-teaser-event-headline-color;
}

.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;
  font-size: $font-size-sm;
  color: $list-teaser-event-subheadline-color;

  .icon {
    margin-left: $spacer-xxs;
  }
}

//
// 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 {
      margin-top: 0;

      .label {
        display: none;
      }
    }

    .list-teaser-event__footer {
      flex-direction: row-reverse;
      justify-content: space-between;
    }
  }

  .list-teaser-event__headline {
    font-size: $font-size-lg;
  }

  .list-teaser-event__subheadline {
    font-size: $font-size-md;
  }
}

@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/04-molecules/teaser/list-teaser/event-list-teaser/_event-list-teaser.scss
  • Size: 2.4 KB
  • Handle: @event-list-teaser
  • Preview:
  • Filesystem Path: components/04-molecules/teaser/list-teaser/event-list-teaser/event-list-teaser.html

No notes defined.