Designing cards - first steps

[kuba2]

Hello

Quite a basic question from me:

I am wondering what's the best approach to code cards like in the example image. What is the most elegant and efficient way to make these.

Thanks for any suggestions.

Jakob

 

[abdus]

Since all these cards have "find out more" links, they appear to be linked to a page with more content.

Start with creating a page field, say "servicePages" and add that to the template of the page that will show these cards. Then add a Textarea field to "service" template, say "serviceSummary", to store the summaries (or get it from another field instead). Then add the service pages that need to be shown in cards to servicePages field.

You can then iterate over them and build your markup

<?php foreach($page->servicePages as $sp): ?>

<div class="service-card">
  <img class="service-card__img" src="<?= $sp->images->first->size(300,200)->url ?>"/>
  <h2 class="service-card__title"><?= $sp->title ?></h2>
  <p class="service-card__summary"><?= $sp->serviceSummary ?></p>
  <a class="service-card__link" href="<?= $sp->url ?>">Mehr Erfahren</a>
</div>

<?php endforeach; ?>

 

[SarbjitGrewal]

On 8/22/2017 at 12:45 PM, kuba2 said:

Hello

Quite a basic question from me:

I am wondering what's the best approach to code cards like in the example image. What is the most elegant and efficient way to make these.

Thanks for any suggestions.

Jakob

 

If you can implement images directly that would be better than coding for each image.