Opening times

Display the opening times of the POI object.

On this page

Examples

Display the opening times table on your page using the HTML markup below. Use the different states to change the current POI object state.

Opening times	closed
Monday	08:00 - 12:00 13:30 - 17:00
Tuesday	08:00 - 12:00 13:30 - 17:00
Wednesday	08:00 - 12:00
Thursday	08:00 - 20:00
Friday	closed
Saturday	12:00 - 17:00
Sunday	closed

html

<table class="opening-times">
  <thead>
  <tr>
    <th>Opening times</th>
    <th>
      <span class="state state--closed">closed</span>
    </th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>Monday</td>
    <td>
      <span>08:00 - 12:00</span>
      <span>13:30 - 17:00</span>
    </td>
  </tr>
  <tr>
    <td>Tuesday</td>
    <td>
      <span>08:00 - 12:00</span>
      <span>13:30 - 17:00</span>
    </td>
  </tr>
  <tr>
    <td>Wednesday</td>
    <td>
      <span>08:00 - 12:00</span>
    </td>
  </tr>
  <tr>
    <td>Thursday</td>
    <td>
      <span>08:00 - 20:00</span>
    </td>
  </tr>
  <tr>
    <td>Friday</td>
    <td>
      <span>closed</span>
    </td>
  </tr>
  <tr>
    <td>Saturday</td>
    <td>
      <span>12:00 - 17:00</span>
    </td>
  </tr>
  <tr>
    <td>Sunday</td>
    <td>
      <span>closed</span>
    </td>
  </tr>
  </tbody>
</table>

CSS

Variables

src/scss/_opening-times.scss

--#{$prefix}opening-times-align: #{$opening-times-align};
--#{$prefix}opening-times-padding-x: #{$opening-times-padding-x};
--#{$prefix}opening-times-padding-y-head: #{$opening-times-padding-y-head};
--#{$prefix}opening-times-padding-y-body: #{$opening-times-padding-y-body};
--#{$prefix}opening-times-border-width: #{$opening-times-border-width};
--#{$prefix}opening-times-border-color: #{$opening-times-border-color};

Sass variables

src/scss/_variables.scss

$opening-times-align:          "middle";
$opening-times-padding-x:      1rem;
$opening-times-padding-y-head: 1rem;
$opening-times-padding-y-body: .5rem;
$opening-times-border-width:   var(--#{$prefix}border-width);
$opening-times-border-color:   var(--#{$prefix}border-color);