BehaveRespectfully LookDistinctly MovePurposefully SpeakAuthentically ThinkSimply heart_icon

Drawer

Overview

About drawers:


Drawers allow users to perform smaller transactions in the midst of a larger flow or on a dashboard without leaving the main page or process. Drawers are generally modal, with the main page grayed out and inactive until the user closes the drawer.

CTA buttons and links in drawers are persistent – they appear 30px below the content in the drawer when the user has a large enough browser viewport, and are pinned to the bottom of the viewport when the drawer content exceeds the browser window height.

Drawers become a takeover screen in viewports smaller than 768px wide.

Drawer without Scroll

 

Click here for working example.


Sample desktop view only. Not to scale.

overlay

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


Hide Show CSS
                        
       
  .ml-drawer-container {
	top: 0;
	left: calc(100% - 370px);
	width: 370px;
	height: 100vh;
	display:none;
	vertical-align: middle;
	position: absolute;
	z-index: 2;
	box-sizing: border-box;
	background: #ffffff;
	padding: 55px 20px 0 20px;
	text-align: left;
	overflow: hidden;
}
.ml-drawer-title {
	font-family: "Georgia", serif;
	font-size:18px;
	font-weight:bold;
	color:#333333;
	padding-bottom:20px;

}

.ml-drawer-content {
	height: 100%;
	overflow: scroll;
	padding-right:20px;
	line-height:1.4;
}
 .ml-drawer-content::last-child {
 margin-bottom:100px;
}
a.close-drawer {
	position: absolute;
	top: 20px;
	right: 20px;
	display: block;
	width: 25px;
	height: 25px;
	text-indent: -9999px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
	background-image: url(/assets/patterns/img/modal/close-icon.svg);
}
a.close-drawer:hover {
	background-image: url(/assets/patterns/img/modal/close-icon-hover.svg);
}
.ml-drawer-action-bar {
	height: 80px;
	width: 100%;
	background-color: #fff;
	padding: 30px 0px 30px 0px;
}
.ml-drawer-action-bar-static {
	bottom: 0;
	left: 0;
	position: absolute;
	height: 80px;
	width: 100%;
	background-color: #fff;
	padding: 30px 20px 30px 20px;
	
	
}
.ml-drawer-action-bar a, .ml-drawer-action-bar-static a {
	margin-right: 50px;
	vertical-align:text-bottom;
}

div.ml-drawer-action-bar > a.ml-link, div.ml-drawer-action-bar-static > a.ml-link{
	padding-bottom:0px;
}


 @-webkit-keyframes sk-stretchdelay {
 0%, 40%, 100% {
-webkit-transform: scaleY(0.5);
 transform: scaleY(0.5);
}
 20% {
-webkit-transform: scaleY(1.0);
 transform: scaleY(1.0);
}
}
 @keyframes sk-stretchdelay {
 0%, 40%, 100% {
 -webkit-transform: scaleY(0.5);
 transform: scaleY(0.5);
}
20% {
 -webkit-transform: scaleY(1.0);
 transform: scaleY(1.0);
}
}
        
        
                            
HideShow HTML
                                                

<!--Drawer Trigger-->

<div> <a href="#ex2" class="mlpl-type-strong-link">Click here</a> to open a drawer. </div>

<!--Drawer Container-->

<div class="ml-drawer-container" id="ex1">
<a href="#" rel="modal:close" class="close-drawer"></a>
<div class="ml-drawer-content">
<h2 class="header-xsmall align-left"> Drawer Title </h2>
<p class="align-left">This is the default drawer which is useful for displaying additional information without navigating user away from the page or flow. The drawer can be closed with the 'x' icon or any link or button configured to close the drawer.
<br><br><br><br></p>

<div class="ml-drawer-action-bar" >
<a href="#" rel="modal:close" class="ml-link">Cancel</a> <a href="#" rel="modal:close" class="ml-button-primary" >Submit</a>
</div>

</div>
</div>

<!-- ======== script ======== -->

<script>
/* ------- Example 1 --------*/

$('a[href="#ex1"').click(function(event) {
event.preventDefault();

$('#ex1').show( "slide", { direction: "right" }, 320 );
$('#ex1').modal({showClose:false});
});

$('a[rel="modal:close"]').click(function(event) {
event.preventDefault();
$('#ex1').hide( "slide", { direction: "right" }, 320 );

});

</script>

Drawer with Scroll

Buttons are pinned to the base of the browser window when the drawer content exceeds the user's browser window height.

Click here for working example.

Sample desktop view only. Not to scale.

overlay

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


