Menu icon Foundation
Best practices for Cards

I need to create a row that contains a group of cards. Each card represents a document that the user has previously created. The system will show cards for the most recent 10 reports.

I'm not sure what would be the best way to use Foundation to layout the cards properly. For example, should each card be in its own <div class="column"> or is there a different way to do that. I've encountered a number of issues that make the output look bad. For example:

  • I don't want the cards to contract as the window size is reduced, as it distorts some of the content of the card. For this reason, it seems I need to specify a width (like the example code on the docs site).
  • By specifying a fixed width, when reducing the size of the display from very big to very small, in the bigger screen sizes as the cards approach each other, they will break into new rows, but when it gets down to the smaller sizes, sometimes the cards collide and overlap before the break occurs.
  • I would like the cards to not split apart as the window gets bigger. The gap between the cards becomes very white on large screens.
  • The number of cards ideally should be such that there are no orphan cards on the bottom. For example if there are 10 but only 4 per row will fit, it should either show only 8 cards, or request more from the server to show 12.

I am using Foundation 6 and flex-grid.

Putting all that aside, I'm basically, looking for guidance on best practices for displaying cards.

Here is the sample code I've been working on - this is based on various examples I've found:

<div class="row small-up-2 medium-up-3 large-up-4">
    {{#repeat 10}}
        <div class="column shrink">
            <div class="card" style="width: 250px;">
                <div class="card-divider">
                    <h4>I'm featured</h4>
                </div>
                <img src="https://placehold.it/200x100">
                <div class="card-section">
                    <p>This card makes use of the card-divider element.</p>
                </div>
            </div>
        </div>
    {{/repeat}}    
</div>

I'm also looking for a paid mentor. If anyone is available, please inquire.

Thank you!

Gerry

cardsfoundation 6best practices

I need to create a row that contains a group of cards. Each card represents a document that the user has previously created. The system will show cards for the most recent 10 reports.

I'm not sure what would be the best way to use Foundation to layout the cards properly. For example, should each card be in its own <div class="column"> or is there a different way to do that. I've encountered a number of issues that make the output look bad. For example:

  • I don't want the cards to contract as the window size is reduced, as it distorts some of the content of the card. For this reason, it seems I need to specify a width (like the example code on the docs site).
  • By specifying a fixed width, when reducing the size of the display from very big to very small, in the bigger screen sizes as the cards approach each other, they will break into new rows, but when it gets down to the smaller sizes, sometimes the cards collide and overlap before the break occurs.
  • I would like the cards to not split apart as the window gets bigger. The gap between the cards becomes very white on large screens.
  • The number of cards ideally should be such that there are no orphan cards on the bottom. For example if there are 10 but only 4 per row will fit, it should either show only 8 cards, or request more from the server to show 12.

I am using Foundation 6 and flex-grid.

Putting all that aside, I'm basically, looking for guidance on best practices for displaying cards.

Here is the sample code I've been working on - this is based on various examples I've found:

<div class="row small-up-2 medium-up-3 large-up-4">
    {{#repeat 10}}
        <div class="column shrink">
            <div class="card" style="width: 250px;">
                <div class="card-divider">
                    <h4>I'm featured</h4>
                </div>
                <img src="https://placehold.it/200x100">
                <div class="card-section">
                    <p>This card makes use of the card-divider element.</p>
                </div>
            </div>
        </div>
    {{/repeat}}    
</div>

I'm also looking for a paid mentor. If anyone is available, please inquire.

Thank you!

Gerry

Rafi Benkual over 2 years ago

Hi Gerry,

we can help you figure this one out easier with a working example. Here is a blank flexgid codepen http://codepen.io/rafibomb/pen/WpyaYa

Can you post it back here so we can help you more?