Image grid

The code for this example can be used in the Markdown visualization to create a grid of images, each of which contains a description and metric.

Example code

<style>
  .product-image-grid {
      display: grid;
        grid-template-columns: repeat(3, 98px);
    gap: 7px;
  }

  .product-image-item {
    display: flex;
    flex-direction: column;
    gap: 7px;
  }

  .product-image {
    background-size: cover;
      background-position: center;
    height: 100px;
      position: relative;
  }


  .product-rank-number {
    padding: 2px;
    position: absolute;
    top: 0;
    left: 0;
    background: var(--color-surface-invert);
    color: var(--color-text-inverse);
  }

  .product-name {
    font-size: 10px;
    margin: 0;
  }

  .product-compare {
      align-items: center;
      display: flex;
    font-size: 11px;
    gap: 8px;
      font-weight: 500;
  }
</style>

### Top Products This Month
<div class="product-image-grid">

{{#result}}

<div class="product-image-item">
<section class="product-image" style="background-image: url(https://{{product_images.image.value_static}})">
<p class="product-rank-number">
{{sale_price_sum_rank.value}}
</p>
</section>

<section class="product-compare"> {{order_items.sale_price_sum.value_static}}
<ChangeArrow current="{{order_items.sale_price_sum.value_static}}" comparison="{{order_items.sale_price_sum_1.value_static}}"></ChangeArrow></section>
<p class="product-name">{{products.name.value_static}}</p>

</div>
{{/result}}

</div>