Website starter - featured-items-micro

featured-items-micro.php

<div class="row-centered-aired featured-micro">

  <?php foreach($slice->getValue()->getArray() as $item) { ?>

  <div class="col-4">

    <?php $illustration = $item->get('illustration'); ?>

    <div class="illustration squared-image" <?= $illustration ? 'style="background-image: url('.$illustration->getView("icon")->getUrl().')"' : '' ?>></div>

    <div class="text">

      <h3><?= $item->get('title') ? $item->get('title')->asText() : ''; ?></h3>

      <?= $item->get('summary') ? $item->get('summary')->asHtml() : ''; ?>

    </div>

  </div>

  <?php } ?>

</div>

main.css

/* Featured item micro */

.featured-micro {
  overflow: hidden;
}

.featured-micro .illustration, .featured-micro .text {
  float: left;
}

.featured-micro .text {
  margin-left: 20px;
  width: 60%;
}

.featured-micro .text h3 {
  font-size: 14px;
  margin-bottom: 3px;
}

.featured-micro .text p {
  font-size: 12px;
  line-height: 16px;
  margin: 0;
}

.featured-micro .illustration {
  margin-bottom: 10px;
  width: 66px;
  height: 66px;
  background-color: #F3F3F9;
}