Featured sections

[schalkneethling]

The featured section reads like a list of featured items and should be marked up as such. Utilizing the existing classes and some of the structure we can amend the current HTML to something like:

<ul class="mzp-l-card-third">
  <li>
    <div class="mzp-c-card mzp-c-card-small mzp-has-aspect-16-9">
      ...
    </div>
  </li>
  <li>
    <div class="mzp-c-card mzp-c-card-small mzp-has-aspect-16-9">
      ...
    </div>
  </li>
  <li>
    <div class="mzp-c-card mzp-c-card-small mzp-has-aspect-16-9">
      ...
    </div>
  </li>
</ul>

[valgrimm]

re-used in many places on site

[stevejalim]

@schalkneethling Looking at the source Django template for this, it can be a list of rows of cards

eg

[ 1, 2, 3 ]
[ 4, 5, 6] 

so am thinking of marking it up as a ul root with a list of sub-lists:

<ul class="featured-items-wrapper">

  {% split_featured_items featured as split_featured %}

  {% comment %}

  `split_featured` returns an iterable of dicts where each dict represents a list of
  items to render on a particular row
  [
      {
          items: <List>
          count: <int>
      },
      ...
  ]

  {% endcomment %}

  {% for row in split_featured %}
    <li>

    {% if row.count == 2 %}
    <ul class="mzp-l-card-half">
      {% for block in row.items %}
        <li class="mzp-c-card mzp-c-card-medium mzp-has-aspect-3-2">
          {% include "organisms/partials/featured-card-selector.html" with aspect_ratio="3_2" %}
        </li>
      {% endfor %}
    </ul>
    {% endif %}

    {% if row.count == 3 %}
      <ul class="mzp-l-card-third">
        {% for block in row.items %}
            <li class="mzp-c-card mzp-c-card-small mzp-has-aspect-16-9">
              {% include "organisms/partials/featured-card-selector.html" %}
            </li>
        {% endfor %}
      </ul>
    {% endif %}

    {% if row.count == 4 %}
      <ul class="mzp-l-card-quarter">
        {% for block in row.items %}
            <li class="mzp-c-card mzp-c-card-extra-small mzp-has-aspect-16-9">
              {% include "organisms/partials/featured-card-selector.html" %}
            </li>
        {% endfor %}
      </ul>
    {% endif %}

  </li>
  {% endfor %}
</ul>

It works/looks exactly the same (as expected) so will PR it shortly (need to cross-browser check first) and see what you think