Latest CMS Developer Posts

HubSpot CMS Blog

[Code Hacks] Building flip-cards on the HubSpot CMS

Written By Charles Leif Inouye on Jul 17, 2018 4:35:23 PM

Flip-cards are a fun way to make your team page listings a bit more dynamic. Take a look at our team page, and you'll see what I mean. The best part? Building flip-cards on the HubSpot CMS is easy, and doesn't require any javascript. That's right, you can spruce up your site with flip-cards using only HTML and CSS (and of course, some HubL to really take full advantage of our system).

So, let's jump in.

Step 1- Create your custom module.

You can quickly create a custom module in the design manager by following these instructions.

Step 2- Create your HTML. The format for a flip card is simple. You'll have one container <div> (let's give it the class of ".flip-card") with two <divs> nested within it. Give one the class of ".front" and one the class of ".back".

Your html should look something like this:Screen Shot 2018-07-16 at 10.20.47 AM

Step 3- Create your CSS. The logic here is pretty straightforward.

1. Position ".flip-card" relative, and ".back" and ".front" absolute within it.

2. Add "transform: rotateY(180deg);" to the ".back" <div>. This rotates the div 180 degrees around the Y-axis positioning it behind our ".front" <div>.

3. Give ".front" and ".back" <divs> the style of "backface-visibility: hidden", meaning that anything superimposed behind them won't be visible. 

4. Add "transform:rotateY(180deg)" to the "flip-card:hover" pseudo-class.

5. Add "transition: .3s ease" to ":hover" to make the rotation appear smoothly. 

6. Lastly, we're going to give the ".flip-card" <div> the style of "transform-style: preserve-3d;". This defines the style of our rotateY transform effect, forcing it to take into account three-dimensional space. Without this, we would simply only rotate the front card on hover, and not account for our back-card in the process.

Take a look below to see all the necessary CSS to make this work!  

Screen Shot 2018-07-16 at 10.42.49 AM

Step 4 (bonus)- Add your HubL: The HubL will give your marketer the ability to add new flip-cards and update flip-card content without needing to get into the code. Within "front" and "back", add HubL image variables and text variables. Then, wrap your flip-card code within a repeater loop. See below for an example:

Screen Shot 2018-07-16 at 11.11.19 AM 

And there you have it. A fun way to engage your visitors with your team without having to create individual team pages for each member.

 

New call-to-action

 

Topics: Examples, Tutorial, Website Development

Charles Leif Inouye

Charles "Leif" is a Website Technical Consultant at HubSpot. Outside of work, he watches the Celtics, hangs out with his dog, and weeds his backyard.

Stay Up To Date 👇

Learn how to code on HubSpot CMS
     
    Join the HubSpot CMS Developer Slack

    Ask questions in the CMS Developer Forum

    Join the free CMS for Developers Course

    View the HubSpot API Documentation

    Recommended Posts