Open today

When to use this component

The open today component is used to show if a certain location is open today and what the opening hours are for today. It is mainly used on overview pages with locations. It may also be used on detail pages of locations.

When not to use this component

The open today component cannot be used to indicate if a location is open now. The open today commonent does not show if a location is open at the current point in time, but it shows if the location is (or was) open today.

How it works

When the location is open today, the open today component shows “Open today” and the opening hours for today are shown.

When the location is not open today, the open today component shows “Closed today” no opening hours are shown.

In case the location has multiple ways of being open, for instance, free entrance without appointment versus appointment only, the “multi-channel” variant is used. In this case, the opening hours for each way are shown with a clear indication of the difference in the opening hours: “Open today”, “Open by appointment”.

Usage within the style guide

The open today component is used in the opening hours accordion component.

<div class="openinghours-widget" data-type="day">
  <div class="openinghours openinghours--details openinghours--day-{{ open ? 'open' : 'closed' }}" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
    <div class="openinghours--date openinghours--special-day" property="validFrom validThrough" datetime="2018-12-21">
      <span class="openinghours--date-special-day">Today</span>
      <span class="openinghours--date-between">, </span>
      <span class="openinghours--date-day-of-week">
          <link property="dayOfWeek" href="http://schema.org/Friday">Friday
      </span>
      <span class="openinghours--date-day">21</span>
      <span class="openinghours--date-month">December</span>
    </div>
    <div class="openinghours--content">
      <div class="openinghours--times">
        <span class="openinghours--status">{{ open ? 'open' : 'closed' }}</span>
        {% if open %}
        <div class="openinghours--time">
          <span class="openinghours--time-prefix">from</span>
          <time property="opens" datetime="08:30" aria-label="08:30">
            08:30                            h                        </time>
          <span class="openinghours--time-separator">to</span>
          <time property="closes" datetime="12:00" aria-label="12:00">
            12:00                            h                        </time>
        </div>
        {% endif %}
      </div>
    </div>
  </div>

  {% if channels > 1 %}
    <div class="openinghours openinghours--details openinghours--day-open" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
      <div class="openinghours--date openinghours--special-day" property="validFrom validThrough" datetime="2018-12-21">
        <span class="openinghours--date-special-day">Today</span>
        <span class="openinghours--date-between">, </span>
        <span class="openinghours--date-day-of-week">
            <link property="dayOfWeek" href="http://schema.org/Friday">Friday
        </span>
        <span class="openinghours--date-day">21</span>
        <span class="openinghours--date-month">December</span>
      </div>
      <div class="openinghours--content">
        <div class="openinghours--times">
          <span class="openinghours--status">by appointment</span>
          <div class="openinghours--time">
            <span class="openinghours--time-prefix">from</span>
            <time property="opens" datetime="09:00" aria-label="09:00">
              09:00                            h                        </time>
            <span class="openinghours--time-separator">to</span>
            <time property="closes" datetime="17:00" aria-label="17:00">
              17:00                            h                        </time>
          </div>
        </div>
      </div>
    </div>
  {% endif %}
</div>
<!-- Default -->
<div class="openinghours-widget" data-type="day">
    <div class="openinghours openinghours--details openinghours--day-open" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
        <div class="openinghours--date openinghours--special-day" property="validFrom validThrough" datetime="2018-12-21">
            <span class="openinghours--date-special-day">Today</span>
            <span class="openinghours--date-between">, </span>
            <span class="openinghours--date-day-of-week">
                <link property="dayOfWeek" href="http://schema.org/Friday">Friday
            </span>
            <span class="openinghours--date-day">21</span>
            <span class="openinghours--date-month">December</span>
        </div>
        <div class="openinghours--content">
            <div class="openinghours--times">
                <span class="openinghours--status">open</span>
                <div class="openinghours--time">
                    <span class="openinghours--time-prefix">from</span>
                    <time property="opens" datetime="08:30" aria-label="08:30">
                        08:30 h </time>
                    <span class="openinghours--time-separator">to</span>
                    <time property="closes" datetime="12:00" aria-label="12:00">
                        12:00 h </time>
                </div>
            </div>
        </div>
    </div>

</div>

