Description List

These are lists that display pairs of keys and associated values. They can make a brilliant addition to websites; for displaying things like business opening times, FAQs, product specifications, glossaries, contact details and scheduling. WebYep short text elements are used for the values. If you replace the keys with short text elements, then these easily become editable too. If you want a client to add, remove or reorder key / value pairs within the list, the WebYep loop is perfect for this. Ben Myers wrote an excellent article about description lists and shares some inspirational ideas of things you can build with them.

Example

HTML & PHP

<dl class="opening_hours">
  <dt>Monday</dt>
  <dd><?php webyep_shortText("Mon Hours", false, 550, 240); // WebYepV2 ?></dd>
  <dt>Tuesday</dt>
  <dd><?php webyep_shortText("Tue Hours", false, 550, 240); // WebYepV2 ?></dd>
  <dt>Wednesday</dt>
  <dd><?php webyep_shortText("Wed Hours", false, 550, 240); // WebYepV2 ?></dd>
  <dt>Thursday</dt>
  <dd><?php webyep_shortText("Thu Hours", false, 550, 240); // WebYepV2 ?></dd>
  <dt>Friday</dt>
  <dd><?php webyep_shortText("Fri Hours", false, 550, 240); // WebYepV2 ?></dd>
  <dt>Saturday</dt>
  <dd><?php webyep_shortText("Sat Hours", false, 550, 240); // WebYepV2 ?></dd>
  <dt>Sunday</dt>
  <dd><?php webyep_shortText("Sun Hours", false, 550, 240); // WebYepV2 ?></dd>
</dl>

CSS

.opening_hours {
    display: flex;
    flex-wrap: wrap;
}

.opening_hours dt,
.opening_hours dd {
    width: 50%;
    padding: 0 1rem;
}

.opening_hours dt {
    font-weight: bold;
    text-align: right;
}

Javascript