usecases.html

<!-- Usecases -->
<div class="container-full is-marginless has-bg-grey-300">
  <div class="container p-y-45">
    {% for usecase in include.usecases %} {% assign reversed = forloop.index0 | modulo: 2 %} {% if reversed == 0 %}
    <!-- Usecase Item -->
    <div class="row p-y-45">
      <div class="xs-col-6-8 xs-col-off-1-8 sm-col-2-4 sm-col-off-1-4 md-hide lg-hide xl-hide">
        <img class="p-50" src="{{usecase.image}}" alt="" />
      </div>
      <div
        class="xs-col-1-1 sm-col-6-8 sm-col-off-1-8 md-col-1-2 lg-col-5-12 lg-col-off-1-12 xl-col-5-12 xl-col-off-1-12"
      >
        <div class="m-b-10">
          <i class="d-icon {{usecase.icon}} is-brand-500"></i>
          <h2 class="m-t-10">{{usecase.title}}</h2>
        </div>
        <p>{{usecase.description}}</p>
        <div>
          <a class="button is-solid m-t-20" href="{{usecase.link}}">Learn More</a>
        </div>
      </div>
      <div class="xs-hide sm-hide md-col-1-2 lg-col-5-12 xl-col-5-12 align-self-center">
        <img class="p-50" src="{{usecase.image}}" alt="" />
      </div>
    </div>
    {% else %}
    <!-- Usecase Item Reversed -->
    <div class="row p-y-45">
      <div
        class="xs-col-6-8 xs-col-off-1-8 sm-col-2-4 sm-col-off-1-4 md-col-1-2 lg-col-5-12 xl-col-5-12 align-self-center"
      >
        <img class="p-50" src="{{usecase.image}}" alt="" />
      </div>
      <div
        class="xs-col-1-1 sm-col-6-8 sm-col-off-1-8 md-col-1-2 lg-col-5-12 lg-col-off-1-12 xl-col-5-12 xl-col-off-1-12"
      >
        <div class="m-b-10">
          <i class="d-icon {{usecase.icon}} is-brand-500"></i>
          <h2 class="m-t-10">{{usecase.title}}</h2>
        </div>
        <p>{{usecase.description}}</p>
        {% if usecase.descriptionlist %}
        <ul class="list">
          {% for descriptionitem in usecase.descriptionlist %}
            <li>{{ descriptionitem }}</li>
          {% endfor %}
        </ul>
        {% endif %}
        <div>
          <a class="button is-solid m-t-20" href="{{usecase.link}}">Learn More</a>
        </div>
      </div>
    </div>
    {% endif %} {% endfor %}
  </div>
</div>