Jump to content

Designing cards - first steps


kuba2
 Share

Recommended Posts

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

 

599bd7f45105d_Bildschirmfoto2017-08-22um09_02_12.png.30eac9e8e53bded1b9f1b9e2ae8ef471.png

Link to comment
Share on other sites

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; ?>

 

  • Like 2
Link to comment
Share on other sites

  • 1 month later...
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

 

599bd7f45105d_Bildschirmfoto2017-08-22um09_02_12.png.30eac9e8e53bded1b9f1b9e2ae8ef471.png

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

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...