BehaveRespectfully LookDistinctly MovePurposefully SpeakAuthentically ThinkSimply heart_icon

Flip Card

Cards are containers that display content/data, and can contain elements of varying size. Cards sit as a collection on a grid.

Overview

Cards can "flip" to show more information. Flipped cards can maintain the same width when flipped (single-column), or can expand to full content width (across all columns).

Single-column flips support only simple data collection or edits, whereas a full-width card offers space for larger transactions and more data (such as tables).

Full-width, expanded cards ("turbo cards") cover all the other content on a page below the navigation and above the footer when they are open. Once a turbo card is flipped back, the original page that contains the smaller card that originated the flip is displayed again. This is true on all viewports, so turbo cards in single-column mobile views can scroll long.

Card Flip

 

General InformationDetails

Network name: PDP Plus
Policy status: Enrolled
Coverage period: 09/01/2017-08/31/2018
Coverage elected for: John smith,
Jane Smith

Click here

General InformationBack

Content Goes Here
Click here to go back

  • Download Associated Javascripts:Zip
  • Download Associated Jquery Files:Zip


Hide Show CSS

.clear:after {
	clear: both;
	content: "";
	display: table;
}
.ml-card-panel {
	float: left;
	width: 100%;
	height: auto;
	/*margin: 20px;*/
	position: relative;
	-webkit-perspective: 600px;
	-moz-perspective: 600px;
	z-index: 99999;
}
.ml-flip-trigger {
	margin-top: -10px;
	float: right;
	text-align: center;
	font-size: 10px;
	color: #333333;
	line-height: 1;
	text-decoration: none;
	text-transform:uppercase;
	letter-spacing:0.5px;
}

.ml-flip-trigger:hover{
	text-decoration:underline;
}

.ml-flip-trigger:after{
	content:url(/assets/patterns/img/flip-icon.svg);
	display:block;
	padding-top:6px;
	margin:auto;
	width:18px;

}

.ml-flip-trigger:hover:after{
	content:url(/assets/patterns/img/flip-icon-hover.svg);

}
.ml-card-panel hr {
	border: 0;
	height: 1px;
	background: #cccccc;
	margin-bottom: 20px;
	margin-top: 20px;
}
.ml-card-panel .front {
	float: none;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 900;
	width: 370px;
	height: auto;
	border: 1px solid #ccc;
	background: #fff;
	padding: 25px 20px 30px 20px;
	line-height: 1.2;
	-moz-box-shadow: 0 1px 5px rgba(0,0,0,0.7);
	-webkit-box-shadow: 0 1px 5px rgba(0,0,0,0.7);
	box-shadow: 0 1px 5px rgba(0,0,0,0.7);
	
	-webkit-transform: rotateX(0deg) rotateY(0deg);
	-webkit-transform-style: preserve-3d;
	-webkit-backface-visibility: hidden;
	-moz-transform: rotateX(0deg) rotateY(0deg);
	-moz-transform-style: preserve-3d;
	-moz-backface-visibility: hidden;
	
	transform:rotateX(0deg) rotateY(0deg);
	/* -- transition is the magic sauce for animation -- */
	-o-transition: all .4s ease-in-out;
	-ms-transition: all .4s ease-in-out;
	-moz-transition: all .4s ease-in-out;
	-webkit-transition: all .4s ease-in-out;
	transition: all .4s ease-in-out;
}
.ml-card-panel.flip .front {
	z-index: 900;
	border-color: #eee;
	background: #fff;
	-webkit-transform: rotateY(180deg);
	-moz-transform: rotateY(180deg);
	transform:rotateY(180deg);
	-moz-box-shadow: 0 1px 5px rgba(0,0,0,0.7);
	-webkit-box-shadow: 0 1px 5px rgba(0,0,0,0.7);
	box-shadow: 0 1px 5px rgba(0,0,0,0.7);
}
.ml-card-panel .back {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 800;
	width: 700px/*1170px*/;
	height: auto;
	background: #fff;
	
	padding: 25px 20px 30px 20px;
	-webkit-transform: rotateY(-180deg);
	-webkit-transform-style: preserve-3d;
	-webkit-backface-visibility: hidden;
	-moz-transform: rotateY(-180deg);
	-moz-transform-style: preserve-3d;
	-moz-backface-visibility: hidden;
	transform:rotateY(-180deg);
	/* -- transition is the magic sauce for animation -- */
	-o-transition: all .4s ease-in-out;
	-ms-transition: all .4s ease-in-out;
	-moz-transition: all .4s ease-in-out;
	-webkit-transition: all .4s ease-in-out;
	transition: all .4s ease-in-out;
}
.ml-card-panel.flip .back {
	
	z-index: 1000;
	background: #fff;
	-webkit-transform: rotateX(0deg) rotateY(0deg);
	-moz-transform: rotateX(0deg) rotateY(0deg);
	transform:rotateX(0deg) rotateY(0deg);
	
	/*-moz-box-shadow: 0 1px 5px rgba(0,0,0,0.7);
	-webkit-box-shadow: 0 1px 5px rgba(0,0,0,0.7);
	
	box-shadow: 0 1px 5px rgba(0,0,0,0.7);*/
	border-top:#0090DA 2px solid;
	
}


