Opening hours accordion

When to use this component

Use the opening hours accordion component to:

  • Show an overview of opening hours for a certain location that has one or multiple ways of being open, for instance, free entrance without appointment versus appointment only.
  • Include opening hours but clearly show the type of opening hours and show or hide them depending on if the opening hours are essential for all users or only necessary for a minority of users (progressive disclosure principle).
  • Offer opening hours for this week and for this month and what the opening hours are for each day but also have a quick way to show if the location is open today and what the opening hours are for today.

The opening hours accordion is only to be used on detail pages.

How it works

The opening hours accordion uses the accordion component with a single expandable item to show or hide a certain type of opening hours (a way of being open) for a certain location.

The opening hours are shown using the opening hours component.

To clearly indicate what type of opening hours (the way of being open) the opening hours accordion hides, the opening hours accordion has a title (heading 3) representing the type of opening hours.

Next to that, the opening hours accordion contains an open today component. This open today component is always visible so that users can quickly see if the location is open today and what the opening hours are for today.

Finally, the opening hours accordion can be repeated for every different type of opening hours (different ways the location can be open). There should be one opening hours accordion per different type of opening hours.

By default, all opening hours accordion components are collapsed.

<div class="opening-hours-accordion">
  <div class="opening-hours-accordion__item">
    <h3>Appointments</h3>
    {% include '@day-widget' with {
      open: true
    } %}

    {% set openingHoursMonth %}
      {% include '@week-month-widget' %}
    {% endset %}

    {% include '@accordion' with {
      buttonText: 'All opening hours',
      content: openingHoursMonth
    } %}
  </div>
