<div class="blocks">
    <a href="#" class="list-teaser-event tile">
        <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-svg 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--small">
                        <img itemprop="photo" class="avatar__image" src="../../assets/example-content/heribert.jpg" alt="Portrait von Heribert Innoq" />
                    </div>
                    <address class="author-bio__text">
                        <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 tile">
        <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-svg 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>
</div>
<div class="blocks">
    <a href="#" class="list-teaser-event tile">
        <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-svg 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--small">
                        <img itemprop="photo" class="avatar__image" src={context.app.uri("assets/example-content/heribert.jpg")} alt="Portrait von Heribert Innoq"/>
                    </div>
                    <address class="author-bio__text">
                        <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 tile">
      <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-svg 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>
</div>
/* No context defined. */
  • Content:
    $event-list-teaser-height: ms(34);
    
    .list-teaser-event {
      &.tile {
        min-height: $event-list-teaser-height;
        margin-bottom: 0;
      }
    }
    
  • URL: /components/raw/event-tile-teaser/_event-tile-teaser.scss
  • Filesystem Path: components/04-molecules/visual-elements/teaser/tile-teaser/event-tile-teaser/_event-tile-teaser.scss
  • Size: 139 Bytes
  • Handle: @event-tile-teaser
  • Preview:
  • Filesystem Path: components/04-molecules/visual-elements/teaser/tile-teaser/event-tile-teaser/event-tile-teaser.html

No notes defined.