# Event Date Section

Ready

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

`

    <div class="demo">
        <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>

        <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="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 class="demo">
        <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>

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

`
File:

- Content:
  `

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

        .label {
          margin: 0;
          text-align: center;
          border-left: 0;
        }
      }

      .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;
        justify-content: center;

        padding: $spacer-xxs $spacer-sm;
      }

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

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

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

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

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

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

        margin-left: $spacer-xs;
        padding-left: $spacer-xxs;

        font-size: $font-size-xs;
        color: $date-section-year-color;

        border-left: 1px solid $date-section-year-color;
      }

      .event-date-separator {
        width: $spacer-base;
        height: 2px;
        margin: 0;

        background-color: $date-section-year-color;
        border: 0;
      }

      // Breakpoints
      @media screen and (min-width: $grid-breakpoint-md) {
        .event-date-section {
          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 {
          margin-left: 0;
          padding-top: $spacer-xxs;
          padding-left: 0;

          font-size: $font-size-xs;

          border-top: 1px solid $date-section-year-color;
          border-left: 0;
        }

        .event-date-separator {
          transform: rotate(90deg);
          margin: $spacer-sm 0;
        }
      }

  `
- URL: /components/raw/event-date-section/_event-date-section.scss
- Filesystem Path: components/04-molecules/event-date-section/_event-date-section.scss
- Size: 1.9 KB

- Handle: @event-date-section
- Preview:
  - With layout
  - Component only
- Filesystem Path: components/04-molecules/event-date-section/event-date-section.html

No notes defined.