<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;
}
View Compiled
This Pen doesn't use any external JavaScript resources.