<h1><span>Petal</span></h1>
<div class="wrap panel p-15">
	<div class="row collapse-gutter mb-20">
		<div class="col-4">
			<div class="btn-group">
				<button class="btn red btn-stretch">Button</button>
			</div>
			<div class="btn-group">
				<button class="btn green btn-stretch">Button</button>
			</div>
			<div class="btn-group">
				<button class="btn blue btn-stretch">Button</button>
			</div>
		</div>
		<div class="col-4">
			<div class="btn-group">
				<button class="btn red hollow btn-stretch">Button</button>
			</div>
			<div class="btn-group">
				<button class="btn green hollow btn-stretch">Button</button>
			</div>
			<div class="btn-group">
				<button class="btn blue hollow btn-stretch">Button</button>
			</div>
		</div>
		<div class="col-4 colspan-2">
			<div class="form-group">
				<input type="text" class="input" placeholder="One" />
				<input type="text" class="input" placeholder="Two" />
				<input type="text" class="input" placeholder="Three" />
			</div>
		</div>
	</div>
	<div class="row collapse-gutter mb-20">
		<div class="col-4 colspan-2">
			<div class="form-group validation validation-icons valid">
					<div class="input-group">
							<input class="input input-stretch" type="text" value="Valid" />
					</div>
			</div>

			<div class="form-group validation validation-icons warning">
					<div class="input-group">
							<input class="input input-stretch" type="text" value="Warning" />
					</div>
			</div>

			<div class="form-group validation validation-icons error">
					<div class="input-group">
							<input class="input input-stretch" type="text" value="Invalid" />
					</div>
			</div>
		</div>
		<div class="col-4">
			<div class="form-group">
				<input class="checkbox" type="checkbox" id="demoCheck1" checked>
				<label for="demoCheck1">Checkbox</label>
				<input class="checkbox" type="checkbox" id="demoCheck2" >
				<label for="demoCheck2">Checkbox</label>
				<input class="checkbox" type="checkbox" id="demoCheck3" disabled>
				<label for="demoCheck3">Checkbox</label>
				<input class="checkbox" type="checkbox" id="demoCheck4" checked disabled>
				<label for="demoCheck4">Checkbox</label>
			</div>
			<div class="form-group">
					<span class="chk-switch-label">No</span>
					<div class="chk-switch">
							<input type="checkbox" id="demoSwitch1">
							<label for="demoSwitch1"><span></span></label>
					</div>
					<span class="chk-switch-label">Yes</span>
			</div>
		</div>
		<div class="col-4">
			<div class="form-group">
				<input class="radiobox" type="radio" name="demoRadio" id="demoRadio1" checked>
				<label for="demoRadio1">Radio</label>
				<input class="radiobox" type="radio" name="demoRadio" id="demoRadio2">
				<label for="demoRadio2">Radio</label>
				<input class="radiobox" type="radio" name="demoRadio2" id="demoRadio3" checked disabled>
				<label for="demoRadio3">Radio</label>
				<input class="radiobox" type="radio" name="demoRadio2" id="demoRadio4" disabled>
				<label for="demoRadio4">Radio</label>
			</div>
			<div class="form-group">
					<span class="chk-switch-label">Off</span>
					<div class="chk-switch onoff-type led">
							<input type="checkbox" id="demoSwitch2" checked>
							<label for="demoSwitch2"><span></span></label>
					</div>
					<span class="chk-switch-label">On</span>
			</div>
		</div>
	</div>
	<div class="row petalicon-showcase">
		<div class="col-1">
			<i class="petalicon petalicon-new x2"></i>
			<i class="petalicon petalicon-device-laptop x2"></i>
			<i class="petalicon petalicon-device-mobile x2"></i>
			<i class="petalicon petalicon-globe x2"></i>
			<i class="petalicon petalicon-cloud-check x2"></i>
			<i class="petalicon petalicon-config x2"></i>
			<i class="petalicon petalicon-dashboard x2"></i>
			<i class="petalicon petalicon-photo x2"></i>
			<i class="petalicon petalicon-video x2"></i>
			<i class="petalicon petalicon-users x2"></i>
			<i class="petalicon petalicon-translate x2"></i>
			<i class="petalicon petalicon-volume-mute x2"></i>
			<i class="petalicon petalicon-collection x2"></i>
			<i class="petalicon petalicon-car x2"></i>
			<i class="petalicon petalicon-camera x2"></i>
			<i class="petalicon petalicon-flash x2"></i>
			<i class="petalicon petalicon-customer-support x2"></i>
			<i class="petalicon petalicon-home x2"></i>
			<i class="petalicon petalicon-music x2"></i>
			<i class="petalicon petalicon-star x2"></i>
			<i class="petalicon petalicon-heart x2"></i>
			<i class="petalicon petalicon-link-round x2"></i>
			<i class="petalicon petalicon-comments x2"></i>
			<i class="petalicon petalicon-palette x2"></i>
			<i class="petalicon petalicon-eye-closed x2"></i>
			<i class="petalicon petalicon-statistics-alt x2"></i>
			<i class="petalicon petalicon-mail x2"></i>
			<i class="petalicon petalicon-check-round x2"></i>
		</div>
	</div>
</div>

<p class="mt-15"><a href="https://shakrmedia.github.io/petal/" target="_blank">Get Petal <i class="petalicon petalicon-triangle-right"></i></a></p>

body {
	background-color: #eee;
	padding: 15px;
}
h1 {
	text-align: center;
	font-size: 2rem;
	
	&:before {
		content: "";
		display: inline-block;
		width: 32px;
		height: 32px;
		margin-right: 7px;
		background-image: url('https://shakrmedia.github.io/petal/assets/petal-logo.svg');
		background-size: 32px 32px;
		background-repeat: no-repeat;
		background-position: 0 0;
		vertical-align: middle;
	}
	
	span {
		display: inline-block;
		vertical-align: middle;
	}
}
.wrap {
	max-width: 650px;
	margin: 0 auto;
}
.btn-stretch {
	width: 100%;
}
.input-stretch {
	width: 100%;
}
.petalicon-showcase {
	color: #555;
	text-align: center;
	letter-spacing: 3px
}

p {
	text-align: center;
}