Hide Show CSS
                        
  .ml-drawer-container {
	top: 0;
	left: calc(100% - 370px);
	width: 370px;
	height: 100vh;
	display:none;
	vertical-align: middle;
	position: absolute;
	z-index: 2;
	box-sizing: border-box;
	background: #ffffff;
	padding: 55px 20px 0 20px;
	text-align: left;
	overflow: hidden;
}
.ml-drawer-title {
	font-family: "Georgia", serif;
	font-size:18px;
	font-weight:bold;
	color:#333333;
	padding-bottom:20px;

}

.ml-drawer-content {
	height: 100%;
	overflow: scroll;
	padding-right:20px;
	line-height:1.4;
}
 .ml-drawer-content::last-child {
 margin-bottom:100px;
}
a.close-drawer {
	position: absolute;
	top: 20px;
	right: 20px;
	display: block;
	width: 25px;
	height: 25px;
	text-indent: -9999px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
	background-image: url(/assets/patterns/img/modal/close-icon.svg);
}
a.close-drawer:hover {
	background-image: url(/assets/patterns/img/modal/close-icon-hover.svg);
}
.ml-drawer-action-bar {
	height: 80px;
	width: 100%;
	background-color: #fff;
	padding: 30px 0px 30px 0px;
}
.ml-drawer-action-bar-static {
	bottom: 0;
	left: 0;
	position: absolute;
	height: 80px;
	width: 100%;
	background-color: #fff;
	padding: 30px 20px 30px 20px;
	
	
}
.ml-drawer-action-bar a, .ml-drawer-action-bar-static a {
	margin-right: 50px;
	vertical-align:text-bottom;
}

div.ml-drawer-action-bar > a.ml-link, div.ml-drawer-action-bar-static > a.ml-link{
	padding-bottom:0px;
}


 @-webkit-keyframes sk-stretchdelay {
 0%, 40%, 100% {
-webkit-transform: scaleY(0.5);
 transform: scaleY(0.5);
}
 20% {
-webkit-transform: scaleY(1.0);
 transform: scaleY(1.0);
}
}
 @keyframes sk-stretchdelay {
 0%, 40%, 100% {
 -webkit-transform: scaleY(0.5);
 transform: scaleY(0.5);
}
20% {
 -webkit-transform: scaleY(1.0);
 transform: scaleY(1.0);
}
}
      
        
        
                            
HideShow HTML
                                                

<!--Drawer Trigger-->

<div> <a href="#ex2" class="mlpl-type-strong-link">Click here</a> to open a drawer. </div>

<!--Drawer Container-->
<div class="ml-drawer-container" id="ex2">
<a href="#" rel="modal:close" class="close-drawer"></a>
<div class="ml-drawer-content">
<h2 class="header-xsmall align-left"> Drawer Title </h2>
<p class="align-left">This is the default drawer which is useful for displaying additional information without navigating user away from the page or flow. The drawer can be closed with the 'x' icon or any link or button configured to close the drawer.
<br><br><br><br></p>

<h3> <strong>Additional Content </strong></h3><br>
<p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent interdum libero eu lorem tristique dapibus. Donec a diam at felis euismod cursus sit amet sagittis tellus. Maecenas pretium malesuada volutpat. Integer aliquam ante urna, at faucibus leo dignissim at. In dignissim pharetra tortor, at lacinia neque commodo ac. Donec vehicula, lacus vel vulputate dapibus, sapien odio convallis lacus, nec iaculis nisl dui et velit. In eu elementum risus. Praesent a odio et risus posuere ultricies. Ut efficitur erat sit amet turpis fermentum, eget molestie metus tempor. Fusce nec metus in turpis gravida porttitor. Vivamus ultricies nec magna sed rutrum. Sed eu vehicula ex. Vestibulum ut pulvinar risus.
</p>
<p>
Fusce nec tempor felis. Pellentesque ac nisl a augue dictum placerat sed at lorem. Donec ac lectus consequat, facilisis felis a, volutpat nunc. Mauris non posuere mi. Aliquam dignissim turpis sit amet elementum efficitur. Pellentesque congue, leo eget accumsan mollis, ligula neque accumsan urna, ut blandit sem mi condimentum sapien. Nam rhoncus ultricies blandit. Phasellus vitae tellus non quam finibus fermentum. Ut sed volutpat libero. Maecenas pharetra quam nec est rutrum, eget volutpat ante maximus. Curabitur convallis dolor pretium erat scelerisque convallis. Donec dictum justo et facilisis euismod. Cras eget tempor sem, vel rutrum enim.
</p>
<p>
Suspendisse ut elit neque. Quisque fringilla mi nec purus viverra pharetra. Sed vitae lacus at erat fringilla luctus. Sed mauris lacus, sodales eu molestie vitae, feugiat vitae ex. Nam ante dolor, malesuada sit amet tempus ac, ornare a urna. Donec ut nibh tortor. Nullam bibendum ex at lectus molestie, vel convallis risus egestas.
</p>
<p>
Ut congue risus ut diam tempus facilisis. Duis ultricies, arcu sit amet convallis varius, magna augue fringilla sapien, id convallis sapien mi scelerisque massa. Aliquam dignissim ultricies est vitae consectetur. Etiam vel ex ac nunc dapibus fermentum. Sed commodo dapibus dolor vitae condimentum. Morbi sollicitudin tincidunt mi, ac consectetur dolor. Duis ipsum eros, vulputate mollis fermentum at, volutpat sed augue. Sed at lacinia tortor. In eget enim ex. Aenean et odio eleifend, pharetra massa in, varius odio. Suspendisse auctor purus risus, vitae laoreet elit varius sollicitudin. In suscipit scelerisque augue, eget vehicula risus accumsan sed.
</p><br><br><br><br><br><br><br>

