<div class="container">
	<div class="row">
		<div class="col-md-8 offset-md-2">
			{{pattern name='gondel'}}
			{{pattern name='heading' titleTag='h1'}}
			{{pattern name='example'}}
			{{#pattern name='box'}}
				<h3>{{pattern name='icon' icon='nitro'}}&nbsp;Nitro example patterns</h3>
				{{pattern name='button'}}
				{{pattern name='checkbox'}}
			{{/pattern}}
			{{pattern name='datepicker'}}
			{{pattern name='box' modifier='invert'}}
			<div class="row align-items-center">
				<div class="col-sm-4">
					{{pattern name='cta'}}
				</div>
				<div class="col-sm-4">
					{{pattern name='lottie' jsonPath='/api/lottie/shipment.json'}}
				</div>
				<div class="col-sm-4">
					{{pattern name='lottie' jsonPath='/api/lottie/bouncing.json'}}
				</div>
			</div>
			{{#pattern name='box'}}
				{{pattern name='loader'}}
			{{/pattern}}
			<div style="margin: 2rem 0;">
				{{pattern name='quote'}}
			</div>
			<div style="outline: 0.5vw solid #b2b2b2;">
				{{pattern name='image'}}
			</div>
			{{pattern name='list' data='mix'}}
		</div>
	</div>
</div>
<div class="container-fluid">
	<div class="row">
		{{pattern name='stage'}}
	</div>
</div>
