{{> widgets/breadcrumb/breadcrumb}}

<div class="row grid-wrap mb-0">
	<div class="col s12 m6 mb-1">
		<div class="card w-100"> 
			<div class="card-content"> 
				<div class="card-header justify-content-between d-flex"> 
					<h3 class="card-title"> {{ translation.basicCard }} </h3> 
				</div>
				<div class="card-data"> 
		      	<div class="card blue-grey darken-1">
		        		<div class="card-content white-text">
		          		<span class="card-title white-text">Card Title</span>
		          		<p>I am a very simple card.</p>
		        		</div>
	        			<div class="card-action">
	          			<a href="#">This is a link</a>
	          			<a href="#">This is a link</a>
	        			</div>
		      	</div>
				</div>
			</div>
		</div>
	</div>
	<div class="col s12 m6 mb-1">
		<div class="card w-100"> 
			<div class="card-content"> 
				<div class="card-header justify-content-between d-flex"> 
					<h3 class="card-title"> {{ translation.horizontalcard }}  </h3> 
				</div>
				<div class="card-data"> 
				  	<div class="card horizontal">
						<div class="card-image">
						  <img src="/images/sidebar-sm-3.jpg" alt="sidebar">
						</div>
						<div class="card-stacked">
						  	<div class="card-content">
						   	<p>I am a very simple card.  I am good at containing small bits of information.
				          		I am convenient because I require little markup to use effectively.</p>
						  	</div>
						  	<div class="card-action">
						    	<a href="#">This is a link</a>
						  	</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<div class="row grid-wrap mb-0">
	<div class="col s12 m6 mb-1">
		<div class="card w-100"> 
			<div class="card-content"> 
				<div class="card-header justify-content-between d-flex"> 
					<h3 class="card-title"> {{translation.fabsInCard}} </h3> 
				</div>
				<div class="card-data"> 
				  	<div class="row">
						<div class="col s12 m12">
							<div class="card">
								<div class="card-image">
									<img src="/images/blog-2.jpg">
									<span class="card-title">Card Title</span>
									<a class="btn-floating halfway-fab waves-effect waves-light red"><i class="material-icons">add</i></a>
								</div>
								<div class="card-content">
								 	<p>I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively. I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively. I am a very simple card. I am good at containing small bits of information. I am convenient </p>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

   	<div class="col s12 m6 mb-1">
		<div class="card w-100"> 
			<div class="card-content"> 
				<div class="card-header justify-content-between d-flex"> 
					<h3 class="card-title"> {{ translation.imageCard }} </h3> 
				</div>
				<div class="card-data"> 
				  	<div class="row">
						<div class="col s12 s12">
							<div class="card">
								<div class="card-image">
								 	<img src="/images/blog-1.jpg">
								 	<span class="card-title">Card Title</span>
								</div>
								<div class="card-content">
								 	<p>I am a very simple card. I am good at containing small bits of information.
								 	I am convenient because I require little markup to use effectively.</p>
								</div>
								<div class="card-action">
								 	<a href="#">This is a link</a>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<div class="row grid-wrap mb-4">
	<div class="col s12 m6 mb-1">
		<div class="card w-100 align-self-start"> 
			<div class="card-content"> 
				<div class="card-header justify-content-between d-flex"> 
					<h3 class="card-title"> {{ translation.cardReveal }} </h3> 
				</div>
				<div class="card-data"> 
				  	<div class="card">
					   <div class="card-image waves-effect waves-block waves-light">
					      <img class="activator" src="/images/blog-3.jpg" alt="activator">
					   </div>
					   <div class="card-content">
					      <span class="card-title activator grey-text text-darken-4">Card Title<i class="material-icons right">more_vert</i></span>
					      <p><a href="#">This is a link</a></p>
					   </div>
					   <div class="card-reveal">
					      <span class="card-title grey-text text-darken-4">Card Title<i class="material-icons right">close</i></span>
					      <p>Here is some more information about this product that is only revealed once clicked on.</p>
					   </div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="col s12 m6 mb-1 flex-direction-column justify-content-between">
		<div class="card mb-4 w-100"> 
			<div class="card-content"> 
				<div class="card-header justify-content-between d-flex"> 
					<h3 class="card-title"> {{ translation.tabsInCard }} </h3> 
				</div>
				<div class="card-data"> 
				  	<div class="card">
				    	<div class="card-content">
				      	<p>I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.</p>
				    	</div>
				    	<div class="card-tabs">
				      	<ul class="tabs tabs-fixed-width">
				        		<li class="tab"><a href="#test4">Test 1</a></li>
				        		<li class="tab"><a class="active" href="#test5">Test 2</a></li>
				        		<li class="tab"><a href="#test6">Test 3</a></li>
				      	</ul>
				    	</div>
				    	<div class="card-content grey lighten-4">
				      	<div id="test4">Test 1</div>
				      	<div id="test5">Test 2</div>
				      	<div id="test6">Test 3</div>
				    	</div>
				  	</div>
				</div>
			</div>
		</div>

		<div class="card w-100"> 
			<div class="card-content"> 
				<div class="card-header justify-content-between d-flex"> 
					<h3 class="card-title"> {{ translation.cardPanal }} </h3> 
				</div>
				<div class="card-data"> 
				  	<div class="row">
				    	<div class="col s12 m12">
				      	<div class="card-panel teal">
				        		<span class="white-text">I am a very simple card. I am good at containing small bits of information.
				        			I am convenient because I require little markup to use effectively. I am similar to what is called a panel in other frameworks.
				        		</span>
				      	</div>
				    	</div>
				  	</div>
				</div>
			</div>
		</div>
	
	</div>
</div>