marble
Version:
WeDeploy's style guide and UI components
67 lines (60 loc) • 1.85 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo: Radio</title>
<link rel="stylesheet" href="../build/marble.css">
<link rel="stylesheet" href="../build/fonts/galano/galano.css">
<link rel="stylesheet" href="../build/fonts/icon-12/icon-12.css">
<link rel="stylesheet" href="../build/fonts/icon-16/icon-16.css">
</head>
<body>
<div class="container-hybrid">
<h1>Radio Groups with <code>ul</code></h1>
<ul class="radio-group">
<li>
<input type="radio" id="opt-1-1" name="pool-1" value="opt-1-1">
<label for="opt-1-1">Option 1</label>
</li>
<li>
<input type="radio" id="opt-1-2" name="pool-1" value="opt-1-2">
<label for="opt-1-2">Option 2</label>
</li>
<li>
<input type="radio" id="opt-1-3" name="pool-1" value="opt-1-3">
<label for="opt-1-3">Option 3</label>
</li>
</ul>
<h1>Radio Groups with <code>div</code></h1>
<div class="radio-group">
<div>
<input type="radio" id="opt-2-1" name="pool-2" value="opt-2-1">
<label for="opt-2-1">Option 1</label>
</div>
<div>
<input type="radio" id="opt-2-2" name="pool-2" value="opt-2-2">
<label for="opt-2-2">Option 2</label>
</div>
<div>
<input type="radio" id="opt-2-3" name="pool-2" value="opt-2-3">
<label for="opt-2-3">Option 3</label>
</div>
</div>
<h1>Radio Groups Inline with <code>div</code></h1>
<div class="radio-group radio-group-inline">
<div>
<input type="radio" id="opt-3-1" name="pool-3" value="opt-3-1">
<label for="opt-3-1">Option 1</label>
</div>
<div>
<input type="radio" id="opt-3-2" name="pool-3" value="opt-3-2">
<label for="opt-3-2">Option 2</label>
</div>
<div>
<input type="radio" id="opt-3-3" name="pool-3" value="opt-3-3">
<label for="opt-3-3">Option 3</label>
</div>
</div>
</div>
</body>
</html>