marble
Version:
WeDeploy's style guide and UI components
61 lines (52 loc) • 2.05 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo: Forms</title>
<link rel="stylesheet" href="../build/marble.css">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Lato:700,400,300|Open+Sans:700,400,300">
<style>
body {
margin: 24px auto;
width: 480px;
}
</style>
</head>
<body>
<form>
<div class="form-group">
<label for="input-regular">Label</label>
<input id="input-regular" class="form-control" type="text" placeholder="Write something here...">
<p class="help-block">A block of auxiliar text</p>
</div>
<div class="form-group">
<label for="input-disabled">Input disabled</label>
<input id="input-disabled" class="form-control" type="text" placeholder="Write something here..." disabled>
<p class="help-block"></p>
</div>
<div class="form-group has-success">
<label for="input-success">Input with success</label>
<input id="input-success" class="form-control" type="text">
<p class="help-block">A block of auxiliar text</p>
</div>
<div class="form-group has-warning">
<label for="input-warning">Input with warning</label>
<input id="input-warning" class="form-control" type="text">
<p class="help-block">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation</p>
</div>
<div class="form-group has-error">
<label for="input-error">Input with error</label>
<input id="input-error" class="form-control" type="text">
<p class="help-block">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<h1>Borderless input</h1>
<div class="form-group">
<input type="text" class="form-control-borderless" placeholder="/">
</div>
<h1>Borderless textarea</h1>
<div class="form-group">
<textarea class="form-control-borderless" placeholder="add a description..."></textarea>
</div>
</form>
</body>
</html>