<!-- Multi Channel -->
<div class="openinghours-widget" data-type="day">
    <div class="openinghours openinghours--details openinghours--day-open" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
        <div class="openinghours--date openinghours--special-day" property="validFrom validThrough" datetime="2018-12-21">
            <span class="openinghours--date-special-day">Today</span>
            <span class="openinghours--date-between">, </span>
            <span class="openinghours--date-day-of-week">
                <link property="dayOfWeek" href="http://schema.org/Friday">Friday
            </span>
            <span class="openinghours--date-day">21</span>
            <span class="openinghours--date-month">December</span>
        </div>
        <div class="openinghours--content">
            <div class="openinghours--times">
                <span class="openinghours--status">open</span>
                <div class="openinghours--time">
                    <span class="openinghours--time-prefix">from</span>
                    <time property="opens" datetime="08:30" aria-label="08:30">
                        08:30 h </time>
                    <span class="openinghours--time-separator">to</span>
                    <time property="closes" datetime="12:00" aria-label="12:00">
                        12:00 h </time>
                </div>
            </div>
        </div>
    </div>

    <div class="openinghours openinghours--details openinghours--day-open" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
        <div class="openinghours--date openinghours--special-day" property="validFrom validThrough" datetime="2018-12-21">
            <span class="openinghours--date-special-day">Today</span>
            <span class="openinghours--date-between">, </span>
            <span class="openinghours--date-day-of-week">
                <link property="dayOfWeek" href="http://schema.org/Friday">Friday
            </span>
            <span class="openinghours--date-day">21</span>
            <span class="openinghours--date-month">December</span>
        </div>
        <div class="openinghours--content">
            <div class="openinghours--times">
                <span class="openinghours--status">by appointment</span>
                <div class="openinghours--time">
                    <span class="openinghours--time-prefix">from</span>
                    <time property="opens" datetime="09:00" aria-label="09:00">
                        09:00 h </time>
                    <span class="openinghours--time-separator">to</span>
                    <time property="closes" datetime="17:00" aria-label="17:00">
                        17:00 h </time>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Closed -->
<div class="openinghours-widget" data-type="day">
    <div class="openinghours openinghours--details openinghours--day-closed" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
        <div class="openinghours--date openinghours--special-day" property="validFrom validThrough" datetime="2018-12-21">
            <span class="openinghours--date-special-day">Today</span>
            <span class="openinghours--date-between">, </span>
            <span class="openinghours--date-day-of-week">
                <link property="dayOfWeek" href="http://schema.org/Friday">Friday
            </span>
            <span class="openinghours--date-day">21</span>
            <span class="openinghours--date-month">December</span>
        </div>
        <div class="openinghours--content">
            <div class="openinghours--times">
                <span class="openinghours--status">closed</span>
            </div>
        </div>
    </div>

</div>

/* Default */
{
  "open": true,
  "channels": 1
}

/* Multi Channel */
{
  "open": true,
  "channels": 2
}

/* Closed */
{
  "open": null
}

  • Content:
    $breakpoint-openinghours: '(min-width: 750px)';
    
    // ===
    // Day view
    // ===
    .openinghours-widget {
      &[data-type="day"] {
        display: inline-block;
        border-radius: border-radius('radius-1');
        overflow: hidden;
    
        > * {
          line-height: 1.4rem;
        }
    
        .channel-label {
          @include bold-text;
    
          float: left;
          font-size: 0;
    
          &::after {
            display: inline-block;
            content: " ";
          }
    
          &:nth-of-type(n + 2) {
            padding-left: 1.9rem;
            font-size: .8rem;
    
            + .openinghours {
              padding-top: 0;
    
              &::before {
                display: none;
              }
    
              .openinghours--date,
              .openinghours--status {
                display: none;
              }
    
            }
          }
        }
    
        .openinghours {
          margin-top: -.6rem;
          padding: .3rem .5rem .3rem calc(.5rem + 1.5em);
          background-color: color('green', -4);
    
          &::before {
            margin: 0 0 0 -1.2em;
            font-size: 1.5em;
            vertical-align: -25%;
          }
    
          &:first-of-type {
            @include icon(clock);
            margin-top: 0;
          }
    
          &--day-closed {
            background-color: color('red', -4);
          }
    
          & + .openinghours--day-closed {
            display: none;
          }
    
          &--date,
          &--content,
          &--times,
          &--times-between,
          &--time {
            display: inline;
          }
    
          &--time time:last-of-type {
            &::before {
              content: "-";
            }
          }
    
          &--date,
          &--status {
            @include bold-text;
          }
    
          &--special-day {
            > span {
              display: none;
            }
    
            > span:first-child {
              display: inline;
            }
          }
    
          &--time-prefix,
          &--time-separator {
            display: none;
          }
        }
      }
    }
    
  • URL: /components/raw/day-widget/_day-widget.scss
  • Filesystem Path: components/21-atoms/day-widget/_day-widget.scss
  • Size: 1.8 KB