One of the very common patterns that is used to present sets of information like the project portfolio for a web development agency is the “card”. A card will display the information about each project in a common layout that can be displayed as a list or grid. One of the challenges web developers always face is making sure cards align when content size varies or when they are displayed on different devices. A great example of this is the Our Work page here on the Outcome Labs website.
When you are custom coding, this can be difficult to code, but you have granular control so it can usually be accomplished. When you are using a content management system like WordPress and visual design tools like the Block Editor, this becomes very challenging. Most instances that occur have to have a unique solution created and there are almost always compromises.
When I started to migrate to the Block Editor for WordPress projects, the standard blocks just would not address the card challenge. Fortunately, there were custom block libraries available from the WordPress developer community that did. One that we used a lot was Stackable that Benjamin Intal developed. Stackable has a “Card Block” which met our needs on a number of projects.
As flexible as the Stackable Card Block is, we did find issues getting the layout to align. the CTA buttons at the bottom when there was a variable length header or description block above were challenging to get to align across devices. We also try, as much as possible, to use the native platform blocks whenever possible.
The standard WordPress Group block now has a “Stack” option. These are useful for a number of use cases. One of them is to design a “card.” You can see the one we defined for our Outcome Labs project. It has an image, the client name, the purpose of the project, and a call to action. The CTA goes to the client site or a project overview on our site if we wrote one.
You will notice the cards align. The sizes are the same and each “section” including the buttons align. We used two of the setting for the Stack block to accomplish this. First we set the content alignment to the “Space Between” option. the second is to set the minimum height of the stack to one hundred percent (100%). These setting make the card fill the available space and bring the internal content into alignment.
We haven’t tested this with big differences in “internal” content yet. There will probably be some challenges with this. Most of our use cases are not that variable. We think this is a pretty cool solution to this design challenge.