# Event List Teaser

Ready

- HTML
- View
- Context
- Assets
- Info
- Notes

`

    <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. */

`
File:

- 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:
  - With layout
  - Component only
- Filesystem Path: components/04-molecules/teaser/list-teaser/event-list-teaser/event-list-teaser.html

No notes defined.