Equal Height Cards with Vertically Aligned Call to Action Buttons

How can you code equal height content cards – like pricing tables – with vertically aligned call to action buttons?

Let's face it, there are many websites that display content using cards. Cards are grid-like content boxes that typically have a border and look visually similar to a playing card or business card. Most websites that use card-style content layouts display three to five cards per row for desktop screens and collapse down to single-column layouts for mobile devices. Card layouts are extremely popular for article-based blog websites, as well as product-based ecommerce websites who like to place as much information as possible higher up on the screen – above-the-scroll.

The Problem

A common problem arising when using card-style layouts is that not every card has the same amount of content. In a website design template or a demo-theme you're looking to buy everything always looks perfect and beautifully laid out.

Non-Equal Height Cards

In real life, titles, headlines, and blurbs use different character counts and line lengths. Different amounts content in grid-style card layouts cause some cards to stretch too tall and others to appear short.

Non-Vertically Aligned Action Buttons

Cards with dynamic content featuring a read more link or call to action button can result in a vertical look that is misaligned. That looks sloppy.

The Solution

Equal Height Cards Using Flex-box (GOOD)

Flexbox CSS layouts with the align-content property set to “stretch” offers a quick fix to solve equal height cards.

.card-grid {
	display: flex;
	align-items: stretch;
}

Fixed-Heights (BAD)

Alternatively, you could assign a fixed height to cards, so the read more link or button is always at the same height, but that's a shoddy solution.

It's really hard to use a fixed-height solution with confidence because content grows taller when content-containers become narrower – think about how a four-column equal-width layout would fill the screen on desktop monitors vs laptop screens vs tablet size screens. Whenever you're dealing with varying spatial relations you're dealing with fitting the same content into different spaces – different content is going to scale differently and may not always fit the space the same.

.card-grid > .card {
	height: 240px;
}

Something like this will create equal height cards, but quickly breaks layouts if the content within the cards becomes too narrow and too tall.

Vertically Aligned Action Buttons

Okay, now that the cards are all the same height – what about vertically aligning call-to-action buttons to the bottom of the cards?

You could leave all the calls-to-action relatively positioned and keep them an equal distance from the bottom of the content, but doing that makes a user's eyes jump all over the place and just doesn't look great.

A better more visually appealing solution is vertically aligning call-to-action buttons so they are all the same distance from the bottom of a card.

SEO Minded - Relative vs Absolute

When you're aiming for high-levels of on-site search engine optimization, it's easy to get caught up in one-way thinking and wanting to keep everything relatively positioned. Relative positioning keeps elements within the flow of the page and helps code make tangible sense to search engines trying to rank your website. However, sometimes it's okay to magically fix the position of on-page elements using absolute positioning.

When you want to absolute positioning an element on a website, the question to ask is does it matter?

For example, I would never suggest to absolute position the main content of a web page. It would be extremely silly to remove the body copy of an article from the flow of the page.

Absolutely positioning a call-to-action button that has no purpose other than to be clicked, though, can be totally appropriate.

Absolute Positioned CTA Buttons

One of my favorite css-tricks for vertically aligning call-to-action buttons within a grid-style card layout is to absolute position the button. I like to add bottom padding to the card-container to allow consistently available space for the button to fill and then position the button within that space.

Combined with equal-height cards, it allows the call-to-action buttons (or read more links) to maintain a nice vertical rhythm and stay consistently aligned – giving your website a more professional look and feel.

Code Solution

Here's a code snippet to create equal-height card grids with vertically aligned CTA buttons using CSS flex-box and absolute positioning:

CSS

.card-grid {
	display: flex;
	align-items: stretch;
}

.card {
	width: 31.33%;
	margin: 0 1%;
	border: 1px solid #ccc;
	padding-bottom: 60px;
}

.card__inner {
	padding: 20px;
}

.cta {
	position: absolute;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
}

Here's how the styles work:

  • Creates a three-column flex-box card grid layout
  • Creates bordered cards with 20px inner padding space
  • Adds 60px of bottom padding to allow space for a  button
  • Absolutely positions a call-to-action (CTA) button 20px from the bottom
  • Centers the absolutely positioned button horizontally using left 50%, translateX(-50%)

HTML

<div class="card-grid">
	<div class="card">
		<div class="card_inner">
			<h2>Card Headline</h2>
			<p>Lorem ipsum...</p>
			<span class="cta"><button>Take Action</button></span>
		</div>
	</div>
	
	<div class="card">
		<div class="card_inner">
			<h2>Card Headline</h2>
			<p>Lorem ipsum...</p>
			<span class="cta"><button>Take Action</button></span>
		</div>
	</div>
	
	<div class="card">
		<div class="card_inner">
			<h2>Card Headline</h2>
			<p>Lorem ipsum...</p>
			<span class="cta"><button>Take Action</button></span>
		</div>
	</div>
</div>

Demo

Click here to see how it works.