</div>
<div class="ml-drawer-action-bar-static" >
<a href="#" rel="modal:close" class="ml-link">Cancel</a> <a href="#" rel="modal:close" class="ml-button-primary" >Submit</a>
</div>
</div>

<!-- ======== script ======== -->

<script>
/* ------- Example 2 --------*/


$('a[href="#ex2"').click(function(event) {
event.preventDefault();

$('#ex2').show( "slide", { direction: "right" }, 320 );
$('#ex2').modal({showClose:false});
});

$('a[rel="modal:close"]').click(function(event) {
event.preventDefault();
$('#ex2').hide( "slide", { direction: "right" }, 320 );

});
</script>

Drawer Title

This is the default drawer which is useful for displaying additional information without navigating user away from the page or flow. The drawer can be closed with the 'x' icon or any link or button configured to close the drawer.



Additional Content


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent interdum libero eu lorem tristique dapibus. Donec a diam at felis euismod cursus sit amet sagittis tellus. Maecenas pretium malesuada volutpat. Integer aliquam ante urna, at faucibus leo dignissim at. In dignissim pharetra tortor, at lacinia neque commodo ac. Donec vehicula, lacus vel vulputate dapibus, sapien odio convallis lacus, nec iaculis nisl dui et velit. In eu elementum risus. Praesent a odio et risus posuere ultricies. Ut efficitur erat sit amet turpis fermentum, eget molestie metus tempor. Fusce nec metus in turpis gravida porttitor. Vivamus ultricies nec magna sed rutrum. Sed eu vehicula ex. Vestibulum ut pulvinar risus.

Fusce nec tempor felis. Pellentesque ac nisl a augue dictum placerat sed at lorem. Donec ac lectus consequat, facilisis felis a, volutpat nunc. Mauris non posuere mi. Aliquam dignissim turpis sit amet elementum efficitur. Pellentesque congue, leo eget accumsan mollis, ligula neque accumsan urna, ut blandit sem mi condimentum sapien. Nam rhoncus ultricies blandit. Phasellus vitae tellus non quam finibus fermentum. Ut sed volutpat libero. Maecenas pharetra quam nec est rutrum, eget volutpat ante maximus. Curabitur convallis dolor pretium erat scelerisque convallis. Donec dictum justo et facilisis euismod. Cras eget tempor sem, vel rutrum enim.

Suspendisse ut elit neque. Quisque fringilla mi nec purus viverra pharetra. Sed vitae lacus at erat fringilla luctus. Sed mauris lacus, sodales eu molestie vitae, feugiat vitae ex. Nam ante dolor, malesuada sit amet tempus ac, ornare a urna. Donec ut nibh tortor. Nullam bibendum ex at lectus molestie, vel convallis risus egestas.

Ut congue risus ut diam tempus facilisis. Duis ultricies, arcu sit amet convallis varius, magna augue fringilla sapien, id convallis sapien mi scelerisque massa. Aliquam dignissim ultricies est vitae consectetur. Etiam vel ex ac nunc dapibus fermentum. Sed commodo dapibus dolor vitae condimentum. Morbi sollicitudin tincidunt mi, ac consectetur dolor. Duis ipsum eros, vulputate mollis fermentum at, volutpat sed augue. Sed at lacinia tortor. In eget enim ex. Aenean et odio eleifend, pharetra massa in, varius odio. Suspendisse auctor purus risus, vitae laoreet elit varius sollicitudin. In suscipit scelerisque augue, eget vehicula risus accumsan sed.








Cancel Submit