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;
      color: $date-section-month-color;
      font-size: $font-size-xs;
      text-transform: uppercase;
    }
    
    .event-year {
      @extend %heading-font-regular;
    
      padding-left: $spacer-xxs;
      border-left: 1px solid $date-section-year-color;
      margin-left: $spacer-xs;
      color: $date-section-year-color;
      font-size: $font-size-xs;
    }
    
    .event-date-separator {
      width: $spacer-base;
      height: 2px;
      border: 0;
      margin: 0;
      background-color: $date-section-year-color;
    }
    
    // Breakpoints
    @media screen and (min-width: $grid-breakpoint-md) {
      .event-date-section {
        width: 80px;
        margin-top: 0;
      }
    
      .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 {
        padding-top: $spacer-xxs;
        padding-left: 0;
        border-top: 1px solid $date-section-year-color;
        border-left: 0;
        margin-left: 0;
        font-size: $font-size-xs;
      }
    
      .event-date-separator {
        margin: $spacer-sm 0;
        transform: rotate(90deg);
      }
    }
    
  • URL: /components/raw/date/_date.scss
  • Filesystem Path: components/05-atoms/text/block/date/_date.scss
  • Size: 1.9 KB

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