innhold/custom/templates/list.php

<?php if (!empty($pageContent)): ?>
    <article class="list-intro">
        <?= $pageContent ?>
    </article>
<?php endif; ?>

<section>
    <?php foreach ($items as $item): ?>
        <article>
            <?php if ($item['cover']): ?>
                <a href="<?= htmlspecialchars($item['url']) ?>">
                    <img src="<?= htmlspecialchars($item['cover']) ?>" alt="<?= htmlspecialchars($item['title']) ?>">
                </a>
            <?php endif; ?>
            <h1>
                <a href="<?= htmlspecialchars($item['url']) ?>">
                    <?= htmlspecialchars($item['title']) ?>
                </a>
            </h1>
            <?php if (($metadata['show_date'] ?? true) && !empty($item['date'])): ?>
                <p><?= htmlspecialchars($item['date']) ?></p>
            <?php endif; ?>
            <?php if ($item['summary']): ?>
                <p><?= htmlspecialchars($item['summary']) ?></p>
            <?php endif; ?>
            <a href="<?= htmlspecialchars($item['url']) ?>" class="button">Les mer</a>
        </article>
    <?php endforeach; ?>
</section>

<style>
main > section {
  > article {
    background-color: white;
    padding: 0;
    padding-bottom: 1.3rem;
    margin-bottom: 1.5rem;
    overflow: hidden;

    > :not(img, a) {
      padding-left: 1rem;
      padding-right: 1rem;
    }

    h1 {
      margin-top: 1rem;
    }

    > .button {
      margin-left: 1rem;
      margin-top: 1rem;
    }
  }
}
</style>