.corner{
	width:0;
    height: 0;
	float:right;
	margin:-27px -20px 0 15px;
	border-style: solid;
	border-width: 43px 0 0 43px;
	border-color: #fff transparent transparent #0091da;
}

.corner-white{
	width:0;
    height: 0;
	float:right;
	margin:-25px -20px 0 0;
    border-style: solid;
    border-width: 0 43px 43px 0;
    border-color: transparent #ffffff transparent transparent;
}




.ml-card-title {
	font-family: "Georgia", serif;
	font-size:18px;
	font-weight:bold;
	color:#333333;
	padding-bottom:20px;

}

.ml-card {
	width: 370px;
	min-height: 350px;
}
.ml-card-panel.flip .action-front {
	display: none;
}
.block ol li {
	text-align: left;
	margin: 0 0 0 28px;
}
.block .action-front {
	display: block;
	padding: 3px;
	background: #333;
	text-align: right;
	font-size: .8em;
	opacity: 0;
	position: absolute;
	cursor: pointer;
	-webkit-transition: opacity .2s linear;
}
.block:hover .action-front {
	opacity: .7;
}

        
        
                            
HideShow HTML
                                                

<div >
<!-- Flip Card -->

<div class="ml-card ml-card-panel clear">

<!-- ===== Front of the CARD ===== -->
<div class="front">

<div><span class="ml-card-title">General Information</span><a class="action-front ml-flip-trigger" href="#card1">Details</a></div>

<hr>
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="line-height:17px">
<tbody>
<tr >
<td style="padding-bottom:15px;"><strong>Network name:</strong></td>
<td style="padding-bottom:15px;">PDP Plus</td>
</tr>
<tr>
<td style="padding-bottom:15px;"><strong>Policy status:</strong></td>
<td style="padding-bottom:15px;"> Enrolled</td>
</tr>
<tr>
<td style="padding-bottom:15px;"><strong>Coverage period: </strong></td>
<td style="padding-bottom:15px;">09/01/2017-08/31/2018</td>
</tr>
<tr>
<td style="padding-bottom:15px; vertical-align:top"><strong>Coverage elected for:</strong></td>
<td style="padding-bottom:15px;">John smith,<br>
Jane Smith<br></td>
</tr>
</tbody>
</table>
<p style="text-align:right;padding-top:15px;">
<a class="ml-button-primary" href="#card1">Click here</a>
</p>
</div>

<!-- ===== Back of the CARD ===== -->
<div class="back" style="clear:both">
<div class="corner"></div>
<div><span class="ml-card-title">General Information</span><a class="ml-flip-trigger" href="#card-back">Back</a></div>

<hr>
<div style="width:100%; height:500px; background-color:#DDDDDD; text-align:center; display:block; line-height:500px; margin-bottom:20px;">Content Goes Here</div>
<a class="ml-link" href="#card-back">Click here to go back</a>


</div>



</div>

</div>

=====================Script============================

<script src="../assets/patterns/jquery/external/jquery/jquery.js"></script>

<script>

$(document).ready(function(){
$('a[href="#card1"').click(function(e){
$(this).closest('.ml-card').addClass('flip');
e.preventDefault();
});
$('a[href="#card-back"').click(function(e){
$(this).closest('.ml-card').removeClass('flip');
e.preventDefault();
});
});

</script>

Examples

Sample desktop view only. Not to scale.

Front of the Card

overlay


Back of the Card : Multiple Column

overlay


Back of the Card : Single Column

overlay