Date 

<div>
    a simple date<br /><br /><time class="date" datetime="2017-06-23">23. Juni 2017</time><br /><br /><br />date for event teasers<br /><br /><br />
    <div class="event-date-section">
        <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>
    <br /><br /><br />date for event teasers with duration<br /><br /><br /><br />
    <div class="event-date-section">
        <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>
 
<div>
    a simple date<br />
    <br />
    <time class="date" datetime="2017-06-23">23. Juni 2017</time>
    <br />
    <br />
    <br />
    date for event teasers<br />
    <br />
    <br />
    <div class="event-date-section">
        <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>
    <br />
    <br />
    <br />
    date for event teasers with duration<br />
    <br />
    <br />
    <br />
    <div class="event-date-section">
        <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>
 
/* No context defined. */
  • Content: 
    .date {
  @extend %heading-font-bold;

  font-size: $font-size-base;
}

//Event Date for Teasers
.event-date-section {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  background-color: $date-section-background-color;
}

.event-date-wrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.event-date {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: $spacer-xxs $spacer-sm;
}

.event-day-month {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.event-day {
  @extend %heading-font-heavy;

  color: $date-section-day-color;
  font-size: $font-size-lg;
}

.event-month {
  @extend %heading-font-heavy;

  margin-bottom: 0;
  text-transform: uppercase;
  color: $date-section-month-color;
  font-size: $font-size-xs;
}

.event-year {
  @extend %heading-font-regular;

  margin-left: $spacer-xs;
  border-left: 1px solid $date-section-year-color;
  padding-left: $spacer-xxs;
  color: $date-section-year-color;
  font-size: $font-size-xs;
}

.event-date-separator {
  border: 0;
  background-color: $date-section-year-color;
  width: $spacer-base;
  height: 2px;
}

// Breakpoints
@media screen and (min-width: $grid-breakpoint-md) {
  .event-date-section {
    margin-top: 0;
    width: 80px;
  }

  .event-date-wrapper {
    flex-direction: column;
  }

  .event-date {
    flex-direction: column;
  }

  .event-day {
    font-size: $font-size-xl;
  }

  .event-month {
    margin-bottom: $spacer-xxs;
    font-size: $font-size-base;
  }

  .event-year {
    margin-left: 0;
    border-top: 1px solid $date-section-year-color;
    border-left: 0;
    padding-left: 0;
    font-size: $font-size-xs;
  }

  .event-date-separator {
    transform: rotate(90deg);
    margin: $spacer-sm 0;
  }
}
  • URL: /components/raw/date/_date.scss
  • Filesystem Path: components/01-atoms/text/block/date/_date.scss
  • Size: 1.8 KB

Will be most likely a block element in the article intro.