Key/value pair

Key/value pairs are essential for displaying structured data in a clear and organized manner.

Using key/value pairs

To display key/value pairs, you can use an unordered list with the <li class="row"> structure. Each list item can contain multiple spans for labels, values, and buttons. Here’s an example:

<ul>
  <li class="row">
    <span>Created Date</span>
    <span><time>{{ created }}</time></span>
    <button>View Details</button>
  </li>
  <li class="row">
    <span>Status</span>
    <strong>{{ status }}</strong>
  </li>
</ul>

This code snippet creates a list of key/value pairs, where each item has a label (e.g., "Created Date") followed by its value (e.g., the date) and an optional button for further actions.

You can use a <strong> tag is used to emphasize important information, like the status of an item.

Looping through key/value pairs

You can dynamically generate key/value pairs using Liquid by iterating over a list of items. Here’s how you can do that:

<ul>
  {% for item in items %}
    <li class="row">
      <span>{{ item.label }}</span>
      <button>Action</button>
    </li>
  {% endfor %}
</ul>

In this example, a loop is used to iterate over a collection of items. Each item's label and created date are displayed, along with an action button. This approach keeps your code clean and allows for easy updates when your data changes.