Components
Business Info
Opening hours with a live Open/Closed status, plus contact details.
Live demo
See it in action
Closed
| Monday | 9 AM – 5 PM |
|---|---|
| Tuesday | 9 AM – 5 PM |
| Wednesday | 9 AM – 5 PM |
| Thursday | 9 AM – 5 PM |
| Friday | 9 AM – 5 PM |
| Saturday | 10 AM – 2 PM |
| Sunday | Closed |
The markup
Clean, lean code
This is the exact HTML the element outputs, straight from the page builder. No wrapper soup, no inline-style bloat.
<section class="fw-flexbox upw-section sc-render fw-flex fw-flex-column fw-items-center fw-full-bleed fw-collapse">
<div class="business-info bi-bf9fdbe9 fw-bi fw-bi--design-card design-card">
<div class="fw-bi__head">
<span class="fw-bi__status is-closed"><span class="fw-bi__dot" aria-hidden="true"></span>Closed</span>
</div>
<div class="fw-bi__cols">
<table class="fw-bi__hours">
<tbody>
<tr class="fw-bi__hrow">
<th scope="row" class="fw-bi__day">Monday</th>
<td class="fw-bi__time">9 AM – 5 PM</td>
</tr>
<tr class="fw-bi__hrow">
<th scope="row" class="fw-bi__day">Tuesday</th>
<td class="fw-bi__time">9 AM – 5 PM</td>
</tr>
<tr class="fw-bi__hrow">
<th scope="row" class="fw-bi__day">Wednesday</th>
<td class="fw-bi__time">9 AM – 5 PM</td>
</tr>
<tr class="fw-bi__hrow is-today">
<th scope="row" class="fw-bi__day">Thursday</th>
<td class="fw-bi__time">9 AM – 5 PM</td>
</tr>
<tr class="fw-bi__hrow">
<th scope="row" class="fw-bi__day">Friday</th>
<td class="fw-bi__time">9 AM – 5 PM</td>
</tr>
<tr class="fw-bi__hrow">
<th scope="row" class="fw-bi__day">Saturday</th>
<td class="fw-bi__time">10 AM – 2 PM</td>
</tr>
<tr class="fw-bi__hrow is-closed">
<th scope="row" class="fw-bi__day">Sunday</th>
<td class="fw-bi__time"><span class="fw-bi__closed-label">Closed</span></td>
</tr>
</tbody>
</table>
</div>
</div>
</section>To learn more about the Business Info shortcode, please check out the online manual here.