<div class="office-hours">
    <div class="office-hours__item">
        <div class="office-hours__item-label day">Sunday: </div>
        <div class="office-hours__item-slots">
            <div class="time">5:08 pm-5:20 pm<span>, </span></div>
            <div class="time">6:00 pm-6:30 pm<span>, </span></div>
        </div>
    </div>
    <div class="office-hours__item">
        <div class="office-hours__item-label day">Monday: </div>
        <div class="office-hours__item-slots">
            Closed
        </div>
    </div>
    <div class="office-hours__item">
        <div class="office-hours__item-label day">Tuesday: </div>
        <div class="office-hours__item-slots">
            <div class="time">8:00 am-8:50 am<span>, </span></div>
            <div class="time">10:00 am-1:00 pm<span>, </span></div>
            <div class="time">3:00 pm-3:05 pm<span>, </span></div>
        </div>
    </div>
    <div class="office-hours__item">
        <div class="office-hours__item-label day">Wednesday: </div>
        <div class="office-hours__item-slots">
            Closed
        </div>
    </div>
    <div class="office-hours__item">
        <div class="office-hours__item-label day">Thursday: </div>
        <div class="office-hours__item-slots">
            <div class="time">7:50 am-3:30 pm<span>, </span></div>
        </div>
    </div>
    <div class="office-hours__item">
        <div class="office-hours__item-label day">Friday: </div>
        <div class="office-hours__item-slots">
            Closed
        </div>
    </div>
    <div class="office-hours__item">
        <div class="office-hours__item-label day">Saturday: </div>
        <div class="office-hours__item-slots">
            Closed
        </div>
    </div>
</div>
<div class="office-hours">
  {% for weekday in weekdays %}
  <div class="office-hours__item">
    <div class="office-hours__item-label day">{{ weekday.day }}: </div>
    <div class="office-hours__item-slots">
    {% if weekday.times %}
      {% for time in weekday.times %}
        <div class="time">{{ time.hour }}<span>, </span></div>
      {% endfor %}
    {% else %}
      Closed
    {% endif %}</div>
  </div>
  {% endfor %}
</div>
{
  "weekdays": {
    "1": {
      "day": "Sunday",
      "times": {
        "1": {
          "hour": "5:08 pm-5:20 pm"
        },
        "2": {
          "hour": "6:00 pm-6:30 pm"
        }
      }
    },
    "2": {
      "day": "Monday"
    },
    "3": {
      "day": "Tuesday",
      "times": {
        "1": {
          "hour": "8:00 am-8:50 am"
        },
        "2": {
          "hour": "10:00 am-1:00 pm"
        },
        "3": {
          "hour": "3:00 pm-3:05 pm"
        }
      }
    },
    "4": {
      "day": "Wednesday"
    },
    "5": {
      "day": "Thursday",
      "times": {
        "1": {
          "hour": "7:50 am-3:30 pm"
        }
      }
    },
    "6": {
      "day": "Friday"
    },
    "7": {
      "day": "Saturday"
    }
  }
}
  • Content:
    .office-hours {
      &__item {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
    
        &-label.day {
          margin: 0 $space-one-quarter 0 0;
          font-weight: bold;
        }
    
        &-slots {
          display: flex;
          flex-direction: row;
          flex-wrap: nowrap;
    
          .time {
            margin: 0 $space-one-quarter 0 0;
    
            &:last-of-type {
              margin: 0;
    
              span {
                display: none;
              }
            }
          }
        }
      }
    }
    
  • URL: /components/raw/hours/hours.scss
  • Filesystem Path: bits/04-components/org_unit_and_services/hours/hours.scss
  • Size: 464 Bytes

Display the Org Unit - Hours.