[Cards Collection] Cards Height with Uneven Content

[andreiungurianu]

When I have multiple cards added in my Cards Collection, if I add more text in one of the columns, the height of the column in the Gutenberg editor expands but the other cards don't sync to the new height.

If I save and go to the live page I can see all cards perfectly aligned and with the same height as the card that has more text.

Video that explains it better.

I'm using Rosa 2 version 1.0.6 and Nova Blocks 1.3.2

[georgeolaru]

@andreiungurianu having equally heightened cards wasn't an initial feature proposed for the Cards Collection block, but I think we can explore some layout improvements in the case where content/titles have variable length — though, a good copywriter will make sure to keep them on the same size. 🤫

Considering that there will rise some extra-space (be it inside our outside the card), there are two options that seem feasible for me:

1. 🦒 Make sure all the cards have the same height (the extra space distributed inside the card area)
2. 🐖 Align cards vertically to the center (the extra space distributed outside the card area)

Which one do you think is more visually pleasing?

[andreiungurianu]

@georgeolaru I believe your first proposal (Make sure all the cards have the same height) is more in line with what I wanted to achieve in my test and with the default behavior most users would expect.

[georgeolaru]

@andreiungurianu Got it! I think we now have an assumption that we can work with. Let's see how it holds in the real world and find some use-cases with uneven cards and how they are displayed in various sites.

My bet is that we will discover use-cases for more feature-rich cards (eg. pricing tables, blog articles) that we can tackle in new blocks that share the same underlying structure with Cards Collection.

---

I would explore the projects from the following agencies and see with what they come up with:

• Barrel with their Intersect collection of sites (styles broken but screenshots still working)
• Code and Theory
• Six

Or sites galleries that I like:

• SiteInspire
• Mindsparkle Mag

Examples

Year & Day: cards don't have a background and the content stays align to top. The same layout can be achieved with the current version of Cards Collection.

Sill: no background, buttons follow the content (not aligned to the bottom)

[andreiungurianu]

@georgeolaru The height of the cards with uneven content already has the behavior we agree upon - 🦒 Make sure all the cards have the same height (the extra space distributed inside the card area) - but that only happens in the front end (live website) not in the Gutenberg editor. This was the initial issue I described. See this video again.

The only thing left would be to fix the behavior in the editor to match the one displayed on the live website. Right?

Doesn't this mean that the Button alignment suggestion described here https://github.com/pixelgrade/nova-blocks/issues/146 is the one we should be focusing on?

Or is the current state not in the original design and now we have to revisit it?

[georgeolaru]

@andreiungurianu I'm sorry - didn't notice there is in the difference between Back and Front end. In this case, we should make sure that cards have the same height in both situations.

Until we set on a final solution, I propose to use the Frontend version as a reference, where all cards have the same height, and match it inside the Editor. @madalingorbanescu can you have a look over this issue?

---

As for the button alignment, either make it next to the content (1) or stick to the bottom (2)), I would do the exploration exercise mentioned above. At a first impression, something feels off when there is no card background and the buttons are aligned to the bottom:

[georgeolaru]

An example with uneven cards content with background on Frank:

[oanafilip]

Hi guys! Congrats for this thoughtful dialogue. 👏

Initially, I reacted similar to @andreiungurianu, but since I better understood how you, @georgeolaru, planned the granular evolution of Cards Collection, it started to make more sense.

However, I feel the need to drop a line about the Frank example you mentioned, @georgeolaru.

For me, it's a matter of visual perception. When the alignment is up and clearly stated, everything looks awesome, and I am no longer annoyed by the uneven cards content (as it is in the Frank example, where, by the way, we only have plain text).

On the contrary, when a call to action button interferes, and it is placed at the bottom, the content of the uneven card starts to look messy. However, I don't think that placing the CTA buttons at the top is a solution, but the current scenario seems a bit unpleasant in terms of aesthetics.

I hope this perspective is useful. 🤞

However, I would gladly search after use cases if this is something valuable to improve the entire experience with Cards Collection.

Keep up the great work, guys!

[georgeolaru]

@oanafilip Thanks for stepping in! You raise a good point and I think the problem is slowly but surely getting down to the buttons, not only in terms of positioning, but also in terms of styling.

Looking at our cards again, I noticed that all of them are set by default as Primary buttons, thus weighing too much in relation to other elements from each card.

Once we level down to Secondary or even Tertiary style, it starts to feel more balanced and pleasing:

Let's keep this in mind while we search for a few more examples (similar and different) where cards have uneven content. Also, take into consideration that all elements are optional — so it's ok to find examples without Media or Buttons.

[oanafilip]

@georgeolaru Thanks for following-up on this one, it means a lot. 😋

As a storyteller myself, I am close to some media publications that I consider references in this area.

Here are a few examples of websites where cards have uneven content:

DOR

Scena 9

The Outline

On the other hand, I chose a few examples from a different industry:

Allure

Smashing Magazine

Except for the last example, for all the above ones, the CTA is the title of the article. Even though it is not marked as a link per se, at hover, you receive a specific input: underlining the content or marking it with a different color.

While looking at these websites, I noticed that the lack of alignment no longer pisses me because none has a proper CTA button. 🤔

@georgeolaru Are these uses cases relevant for what we are aiming to achieve with Cards Collection?

[georgeolaru]

Thanks, @oanafilip — your examples help to extend the perspective that we use to look into the cards.

Those use-cases are more relevant to the next iteration of Posts Collection block, as they are mostly used for displaying articles excerpts. Nevertheless, they are still cards with uneven content and we will refer to them when drawing the line and make a decision.

It seems that cards with background and cards with buttons are less common which is an important point to take into consideration. Without examples, we tend to look at the edges, while we need to mostly focus on the general uses cases.

[georgeolaru]

@madalingorbanescu can you take over the first point regarding the button's alignment? https://github.com/pixelgrade/nova-blocks/issues/145#issuecomment-618230839

Other than that, we should leave it as it is, with the only change being the "Tertiary" style for the buttons default.

[madalingorbanescu]

@georgeolaru I've just made a commit that is addressing the specified issues (height in editor and button default style)

This is how the block look now with uneven content:

[georgeolaru]

Great @madalingorbanescu! I just tested and it looks as intended, only that the buttons do not align center, but this could be related to #142

We can close this now and we will get back to it as a reference for various versions of "Posts Collection" blocks.