{"id":49069,"date":"2022-06-09T09:30:00","date_gmt":"2022-06-09T13:30:00","guid":{"rendered":"https:\/\/www.litmus.com\/?p=49069"},"modified":"2022-10-11T14:24:27","modified_gmt":"2022-10-11T18:24:27","slug":"create-flip-cards-in-email","status":"publish","type":"post","link":"https:\/\/www.litmus.com\/blog\/create-flip-cards-in-email","title":{"rendered":"How to Create a Flip Card in Email"},"content":{"rendered":"\n\n\t
\n
\n \t
\n \t\t
\n \t\t\t
\n \t\t\t\t

You may have noticed we got creative with animation and interactivity in our May newsletter<\/a> in hopes of increasing engagement<\/a> by providing some surprise and delight in the inbox. And bonus, it was fun! Fun to design, code, and play with.\u00a0<\/span><\/p>\n

This advanced CSS animation is supported mostly in Apple Mail, so we make sure to provide a version that works in other email clients where less CSS animation is supported. And fallbacks where no CSS animation is supported.<\/span><\/p>\n\"animation\n

So how\u2019d we do it? I\u2019m so glad you asked.\u00a0<\/span><\/p>\n

Building the animation<\/span><\/h2>\n

We start by building the most advanced version: the flip card version. Building a flip card for the web is relatively simple and doesn\u2019t require any advanced CSS animation<\/a>. But of course, this is email so we\u2019ve got to do a bit of fun alterations to make it work since not everything is supported.\u00a0<\/span><\/p>\n

First, we create containers for the front and the back of a card:\u00a0<\/span><\/p>\n \t\t\t<\/div>\n \t\t<\/div>\n \t<\/div>\n <\/div>\n<\/div>\n\n\n\n

<div class=\"card-flip\">\n     <div class=\"content\">\n          <div class=\"front\">\n               [Front content]\n          <\/div>\n          <div class=\"back\">\n                [Back content]\n          <\/div>\n     <\/div>\n<\/div>\n<\/pre>\n\n\n\n\n\t
\n  
\n  \t
\n  \t\t
\n  \t\t\t
\n  \t\t\t\t  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n\n\t
\n  
\n  \t
\n  \t\t
\n  \t\t\t
\n  \t\t\t\t
You can put anything in the containers, but since we\u2019re working in email, I recommend using images instead of trying to use CSS or text. Make sure those images have alt text, <\/span>especially<\/span><\/i> if there\u2019s any text in them. For the back of the card, make sure the image is reversed. Since we\u2019re going to spin it around so it\u2019s the right way with the animation, we need to start with it reversed.<\/span><\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n
<div class=\"card-flip\">\n     <div class=\"content\">\n          <div class=\"front\">\n               <img src=\"https:\/\/campaigns.litmus.com\/_email\/2022\/May\/2022-05-Newsletter\/mod7-card-back-min.png\" width=\"162\" height=\"250\" >\n          <\/div>\n          <div class=\"back\">\n               <a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-web-fonts\/\"><img src=\"https:\/\/campaigns.litmus.com\/_email\/2022\/May\/2022-05-Newsletter\/mod7-the-ultimate-guide-4-rev.png\" width=\"162\" height=\"250\" alt=\"The Ultimate Guide to Web Fonts in Email\"><\/a>\n          <\/div>\n     <\/div>\n<\/div>\n<\/pre>\n\n\n\n\n\t
\n  
\n  \t
\n  \t\t
\n  \t\t\t
\n  \t\t\t\t
Then, we wrap the whole thing in some conditional code to hide it from Outlook, and a table cell with the class of \u201cinteractive\u201d:<\/span><\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n
<tr>\n     <td class=\"interactive\" align=\"center\" valign=\"top\">\n     <!--[if (gte mso 9)|(IE)]><!-->\n          <div class=\"card-flip\">\n               <div class=\"content\">\n                    <div class=\"front\">\n                         <img src=\"https:\/\/campaigns.litmus.com\/_email\/2022\/May\/2022-05-Newsletter\/mod7-card-back-min.png\" width=\"162\" height=\"250\" >\n                    <\/div>\n                    <div class=\"back\">\n                         <a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-web-fonts\/\"><img src=\"https:\/\/campaigns.litmus.com\/_email\/2022\/May\/2022-05-Newsletter\/mod7-the-ultimate-guide-4-rev.png\" width=\"162\" height=\"250\" alt=\"The Ultimate Guide to Web Fonts in Email\"><\/a>\n                    <\/div>\n               <\/div>\n          <\/div>\n          <!--<![endif]-->\n     <\/td>\n<\/tr>\n<\/pre>\n\n\n\n\n\t
\n  
\n  \t
\n  \t\t
\n  \t\t\t
\n  \t\t\t\t
Now that we have the cards, let\u2019s make sure they\u2019re positioned correctly, aka, on top of each other with the back of the card hidden.\u00a0<\/span><\/p>\n
We need to declare the size of the cards using width and height to match the size of the images. We then apply this to the outermost <div> so we don\u2019t have to worry about any of the inner divs being a different size. We also add the perspective property so that we get the 3-D feel of the animation.<\/span><\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n
.card-flip {\n     width: 162px;\n     height: 250px;\n     perspective: 500px;\n}\n<\/pre>\n\n\n\n\n\t
\n  
\n  \t
\n  \t\t
\n  \t\t\t
\n  \t\t\t\t
Next, we add a shadow (for funsies) and the transformation to the content div: <\/span><\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n
.content {\n     box-shadow: 0 0 15px rgba(0,0,0,0.1);\n     transition: transform 1s;\n}<\/pre>\n\n\n\n\n\t
\n  
\n  \t
\n  \t\t
\n  \t\t\t
\n  \t\t\t\t
And finally, we add some positioning and visibility to make sure the images are on top of each other. We also include the width and height properties to make sure that the cards align properly. Without them the front image ends up a bit offset.<\/span><\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n
.front, .back {\n     position: absolute;\n     width: 100%;\n     height: 100%;\n}<\/pre>\n\n\n\n\n\t
\n  
\n  \t
\n  \t\t
\n  \t\t\t
\n  \t\t\t\t
Now that the cards are styled, we add in the animation. We\u2019re going to rotate the card on the Y axis:<\/span><\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n
.card-flip:hover .content {\n     transform: rotateY( 180deg ) ;\n     transition: transform 0.5s;\n}<\/pre>\n\n\n\n\n\t
\n  
\n  \t
\n  \t\t
\n  \t\t\t
\n  \t\t\t\t
For web, we\u2019d need to include a transform-style: preserve-3d; but that\u2019s not supported in email. Instead, we\u2019ll hide the back card by giving it an opacity of 0, and then transition the opacity of the back card to 100% on hover.<\/span><\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n
.back { \n     opacity: 0; \n     transition: opacity 0.5s; \n}\n.card-flip:hover .back{\n     opacity: 100%;\n     transition: opacity 0.5s;\n}<\/pre>\n\n\n\n\n\t
\n  
\n  \t
\n  \t\t
\n  \t\t\t
\n  \t\t\t\t
To make the transition smooth, we\u2019ll do the opposite for the front card.<\/span><\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n
.front { \n     opacity: 100%; \n     transition: opacity 0.5s; \n}\n.card-flip:hover .front{\n     opacity: 0;\n     transition: opacity 0.5s;\n}<\/pre>\n\n\n\n\n\t
\n  
\n  \t
\n  \t\t
\n  \t\t\t
\n  \t\t\t\t
Finally, we wrap the whole block of CSS in a media query to target WebKit clients (mostly Apple clients) and add classes to make sure it\u2019s shown there, but hidden in non-WebKit clients. All together the style block looks like this:\u00a0<\/span><\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n
@media screen and (-webkit-min-device-pixel-ratio: 0) {\n\t.fallback { display: none; }\n\t.interactive .card-flip { display: block; }\n\n     .card-flip {\n          width: 162px;\n          height: 250px;\n          perspective: 500px;\n     }\n\n     .content {\n          box-shadow: 0 0 15px rgba(0,0,0,0.1);\n          transition: transform 1s;\n     }\n\n     .front, .back {\n          position: absolute;\n          width: 100%;\n          height: 100%;\n     }\n\n     .card-flip:hover .content {\n          transform: rotateY( 180deg ) ;\n          transition: transform 0.5s;\n     }\n\n     .back {\n          opacity: 0;\n          transition: opacity 0.5s;\n     }\n\n     .card-flip:hover .back{\n          opacity: 100%;\n          transition: opacity 0.5s;\n     }\n\n     .front {\n          opacity: 100%;\n          transition: opacity 0.5s;\n     }\n\n     .card-flip:hover .front{ \t \n          opacity: 0;\n          transition: opacity 0.5s;\n     }\n}<\/pre>\n\n\n\n\n\t
\n  
\n  \t
\n  \t\t
\n  \t\t\t
\n  \t\t\t\t
And voila! A flip card that works in Apple Mail!<\/span><\/p>\n
Fallbacks, because this is email.<\/span><\/h2>\n
And because all email clients are not created equal, we have to create fallback<\/a> versions. For the flip card there\u2019s a fun fallback option that will still work in many email clients\u2014an image swap upon hover. This doesn\u2019t cover every email client though, so for emails clients that don\u2019t support hovering (or for mobile clients, where it\u2019s supported but the user experience isn\u2019t very good) we\u2019ll create a fallback that\u2019s just a list.<\/span><\/p>\n
Hover-supported fallback<\/span><\/h3>\n
Gmail, Yahoo, and AOL all support :hover, so we don\u2019t have to lose the interactive element in these clients. But, as they don\u2019t support position: absolute; we do need to provide a different version.\u00a0<\/span><\/p>\n
In these cases, we\u2019ll wrap an <a> tag with a background image<\/a> around another image. Then when we hover over the <a> tag we\u2019ll trigger the image to disappear.<\/span><\/p>\n
First we style the <a> with the background image.<\/span><\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n
<a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-web-fonts\/\" style=\"background-image: url('https:\/\/campaigns.litmus.com\/_email\/2022\/May\/2022-05-Newsletter\/mod7-the-ultimate-guide-4-min.png'); background-size: 100% 100%;\"> <\/a><\/pre>\n\n\n\n\n\t
\n  
\n  \t
\n  \t\t
\n  \t\t\t
\n  \t\t\t\t
Then, we make sure it displays as a block and give it a width and a height so the background image shows up. <\/span><\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n
<a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-web-fonts\/\" style=\"background-image: url('https:\/\/campaigns.litmus.com\/_email\/2022\/May\/2022-05-Newsletter\/mod7-the-ultimate-guide-4-min.png'); background-size: 100% 100%; display: block; width: 162px; height: 250px;\u201d> <\/a><\/pre>\n\n\n\n\n\t
\n  
\n  \t
\n  \t\t
\n  \t\t\t
\n  \t\t\t\t
Finally, we give the <a> a class to differentiate it from the animated version, add a box shadow (more funsies!), and add the image.<\/span><\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n
<a class=\"card\" rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-web-fonts\/\" style=\"background-image: url('https:\/\/campaigns.litmus.com\/_email\/2022\/May\/2022-05-Newsletter\/mod7-the-ultimate-guide-4-min.png'); background-size: 100% 100%; display: block; width: 162px; height: 250px;box-shadow: 4px 4px 3px rgba(0,0,0,0.12);\"> \n     <img src=\"https:\/\/campaigns.litmus.com\/_email\/2022\/May\/2022-05-Newsletter\/mod7-card-back-min.png\" width=\"162\" height=\"250\" alt=\"The Ultimate Guide to Web Fonts in Email\">\n<\/a><\/pre>\n\n\n\n\n\t
\n  
\n  \t
\n  \t\t
\n  \t\t\t
\n  \t\t\t\t
The image swap is easily accomplished by adding a hover state to the class and then telling the image to go away.<\/span><\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n
.card:hover img { display: none; box-shadow: 4px 4px 3px rgba(0,0,0,0.12); }<\/pre>\n\n\n\n\n\t
\n  
\n  \t
\n  \t\t
\n  \t\t\t
\n  \t\t\t\t
Extra fun bonus coding tip!<\/span><\/p>\n
Using the display: none technique above can be jarring. You can smooth the transition out by using opacity: 0; instead and then adding a transition: opacity 0.5s; to both the hover state and inline on the image:<\/span><\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n
.card:hover img { opacity: 0; box-shadow: 4px 4px 3px rgba(0,0,0,0.12); transition: opacity 0.5s; }\n.\n.\n.\n<a class=\"card\" rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-web-fonts\/\" style=\"background-image: url('https:\/\/campaigns.litmus.com\/_email\/2022\/May\/2022-05-Newsletter\/mod7-the-ultimate-guide-4-min.png'); background-size: 100% 100%; display: block; width: 162px; height: 250px;box-shadow: 4px 4px 3px rgba(0,0,0,0.12);\">\n     <img src=\"https:\/\/campaigns.litmus.com\/_email\/2022\/May\/2022-05-Newsletter\/mod7-card-back-min.png\" width=\"162\" height=\"250\" alt=\"The Ultimate Guide to Web Fonts in Email\" style=\"transition: opacity 0.5s;\">\n<\/a><\/pre>\n\n\n\n\n\t
\n  
\n  \t
\n  \t\t
\n  \t\t\t
\n  \t\t\t\t
This isn\u2019t currently supported in Gmail, Yahoo, or AOL so it wouldn\u2019t change anything there, but for Apple mail clients who have preferred reduced motion, it will add a nice touch.<\/span><\/p>\n
As this fallback is still an interactive version, we place it inside the table cell with class=\u201dinteractive\u201d right after the animated version and then add some styles to hide it in WebKit clients:\u00a0<\/span><\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n
.interactive .card { display: block !important; }<\/pre>\n\n\n\n\n\t
\n  
\n  \t
\n  \t\t
\n  \t\t\t
\n  \t\t\t\t
Since the <a> has the display: block style inline, we need to add the !important. This also means that this will be the default version.<\/span><\/p>\n
Non-hover supported fallback<\/span><\/h3>\n
There are two places where the hover effect isn’t supported: Outlook and mobile clients.\u00a0<\/span><\/p>\n
Arguably, the hover effect <\/span>is<\/span><\/i> supported on mobile. But in the case of the flip card or image-swap, the effect is less than ideal as it\u2019s a tapping motion instead of a hover motion.\u00a0<\/span><\/p>\n
If you\u2019re linking your images, tapping has the additional effect of causing the link to trigger sending the subscriber to the landing page. Unfortunately, this happens <\/span>before<\/span><\/i> the card flips so subscribers don\u2019t know what they\u2019ve clicked on. If you\u2019re going to use cards to link out (like we did), then you\u2019ll need to provide a fallback for mobile as well.<\/span><\/p>\n
For these fallbacks we used a list, but you could also use a paragraph or just the front image if you\u2019d like. Really whatever works in your design. Whatever content you\u2019re using, you\u2019ll want to wrap it in a div or a table cell and give it a class of fallback so you can target it:<\/span><\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n
<tr>\n     <td class=\"fallback\" align=\"center\" valign=\"top\">\n          <table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" role=\"list\">\n               <tr role=\"listitem\">\n                    <td align=\"left\" valign=\"top\" style=\"padding: 15px 8px;\">\n                         <img src=\"https:\/\/campaigns.litmus.com\/_email\/_global\/emojis\/sparkle.png\" alt=\"\" width=\"20\" height=\"20\" style=\"font-size: 16px; line-height: 26px; color: #BC5920;\" \/>\n                    <\/td>\n                    <td align=\"left\" valign=\"top\" style=\"padding: 15px 0;\">\n                         <p style=\"font-family:Helvetica, Arial, sans-serif; font-size:18px; line-height:28px; color:#0a080b; margin: 0; padding:0; text-align: left;\"><a class=\"link\" style=\"color: #0f618a; text-decoration: underline;\" rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-web-fonts\/\">The Ultimate Guide to Web Fonts in Email<\/a><\/p>\n                    <\/td>\n               <\/tr>\n          <\/table>\n     <\/td>\n<\/tr> \n<\/pre>\n\n\n\n\n\t
\n  
\n  \t
\n  \t\t
\n  \t\t\t
\n  \t\t\t\t
If you\u2019re doing both the Outlook and mobile fallbacks, you\u2019ll need to create duplicate versions, one for mobile and one for Outlook. Wrap the mobile version with the same conditional code that you used above to hide it from Outlook, and then wrap the Outlook version with conditional code to show it in Outlook: <\/span><\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n
<tr>\n     <td class=\"fallback\" align=\"center\" valign=\"top\">\n     <!--[if (gte mso 9)|(IE)]><!-->\n          <table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" role=\"list\">\n               <tr role=\"listitem\">\n                    <td align=\"left\" valign=\"top\" style=\"padding: 15px 8px;\">\n                         <img src=\"https:\/\/campaigns.litmus.com\/_email\/_global\/emojis\/sparkle.png\" alt=\"\" width=\"20\" height=\"20\" style=\"font-size: 16px; line-height: 26px; color: #BC5920;\" \/>\n                    <\/td>\n                    <td align=\"left\" valign=\"top\" style=\"padding: 15px 0;\">\n                         <p style=\"font-family:Helvetica, Arial, sans-serif; font-size:18px; line-height:28px; color:#0a080b; margin: 0; padding:0; text-align: left;\"><a class=\"link\" style=\"color: #0f618a; text-decoration: underline;\" rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-web-fonts\/\">The Ultimate Guide to Web Fonts in Email<\/a><\/p>\n                    <\/td>\n               <\/tr>\n          <\/table>\n     <!--<![endif]-->\n     <!--[if (gte mso 9)|(IE)]>\n          <table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" role=\"list\">\n               <tr role=\"listitem\">\n                    <td align=\"left\" valign=\"top\" style=\"padding: 15px 8px;\">\n                         <img src=\"https:\/\/campaigns.litmus.com\/_email\/_global\/emojis\/sparkle.png\" alt=\"\" width=\"20\" height=\"20\" style=\"font-size: 16px; line-height: 26px; color: #BC5920;\" \/>\n                    <\/td>\n                    <td align=\"left\" valign=\"top\" style=\"padding: 15px 0;\">\n                         <p style=\"font-family:Helvetica, Arial, sans-serif; font-size:18px; line-height:28px; color:#0a080b; margin: 0; padding:0; text-align: left;\"><a class=\"link\" style=\"color: #0f618a; text-decoration: underline;\" rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-web-fonts\/\">The Ultimate Guide to Web Fonts in Email<\/a><\/p>\n                    <\/td>\n               <\/tr>\n          <\/table>\n     <![endif]-->\n     <\/td>\n<\/tr> <\/pre>\n\n\n\n\n\t
\n  
\n  \t
\n  \t\t
\n  \t\t\t
\n  \t\t\t\t
If you\u2019re only doing the Outlook version, then you can leave out the mobile section and just keep the Outlook wrapped in the <!–[if (gte mso 9)|(IE)]> conditional code.\u00a0<\/span><\/p>\n
Now add the class to control when that mobile fallback version shows up. First make sure the fallback isn\u2019t showing up at all so it doesn\u2019t appear for desktop clients:\u00a0<\/span>
\n<\/span><\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n
.fallback { display: none; }<\/pre>\n\n\n\n\n\t
\n  
\n  \t
\n  \t\t
\n  \t\t\t
\n  \t\t\t\t
Since the fallback also contains the Outlook content, add some conditional styles to bring it back there:<\/span>
\n<\/span><\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n
  <!--[if (gte mso 9)|(IE)]>\n<style>\n          .fallback { display: block; }\n<\/style>\n<![endif]--><\/pre>\n\n\n\n\n\t
\n  
\n  \t
\n  \t\t
\n  \t\t\t
\n  \t\t\t\t
Target most mobile clients by adding styles in a media query based on screen size (don\u2019t forget the !important to account for the inline styles in the .card class!):<\/span>
\n<\/span><\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n
@media screen and (max-width:600px) {\n      \t.fallback { display: block; }\n      \t.interactive { display: none !important; }\n  }<\/pre>\n\n\n\n\n\t
\n  
\n  \t
\n  \t\t
\n  \t\t\t
\n  \t\t\t\t
But that doesn\u2019t account for iPads, which have the same functionality as the iPhones <\/span>and <\/span><\/i>run on WebKit. For those we turn to <\/span>howtotarget.email<\/span><\/a> and we find that we can target iPads with some fancy code: <\/span><\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n
@media (hover: none){\n     _:-webkit-full-screen, _::-webkit-full-page-media, _:future, :root .body:not(.Singleton) .interactive { display: none !important; }\n     _:-webkit-full-screen, _::-webkit-full-page-media, _:future, :root .body:not(.Singleton) .fallback { display: block; }\n}<\/pre>\n\n\n\n\n\t
\n  
\n  \t
\n  \t\t
\n  \t\t\t
\n  \t\t\t\t
And, whew, it\u2019s been a journey, but that\u2019s it! Well mostly\u2026\u00a0<\/span><\/p>\n
Don\u2019t forget to consider…\u00a0<\/span><\/h2>\n
Dark Mode<\/span><\/h3>\n
Make sure to account for dark mode<\/a> considerations and add those styles to provide the best experience for your subscribers, no matter what their preferences. And speaking of preferences\u2026\u00a0<\/span><\/p>\n
Reduced motion preferences<\/span><\/h3>\n
The flip motion isn\u2019t a big motion, but we chose to get rid of it for subscribers who prefer reduced motion. In this case, we still include the interactivity with the image swap. Less motion, but still lots of fun:\u00a0<\/span>
\n<\/span><\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n
@media (prefers-reduced-motion) {\n     .interactive .card { display: block !important; }\n     .interactive .card-flip { display: none; }\n}<\/pre>\n\n\n\n\n\t
\n  
\n  \t
\n  \t\t
\n  \t\t\t
\n  \t\t\t\t
Gmail clipping<\/span><\/h3>\n
That\u2019s a lot of code for one card. Adding more cards adds more code. It is possible to keep it under the Gmail clipping limit (we had 5 cards and the whole rest of the newsletter!), but it is definitely something you should be aware of. If you find yourself going over, try minimizing your code. I usually use <\/span>EmailComb<\/span><\/a>, but I know there are some code editors out there that will let you minimize as you build.\u00a0<\/span><\/p>\n
You can see the finished code <\/span>here<\/span><\/a>.<\/span><\/p>\n
How did it perform?<\/span><\/h2>\n
Since there were different versions, we were able to include UTM codes to track the performance of the links in the various emails. We found that the links on the interactive content accounted for 12.2% of all unique clicks in the email. And, <\/span>while we don\u2019t know if it\u2019s statistically significant, we did see an increase in CTR when we used this interactive element as a progressive enhancement.\u00a0<\/span><\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n\n\t
\n  
\n  \t
\n  \t\t
\n  \t\t\t
\n  \t\t\t\t
\n\n\n\n
\"front<\/td>\n\n
Trends in Email: Design and Marketing<\/strong><\/p>\n
Download our latest guide to get a snapshot of the latest trends in design and marketing to help keep your email program fresh\u2014and subscribers engaged.<\/p>\n
See the trends<\/a><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n\n
\n
\n  <\/div>\n
\n        
\n              
\n                        
\n                      <\/div>\n              <\/div>\n              
\n                    <\/div>\n    <\/div>\n  <\/div>\n  \n<\/div>\n","protected":false},"excerpt":{"rendered":"
Learn how to code interactive cards in your email design.<\/p>\n","protected":false},"author":37,"featured_media":49090,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"tags":[10310,10266,499,86,102,468],"blog_category":[10300],"class_list":["post-49069","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-animated-gifs","tag-animation","tag-email-coding","tag-engagement","tag-html","tag-images","blog_category-email-building"],"yoast_head":"\nHow to Create a Flip Card in Email - Litmus<\/title>\n<meta name=\"description\" content=\"Learn how to code interactive cards in your email design.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.litmus.com\/blog\/create-flip-cards-in-email\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Create a Flip Card in Email\" \/>\n<meta property=\"og:description\" content=\"Learn how to code interactive cards in your email design.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.litmus.com\/blog\/create-flip-cards-in-email\" \/>\n<meta property=\"og:site_name\" content=\"Litmus\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/litmusapp\" \/>\n<meta property=\"article:published_time\" content=\"2022-06-09T13:30:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-10-11T18:24:27+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2022\/06\/Interactive-hovering-cards.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1380\" \/>\n\t<meta property=\"og:image:height\" content=\"725\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@litmusapp\" \/>\n<meta name=\"twitter:site\" content=\"@litmusapp\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Create a Flip Card in Email - Litmus","description":"Learn how to code interactive cards in your email design.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.litmus.com\/blog\/create-flip-cards-in-email","og_locale":"en_US","og_type":"article","og_title":"How to Create a Flip Card in Email","og_description":"Learn how to code interactive cards in your email design.","og_url":"https:\/\/www.litmus.com\/blog\/create-flip-cards-in-email","og_site_name":"Litmus","article_publisher":"https:\/\/www.facebook.com\/litmusapp","article_published_time":"2022-06-09T13:30:00+00:00","article_modified_time":"2022-10-11T18:24:27+00:00","og_image":[{"width":1380,"height":725,"url":"https:\/\/www.litmus.com\/wp-content\/uploads\/2022\/06\/Interactive-hovering-cards.jpg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_creator":"@litmusapp","twitter_site":"@litmusapp","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.litmus.com\/blog\/create-flip-cards-in-email#article","isPartOf":{"@id":"https:\/\/www.litmus.com\/blog\/create-flip-cards-in-email"},"author":{"name":"","@id":""},"headline":"How to Create a Flip Card in Email","datePublished":"2022-06-09T13:30:00+00:00","dateModified":"2022-10-11T18:24:27+00:00","mainEntityOfPage":{"@id":"https:\/\/www.litmus.com\/blog\/create-flip-cards-in-email"},"wordCount":8,"commentCount":0,"publisher":{"@id":"https:\/\/www.litmus.com\/#organization"},"image":{"@id":"https:\/\/www.litmus.com\/blog\/create-flip-cards-in-email#primaryimage"},"thumbnailUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2022\/06\/Interactive-hovering-cards.jpg","keywords":["Animated Gifs","Animation","Email Coding","Engagement","HTML","Images"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.litmus.com\/blog\/create-flip-cards-in-email#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.litmus.com\/blog\/create-flip-cards-in-email","url":"https:\/\/www.litmus.com\/blog\/create-flip-cards-in-email","name":"How to Create a Flip Card in Email - Litmus","isPartOf":{"@id":"https:\/\/www.litmus.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.litmus.com\/blog\/create-flip-cards-in-email#primaryimage"},"image":{"@id":"https:\/\/www.litmus.com\/blog\/create-flip-cards-in-email#primaryimage"},"thumbnailUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2022\/06\/Interactive-hovering-cards.jpg","datePublished":"2022-06-09T13:30:00+00:00","dateModified":"2022-10-11T18:24:27+00:00","description":"Learn how to code interactive cards in your email design.","breadcrumb":{"@id":"https:\/\/www.litmus.com\/blog\/create-flip-cards-in-email#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.litmus.com\/blog\/create-flip-cards-in-email"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.litmus.com\/blog\/create-flip-cards-in-email#primaryimage","url":"https:\/\/www.litmus.com\/wp-content\/uploads\/2022\/06\/Interactive-hovering-cards.jpg","contentUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2022\/06\/Interactive-hovering-cards.jpg","width":1380,"height":725},{"@type":"BreadcrumbList","@id":"https:\/\/www.litmus.com\/blog\/create-flip-cards-in-email#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.litmus.com\/"},{"@type":"ListItem","position":2,"name":"How to Create a Flip Card in Email"}]},{"@type":"WebSite","@id":"https:\/\/www.litmus.com\/#website","url":"https:\/\/www.litmus.com\/","name":"Litmus","description":"Are you getting the most out of your email marketing?","publisher":{"@id":"https:\/\/www.litmus.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.litmus.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.litmus.com\/#organization","name":"Litmus Software","url":"https:\/\/www.litmus.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.litmus.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.litmus.com\/wp-content\/uploads\/2025\/04\/featured-image.png","contentUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2025\/04\/featured-image.png","width":600,"height":314,"caption":"Litmus Software"},"image":{"@id":"https:\/\/www.litmus.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/litmusapp","https:\/\/x.com\/litmusapp"]},{"@type":"Person","@id":""}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts\/49069","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/users\/37"}],"replies":[{"embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/comments?post=49069"}],"version-history":[{"count":15,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts\/49069\/revisions"}],"predecessor-version":[{"id":54364,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts\/49069\/revisions\/54364"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/media\/49090"}],"wp:attachment":[{"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/media?parent=49069"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/tags?post=49069"},{"taxonomy":"blog_category","embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/blog_category?post=49069"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}