{{> widgets/breadcrumb/breadcrumb}}

<div class="card mb-4"> 
	<div class="card-content"> 
		<div class="card-header justify-content-between d-flex"> 
			<h3 class="card-title"> {{ translation.raisedButton }} </h3> 
		</div>
		<div class="card-data"> 
			<a class="waves-effect waves-light btn mb-2">button</a>
			<a class="waves-effect waves-light btn mb-2"><i class="material-icons left">cloud</i>button</a>
			<a class="waves-effect waves-light btn mb-2"><i class="material-icons right">cloud</i>button</a>
		</div>
	</div>
</div>

<div class="card mb-4"> 
	<div class="card-content"> 
		<div class="card-header justify-content-between d-flex"> 
			<h3 class="card-title"> {{ translation.floating }} </h3> 
		</div>
		<div class="card-data">
			<div>
				<a class="btn-floating btn-large waves-effect waves-light red mb-2"><i class="material-icons">add</i></a>
			</div>
		</div>
	</div>
</div>

<div class="card mb-4"> 
	<div class="card-content"> 
		<div class="card-header justify-content-between d-flex"> 
			<h3 class="card-title"> {{ translation.flatButton }} </h3> 
		</div>
		<div class="card-data">
			<div>
				<a class="waves-effect waves-teal btn-flat mb-2">Button</a>
			</div>
		</div>
	</div>
</div>

<div class="card mb-4"> 
	<div class="card-content"> 
		<div class="card-header justify-content-between d-flex"> 
			<h3 class="card-title"> {{translation.submitButton}} </h3> 
		</div>
		<div class="card-data">
			<button class="btn waves-effect waves-light" type="submit" name="action">Submit
    			<i class="material-icons right">send</i>
  			</button>
		</div>
	</div>
</div>

<div class="card mb-4"> 
	<div class="card-content"> 
		<div class="card-header justify-content-between d-flex"> 
			<h3 class="card-title"> {{ translation.largeButton }} </h3> 
		</div>
		<div class="card-data">
			<div>
				<a class="waves-effect waves-light btn-large mb-2">Button</a>
				<a class="waves-effect waves-light btn-large mb-2"><i class="material-icons left">cloud</i>button</a>
				<a class="waves-effect waves-light btn-large mb-2"><i class="material-icons right">cloud</i>button</a>
			</div>
		</div>
	</div>
</div>

<div class="card mb-4"> 
	<div class="card-content"> 
		<div class="card-header justify-content-between d-flex"> 
			<h3 class="card-title"> {{ translation.smallButton }} </h3> 
		</div>
		<div class="card-data">
			<div>
				<a class="waves-effect waves-light btn-small mb-2">Button</a>
				<a class="waves-effect waves-light btn-small mb-2"><i class="material-icons left">cloud</i>button</a>
				<a class="waves-effect waves-light btn-small mb-2"><i class="material-icons right">cloud</i>button</a>
			</div>
		</div>
	</div>
</div>

<div class="card mb-4"> 
	<div class="card-content"> 
		<div class="card-header justify-content-between d-flex"> 
			<h3 class="card-title"> {{ translation.disabled }} </h3> 
		</div>
		<div class="card-data">
			<div>
				<a class="btn-large disabled mb-2">Button</a>
				<a class="btn disabled mb-2">Button</a>
				<a class="btn-flat disabled mb-2">Button</a>
				<a class="btn-floating disabled mb-2"><i class="material-icons">add</i></a>     
			</div> 
		</div>
	</div>
</div>