</div>
<div class="opening-hours-accordion">
    <div class="opening-hours-accordion__item">
        <h3>Appointments</h3>
        <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>

        <div class="accordion">
            <h3>
                <button aria-controls="accordion--single--content--1" aria-expanded="false" class="accordion--button">All opening hours</button>
            </h3>
            <div id="accordion--single--content--1" class="accordion--content">

                <div class="tabs opening-hours" data-tabs>
                    <ul role="tablist">
                        <li role="presentation">
                            <a role="tab" href="#opening-hoursweek" aria-controls="opening-hoursweek">
                                This week
                            </a>
                        </li>
                        <li role="presentation">
                            <a role="tab" href="#opening-hoursmonth" aria-controls="opening-hoursmonth">
                                This month
                            </a>
                        </li>
                    </ul>
                    <div role="tabpanel" id="opening-hoursweek">
                        <div class="openinghours-widget" data-type="week-from-now">
                            <div vocab="http://schema.org/" typeof="Library" class="openinghours openinghours--list">
                                <ul class="openinghours--days">
                                    <li class="openinghours--day openinghours--day-open">
                                        <div class="openinghours openinghours--details openinghours--day-open openinghours--day-passed" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
                                            <div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-14">
                                                <span class="openinghours--date-day-of-week">
                                                    <link property="dayOfWeek" href="http://schema.org/Wednesday">Wednesday
                                                </span>
                                                <span class="openinghours--date-day">14</span>
                                                <span class="openinghours--date-month">November</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="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>
                                    </li>
                                    <li class="openinghours--day openinghours--day-open">
                                        <div class="openinghours openinghours--details openinghours--day-open openinghours--day-passed" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
                                            <div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-15">
                                                <span class="openinghours--date-day-of-week">
                                                    <link property="dayOfWeek" href="http://schema.org/Thursday">Thursday
                                                </span>
                                                <span class="openinghours--date-day">15</span>
                                                <span class="openinghours--date-month">November</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="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>
                                    </li>
                                    <li class="openinghours--day openinghours--day-open">
                                        <div class="openinghours openinghours--details openinghours--day-open openinghours--day-passed" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
                                            <div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-16">
                                                <span class="openinghours--date-day-of-week">
                                                    <link property="dayOfWeek" href="http://schema.org/Friday">Friday
                                                </span>
                                                <span class="openinghours--date-day">16</span>
                                                <span class="openinghours--date-month">November</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="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>
                                    </li>
                                    <li class="openinghours--day openinghours--day-open">
                                        <div class="openinghours openinghours--details openinghours--day-open openinghours--day-passed" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
                                            <div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-17">
                                                <span class="openinghours--date-day-of-week">
                                                    <link property="dayOfWeek" href="http://schema.org/Saturday">Saturday
                                                </span>
                                                <span class="openinghours--date-day">17</span>
                                                <span class="openinghours--date-month">November</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="09:00" aria-label="09:00">
                                                            09:00 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>
                                    </li>
                                    <li class="openinghours--day openinghours--day-open">
                                        <div class="openinghours openinghours--details openinghours--day-open openinghours--day-passed" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
                                            <div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-18">
                                                <span class="openinghours--date-day-of-week">
                                                    <link property="dayOfWeek" href="http://schema.org/Sunday">Sunday
                                                </span>
                                                <span class="openinghours--date-day">18</span>
                                                <span class="openinghours--date-month">November</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="22:00" aria-label="22:00">
                                                            22:00 h
                                                        </time>
                                                        <span class="openinghours--time-separator">to</span>
                                                        <time property="closes" datetime="00:00" aria-label="00:00">
                                                            00:00 h
                                                        </time>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="openinghours--day openinghours--day-open">
                                        <div class="openinghours openinghours--details openinghours--day-open openinghours--day-passed" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
                                            <div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-19">
                                                <span class="openinghours--date-day-of-week">
                                                    <link property="dayOfWeek" href="http://schema.org/Monday">Monday
                                                </span>
                                                <span class="openinghours--date-day">19</span>
                                                <span class="openinghours--date-month">November</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="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>
                                    </li>
                                    <li class="openinghours--day openinghours--day-open">
                                        <div class="openinghours openinghours--details openinghours--day-open openinghours--day-passed" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
                                            <div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-20">
                                                <span class="openinghours--date-day-of-week">
                                                    <link property="dayOfWeek" href="http://schema.org/Tuesday">Tuesday
                                                </span>
                                                <span class="openinghours--date-day">20</span>
                                                <span class="openinghours--date-month">November</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="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>
                                    </li>
                                </ul>
                            </div>
                        </div>

                    </div>
                    <div role="tabpanel" id="opening-hoursmonth">
                        <div class="openinghours-widget" data-type="month">
                            <div vocab="http://schema.org/" typeof="Library" class="openinghours openinghours--calendar">
                                <div class="openinghours--header">
                                    <button class="openinghours--prev">
                                        previous
                                    </button>
                                    <div class="openinghours--month">
                                        November 2018
                                    </div>
                                    <button class="openinghours--next">
                                        next
                                    </button>
                                </div>
                                <ul class="openinghours--days">
                                    <li aria-hidden="true" class="openinghours--day openinghours--day--day-of-week">Mo
                                    </li>
                                    <li aria-hidden="true" class="openinghours--day openinghours--day--day-of-week">Tu
                                    </li>
                                    <li aria-hidden="true" class="openinghours--day openinghours--day--day-of-week">We
                                    </li>
                                    <li aria-hidden="true" class="openinghours--day openinghours--day--day-of-week">Th
                                    </li>
                                    <li aria-hidden="true" class="openinghours--day openinghours--day--day-of-week">Fr
                                    </li>
                                    <li aria-hidden="true" class="openinghours--day openinghours--day--day-of-week">Sa
                                    </li>
                                    <li aria-hidden="true" class="openinghours--day openinghours--day--day-of-week">Su
                                    </li>
                                    <li aria-hidden="true" class="openinghours--day openinghours--day-disabled"></li>
                                    <li aria-hidden="true" class="openinghours--day openinghours--day-disabled"></li>
                                    <li aria-hidden="true" class="openinghours--day openinghours--day-disabled"></li>
                                    <li aria-setsize="30" aria-posinset="1" tabindex="-1" class="openinghours--day openinghours--day-closed openinghours--day-passed">
                                        <span aria-hidden="true">1</span>
                                        <div class="openinghours openinghours--details openinghours--day-closed openinghours--day-passed" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
                                            <div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-01">
                                                <span class="openinghours--date-day-of-week">
                                                    <link property="dayOfWeek" href="http://schema.org/Thursday">Thursday
                                                </span>
                                                <span class="openinghours--date-day">1</span>
                                                <span class="openinghours--date-month">November</span>
                                            </div>
                                            <div class="openinghours--content">
                                                <div class="openinghours--times">
                                                    <span class="openinghours--status">closed</span>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li aria-setsize="30" aria-posinset="2" tabindex="-1" class="openinghours--day openinghours--day-closed openinghours--day-passed">
                                        <span aria-hidden="true">2</span>
                                        <div class="openinghours openinghours--details openinghours--day-closed openinghours--day-passed" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
                                            <div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-02">
                                                <span class="openinghours--date-day-of-week">
                                                    <link property="dayOfWeek" href="http://schema.org/Friday">Friday
                                                </span>
                                                <span class="openinghours--date-day">2</span>
                                                <span class="openinghours--date-month">November</span>
                                            </div>
                                            <div class="openinghours--content">
                                                <div class="openinghours--times">
                                                    <span class="openinghours--status">closed</span>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li aria-setsize="30" aria-posinset="3" tabindex="-1" class="openinghours--day openinghours--day-closed openinghours--day-passed">
                                        <span aria-hidden="true">3</span>
                                        <div class="openinghours openinghours--details openinghours--day-closed openinghours--day-passed" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
                                            <div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-03">
                                                <span class="openinghours--date-day-of-week">
                                                    <link property="dayOfWeek" href="http://schema.org/Saturday">Saturday
                                                </span>
                                                <span class="openinghours--date-day">3</span>
                                                <span class="openinghours--date-month">November</span>
                                            </div>
                                            <div class="openinghours--content">
                                                <div class="openinghours--times">
                                                    <span class="openinghours--status">closed</span>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li aria-setsize="30" aria-posinset="4" tabindex="-1" class="openinghours--day openinghours--day-closed openinghours--day-passed">
                                        <span aria-hidden="true">4</span>
                                        <div class="openinghours openinghours--details openinghours--day-closed openinghours--day-passed" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
                                            <div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-04">
                                                <span class="openinghours--date-day-of-week">
                                                    <link property="dayOfWeek" href="http://schema.org/Sunday">Sunday
                                                </span>
                                                <span class="openinghours--date-day">4</span>
                                                <span class="openinghours--date-month">November</span>
                                            </div>
                                            <div class="openinghours--content">
                                                <div class="openinghours--times">
                                                    <span class="openinghours--status">closed</span>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li aria-setsize="30" aria-posinset="5" tabindex="-1" class="openinghours--day openinghours--day-closed openinghours--day-passed">
                                        <span aria-hidden="true">5</span>
                                        <div class="openinghours openinghours--details openinghours--day-closed openinghours--day-passed" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
                                            <div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-05">
                                                <span class="openinghours--date-day-of-week">
                                                    <link property="dayOfWeek" href="http://schema.org/Monday">Monday
                                                </span>
                                                <span class="openinghours--date-day">5</span>
                                                <span class="openinghours--date-month">November</span>
                                            </div>
                                            <div class="openinghours--content">
                                                <div class="openinghours--times">
                                                    <span class="openinghours--status">closed</span>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li aria-setsize="30" aria-posinset="6" tabindex="-1" class="openinghours--day openinghours--day-open openinghours--day-passed">
                                        <span aria-hidden="true">6</span>
                                        <div class="openinghours openinghours--details openinghours--day-open openinghours--day-passed" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
                                            <div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-06">
                                                <span class="openinghours--date-day-of-week">
                                                    <link property="dayOfWeek" href="http://schema.org/Tuesday">Tuesday
                                                </span>
                                                <span class="openinghours--date-day">6</span>
                                                <span class="openinghours--date-month">November</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="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>
                                    </li>
                                    <li aria-setsize="30" aria-posinset="7" tabindex="-1" class="openinghours--day openinghours--day-open openinghours--day-passed">
                                        <span aria-hidden="true">7</span>
                                        <div class="openinghours openinghours--details openinghours--day-open openinghours--day-passed" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
                                            <div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-07">
                                                <span class="openinghours--date-day-of-week">
                                                    <link property="dayOfWeek" href="http://schema.org/Wednesday">Wednesday
                                                </span>
                                                <span class="openinghours--date-day">7</span>
                                                <span class="openinghours--date-month">November</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="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>
                                    </li>
                                    <li aria-setsize="30" aria-posinset="8" tabindex="-1" class="openinghours--day openinghours--day-open openinghours--day-passed">
                                        <span aria-hidden="true">8</span>
                                        <div class="openinghours openinghours--details openinghours--day-open openinghours--day-passed" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
                                            <div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-08">
                                                <span class="openinghours--date-day-of-week">
                                                    <link property="dayOfWeek" href="http://schema.org/Thursday">Thursday
                                                </span>
                                                <span class="openinghours--date-day">8</span>
                                                <span class="openinghours--date-month">November</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="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>
                                    </li>
                                    <li aria-setsize="30" aria-posinset="9" tabindex="-1" class="openinghours--day openinghours--day-open openinghours--day-passed">
                                        <span aria-hidden="true">9</span>
                                        <div class="openinghours openinghours--details openinghours--day-open openinghours--day-passed" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
                                            <div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-09">
                                                <span class="openinghours--date-day-of-week">
                                                    <link property="dayOfWeek" href="http://schema.org/Friday">Friday
                                                </span>
                                                <span class="openinghours--date-day">9</span>
                                                <span class="openinghours--date-month">November</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="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>
                                    </li>
                                    <li aria-setsize="30" aria-posinset="10" tabindex="-1" class="openinghours--day openinghours--day-open openinghours--day-passed">
                                        <span aria-hidden="true">10</span>
                                        <div class="openinghours openinghours--details openinghours--day-open openinghours--day-passed" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
                                            <div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-10">
                                                <span class="openinghours--date-day-of-week">
                                                    <link property="dayOfWeek" href="http://schema.org/Saturday">Saturday
                                                </span>
                                                <span class="openinghours--date-day">10</span>
                                                <span class="openinghours--date-month">November</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="09:00" aria-label="09:00">
                                                            09:00 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>
                                    </li>
                                    <li aria-setsize="30" aria-posinset="11" tabindex="-1" class="openinghours--day openinghours--day-closed openinghours--day-passed">
                                        <span aria-hidden="true">11</span>
                                        <div class="openinghours openinghours--details openinghours--day-closed openinghours--day-passed" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
                                            <div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-11">
                                                <span class="openinghours--date-day-of-week">
                                                    <link property="dayOfWeek" href="http://schema.org/Sunday">Sunday
                                                </span>
                                                <span class="openinghours--date-day">11</span>
                                                <span class="openinghours--date-month">November</span>
                                            </div>
                                            <div class="openinghours--content">
                                                <div class="openinghours--times">
                                                    <span class="openinghours--status">closed</span>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li aria-setsize="30" aria-posinset="12" tabindex="-1" class="openinghours--day openinghours--day-open openinghours--day-passed">
                                        <span aria-hidden="true">12</span>
                                        <div class="openinghours openinghours--details openinghours--day-open openinghours--day-passed" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
                                            <div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-12">
                                                <span class="openinghours--date-day-of-week">
                                                    <link property="dayOfWeek" href="http://schema.org/Monday">Monday
                                                </span>
                                                <span class="openinghours--date-day">12</span>
                                                <span class="openinghours--date-month">November</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="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>
                                    </li>
                                    <li aria-setsize="30" aria-posinset="13" tabindex="-1" class="openinghours--day openinghours--day-open openinghours--day-passed">
                                        <span aria-hidden="true">13</span>
                                        <div class="openinghours openinghours--details openinghours--day-open openinghours--day-passed" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
                                            <div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-13">
                                                <span class="openinghours--date-day-of-week">
                                                    <link property="dayOfWeek" href="http://schema.org/Tuesday">Tuesday
                                                </span>
                                                <span class="openinghours--date-day">13</span>
                                                <span class="openinghours--date-month">November</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="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>
                                    </li>
                                    <li aria-setsize="30" aria-posinset="14" tabindex="-1" class="openinghours--day openinghours--day-open openinghours--day-passed">
                                        <span aria-hidden="true">14</span>
                                        <div class="openinghours openinghours--details openinghours--day-open openinghours--day-passed" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
                                            <div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-14">
                                                <span class="openinghours--date-day-of-week">
                                                    <link property="dayOfWeek" href="http://schema.org/Wednesday">Wednesday
                                                </span>
                                                <span class="openinghours--date-day">14</span>
                                                <span class="openinghours--date-month">November</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="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>
                                    </li>
                                    <li aria-setsize="30" aria-posinset="15" tabindex="-1" class="openinghours--day openinghours--day-open openinghours--day-passed">
                                        <span aria-hidden="true">15</span>
                                        <div class="openinghours openinghours--details openinghours--day-open openinghours--day-passed" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
                                            <div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-15">
                                                <span class="openinghours--date-day-of-week">
                                                    <link property="dayOfWeek" href="http://schema.org/Thursday">Thursday
                                                </span>
                                                <span class="openinghours--date-day">15</span>
                                                <span class="openinghours--date-month">November</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="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>
                                    </li>
                                    <li aria-setsize="30" aria-posinset="16" tabindex="-1" class="openinghours--day openinghours--day-open openinghours--day-passed">
                                        <span aria-hidden="true">16</span>
                                        <div class="openinghours openinghours--details openinghours--day-open openinghours--day-passed" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
                                            <div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-16">
                                                <span class="openinghours--date-day-of-week">
                                                    <link property="dayOfWeek" href="http://schema.org/Friday">Friday
                                                </span>
                                                <span class="openinghours--date-day">16</span>
                                                <span class="openinghours--date-month">November</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="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>
                                    </li>
                                    <li aria-setsize="30" aria-posinset="17" tabindex="-1" class="openinghours--day openinghours--day-open openinghours--day-passed">
                                        <span aria-hidden="true">17</span>
                                        <div class="openinghours openinghours--details openinghours--day-open openinghours--day-passed" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
                                            <div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-17">
                                                <span class="openinghours--date-day-of-week">
                                                    <link property="dayOfWeek" href="http://schema.org/Saturday">Saturday
                                                </span>
                                                <span class="openinghours--date-day">17</span>
                                                <span class="openinghours--date-month">November</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="09:00" aria-label="09:00">
                                                            09:00 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>
                                    </li>
                                    <li aria-setsize="30" aria-posinset="18" tabindex="-1" class="openinghours--day openinghours--day-open openinghours--day-passed">
                                        <span aria-hidden="true">18</span>
                                        <div class="openinghours openinghours--details openinghours--day-open openinghours--day-passed" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
                                            <div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-18">
                                                <span class="openinghours--date-day-of-week">
                                                    <link property="dayOfWeek" href="http://schema.org/Sunday">Sunday
                                                </span>
                                                <span class="openinghours--date-day">18</span>
                                                <span class="openinghours--date-month">November</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="22:00" aria-label="22:00">
                                                            22:00 h
                                                        </time>
                                                        <span class="openinghours--time-separator">to</span>
                                                        <time property="closes" datetime="00:00" aria-label="00:00">
                                                            00:00 h
                                                        </time>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li aria-setsize="30" aria-posinset="19" tabindex="-1" class="openinghours--day openinghours--day-open openinghours--day-passed">
                                        <span aria-hidden="true">19</span>
                                        <div class="openinghours openinghours--details openinghours--day-open openinghours--day-passed" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
                                            <div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-19">
                                                <span class="openinghours--date-day-of-week">
                                                    <link property="dayOfWeek" href="http://schema.org/Monday">Monday
                                                </span>
                                                <span class="openinghours--date-day">19</span>
                                                <span class="openinghours--date-month">November</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="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>
                                    </li>
                                    <li aria-setsize="30" aria-posinset="20" tabindex="-1" class="openinghours--day openinghours--day-open openinghours--day-passed">
                                        <span aria-hidden="true">20</span>
                                        <div class="openinghours openinghours--details openinghours--day-open openinghours--day-passed" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
                                            <div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-20">
                                                <span class="openinghours--date-day-of-week">
                                                    <link property="dayOfWeek" href="http://schema.org/Tuesday">Tuesday
                                                </span>
                                                <span class="openinghours--date-day">20</span>
                                                <span class="openinghours--date-month">November</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="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>
                                    </li>
                                    <li aria-setsize="30" aria-posinset="21" tabindex="-1" class="openinghours--day openinghours--day-open openinghours--day-passed">
                                        <span aria-hidden="true">21</span>
                                        <div class="openinghours openinghours--details openinghours--day-open openinghours--day-passed" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
                                            <div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-21">
                                                <span class="openinghours--date-day-of-week">
                                                    <link property="dayOfWeek" href="http://schema.org/Wednesday">Wednesday
                                                </span>
                                                <span class="openinghours--date-day">21</span>
                                                <span class="openinghours--date-month">November</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="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>
                                    </li>
                                    <li aria-setsize="30" aria-posinset="22" tabindex="-1" class="openinghours--day openinghours--day-open openinghours--day-passed">
                                        <span aria-hidden="true">22</span>
                                        <div class="openinghours openinghours--details openinghours--day-open openinghours--day-passed" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
                                            <div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-22">
                                                <span class="openinghours--date-day-of-week">
                                                    <link property="dayOfWeek" href="http://schema.org/Thursday">Thursday
                                                </span>
                                                <span class="openinghours--date-day">22</span>
                                                <span class="openinghours--date-month">November</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="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>
                                    </li>
                                    <li aria-setsize="30" aria-posinset="23" tabindex="-1" class="openinghours--day openinghours--day-open openinghours--day-passed">
                                        <span aria-hidden="true">23</span>
                                        <div class="openinghours openinghours--details openinghours--day-open openinghours--day-passed" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
                                            <div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-23">
                                                <span class="openinghours--date-day-of-week">
                                                    <link property="dayOfWeek" href="http://schema.org/Friday">Friday
                                                </span>
                                                <span class="openinghours--date-day">23</span>
                                                <span class="openinghours--date-month">November</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="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>
                                    </li>
                                    <li aria-setsize="30" aria-posinset="24" tabindex="-1" class="openinghours--day openinghours--day-open openinghours--day-passed">
                                        <span aria-hidden="true">24</span>
                                        <div class="openinghours openinghours--details openinghours--day-open openinghours--day-passed" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
                                            <div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-24">
                                                <span class="openinghours--date-day-of-week">
                                                    <link property="dayOfWeek" href="http://schema.org/Saturday">Saturday
                                                </span>
                                                <span class="openinghours--date-day">24</span>
                                                <span class="openinghours--date-month">November</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="09:00" aria-label="09:00">
                                                            09:00 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>
                                    </li>
                                    <li aria-setsize="30" aria-posinset="25" tabindex="-1" class="openinghours--day openinghours--day-open openinghours--day-passed">
                                        <span aria-hidden="true">25</span>
                                        <div class="openinghours openinghours--details openinghours--day-open openinghours--day-passed" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
                                            <div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-25">
                                                <span class="openinghours--date-day-of-week">
                                                    <link property="dayOfWeek" href="http://schema.org/Sunday">Sunday
                                                </span>
                                                <span class="openinghours--date-day">25</span>
                                                <span class="openinghours--date-month">November</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="22:00" aria-label="22:00">
                                                            22:00 h
                                                        </time>
                                                        <span class="openinghours--time-separator">to</span>
                                                        <time property="closes" datetime="00:00" aria-label="00:00">
                                                            00:00 h
                                                        </time>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li aria-setsize="30" aria-posinset="26" tabindex="-1" class="openinghours--day openinghours--day-open openinghours--day-passed">
                                        <span aria-hidden="true">26</span>
                                        <div class="openinghours openinghours--details openinghours--day-open openinghours--day-passed" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
                                            <div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-26">
                                                <span class="openinghours--date-day-of-week">
                                                    <link property="dayOfWeek" href="http://schema.org/Monday">Monday
                                                </span>
                                                <span class="openinghours--date-day">26</span>
                                                <span class="openinghours--date-month">November</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="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>
                                    </li>
                                    <li aria-setsize="30" aria-posinset="27" tabindex="-1" class="openinghours--day openinghours--day-open openinghours--day-passed">
                                        <span aria-hidden="true">27</span>
                                        <div class="openinghours openinghours--details openinghours--day-open openinghours--day-passed" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
                                            <div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-27">
                                                <span class="openinghours--date-day-of-week">
                                                    <link property="dayOfWeek" href="http://schema.org/Tuesday">Tuesday
                                                </span>
                                                <span class="openinghours--date-day">27</span>
                                                <span class="openinghours--date-month">November</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="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>
                                    </li>
                                    <li aria-setsize="30" aria-posinset="28" tabindex="-1" class="openinghours--day openinghours--day-open openinghours--day-passed">
                                        <span aria-hidden="true">28</span>
                                        <div class="openinghours openinghours--details openinghours--day-open openinghours--day-passed" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
                                            <div class="openinghours--date openinghours--special-day" property="validFrom validThrough" datetime="2018-11-28">
                                                <span class="openinghours--date-special-day">Yesterday</span>
                                                <span class="openinghours--date-between">, </span>
                                                <span class="openinghours--date-day-of-week">
                                                    <link property="dayOfWeek" href="http://schema.org/Wednesday">Wednesday
                                                </span>
                                                <span class="openinghours--date-day">28</span>
                                                <span class="openinghours--date-month">November</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="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>
                                    </li>
                                    <li aria-setsize="30" aria-posinset="29" tabindex="0" class="openinghours--day openinghours--day-open openinghours--day-active">
                                        <span aria-hidden="true">29</span>
                                        <div class="openinghours openinghours--details openinghours--day-open" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
                                            <div class="openinghours--date openinghours--special-day" property="validFrom validThrough" datetime="2018-11-29">
                                                <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/Thursday">Thursday
                                                </span>
                                                <span class="openinghours--date-day">29</span>
                                                <span class="openinghours--date-month">November</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="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>
                                    </li>
                                    <li aria-setsize="30" aria-posinset="30" tabindex="-1" class="openinghours--day openinghours--day-open">
                                        <span aria-hidden="true">30</span>
                                        <div class="openinghours openinghours--details openinghours--day-open" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
                                            <div class="openinghours--date openinghours--special-day" property="validFrom validThrough" datetime="2018-11-30">
                                                <span class="openinghours--date-special-day">Tomorrow</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">30</span>
                                                <span class="openinghours--date-month">November</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="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>
                                    </li>
                                    <li aria-hidden="true" class="openinghours--day openinghours--day-disabled"></li>
                                    <li aria-hidden="true" class="openinghours--day openinghours--day-disabled"></li>
                                </ul>
                            </div>
                        </div>

                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
/* No context defined for this component. */
  • Content:
    .opening-hours-accordion {
      // children
      &__item {
        & + & {
          margin-top: 1.2rem;
        }
      }
    
      .opening-hours-wrapper {
        margin-bottom: .5rem;
      }
    
      .accordion {
        &--content {
          margin-bottom: 1.2rem;
        }
    
        &--button {
          font-size: .9rem;
        }
      }
    }
    
  • URL: /components/raw/opening-hours-accordion/_opening-hours-accordion.scss
  • Filesystem Path: components/41-organisms/opening-hours-accordion/_opening-hours-accordion.scss
  • Size: 280 Bytes