Pattern Library (ver. 2)

Card set menu

Card set menu

The mobile-first approach to condense the card links on the small device and gradually add more details when the screen becomes bigger. Resize the browser to see the transition.

Lorem ipsum dolor sit amet


Lorem ipsum


Lorem ipsum dolor sit amet

Call to action text

Code


<!--
 Add a key event handler that listens for the 'Space' key in order to be consistent with native buttons. 
-->
<script>
$(function(){
    $('.toggle-btn').keypress(function(e) {
        e.preventDefault();
    });
});
</script>

<!--The 'toggle-container' div will only shows when screen > 768px-->
<div class="subtitle-block red-underline cui d-none d-md-block">
	<h2>{{ Title }}</h2>
	<hr>
</div>

<div class="cui toggle-container">
	<div class="content-body">
		<div class="row-equal-height-cards ">
			<div class="col-md-6">
				{{ Card }}	
			</div>
			<div class="col-md-6">
				{{ Card }}		
			</div>
			<div class="col-md-6">
				{{ Card }}
			</div>
		</div>
	</div>
	<div class="content-media background-image {{ bg-pos-x-left | bg-pos-x-center | bg-pos-x-right }} {{ bg-pos-y-top | bg-pos-y-center | bg-pos-y-bottom }}" style="background-image: url( '{{ Image URL (e.g. image.jpg) }}' );">
	</div>
</div>

<!--The toggle button will only shows when screen < 768px-->
<a href="#" role="button" tabindex="0" data-toggle="modal" class="cui card toggle-btn mb-md animate__animated animate__fadeInUp"  data-target="{{ ID }}">
	<div class="card-body">
		<div class="subtitle-block red-underline cui pt-0 pb-0 text-left">
			<h2>{{ Title }}</h2>
			<hr>
		</div>
	</div>	
	<div class="card-media">
		<div class="background-image ratio-16x9 {{ bg-pos-x-left | bg-pos-x-center | bg-pos-x-right }} {{ bg-pos-y-top | bg-pos-y-center | bg-pos-y-bottom }}" style="background-image: url( '{{ Image URL (e.g. image.jpg) }}' );"></div>
	</div>		
	<div class="card-body">
		<p class="card-context-title text-left">{{ Content }}</p>
	</div>
</a>
<!--The toggle modal will display the content that shows on the desktop cards-->
<div id="{{ ID }}" data-component="Modal" class="cui modal toggle-modal" tabindex="-1" role="dialog" aria-labelledby="toggle-modal" aria-hidden="true">
	<div class="modal-dialog modal-fs animate__animated animate__fadeInDown" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="btn-modal-close cui btn-md primary-text" data-dismiss="modal">Close</button>
			</div>

			<div class="background-image {{ bg-pos-x-left | bg-pos-x-center | bg-pos-x-right }} {{ bg-pos-y-top | bg-pos-y-center | bg-pos-y-bottom }} " style="background-image: url( '{{ Image URL (e.g. image.jpg) }}' );">
			</div>

			<div class="modal-body">
					<div class="col-12 subtitle-block red-underline cui">
						<h2>{{ Title }}</h2>
						<hr>
					</div>
					<nav aria-labelledby="main-menu-list" class="toggle-container-menu-list">
						<ul>
							<li>
								<a href="{{ URL }}">
									<span class="{{ Icon class }}" aria-hidden="true"></span>
									{{ Title }}
								</a>
							</li>
							<li>
								<a href="{{ URL }}">
									<span class="{{ Icon class }}" aria-hidden="true"></span>
									{{ Title }}
								</a>
							</li>
						</ul>
					</nav>
					<a class="cui btn-sm utility-btn" href="{{ URL }}">{{ Call to action }}</a>
			</div>
		</div>
	</div>
</div>