<button class="cta primary">Button</button>
<button class="cta secondary">Button</button>
<button class="cta primary fill">Button</button>
<button class="cta secondary fill">Button</button>
<button class="cta tertiary fill">Button</button>
<div class="button-container">.....</div>
<div class="button-container center">.....</div>
<div class="button-container right">.....</div>
<button class="cta primary fill large">Button</button>
<div class="highlight warning">Warning</div>
<div class="highlight warning fill">Warning</div>
<div class="highlight notification">Notification</div>
<div class="highlight notification fill">Notification</div>
<div class="highlight secondary">Notification</div>
<div class="highlight secondary fill">Notification</div>
<div class="toggles pills">
<input type="radio" name="group1" id="radio1" value="1" checked/><label for="radio1">Toggle 1</label>
<input type="radio" name="group1" id="radio2" value="2" /><label for="radio2">Toggle 2</label>
</div>
<div class="toggles pills">
<input type="radio" name="group2" id="radio1-2" value="1" checked/><label for="radio1-2">Toggle 1</label>
<input type="radio" name="group2" id="radio2-2" value="2" /><label for="radio2-2"> Toggle 2</label>
<input type="radio" name="group2" id="radio3-2" value="3" /><label for="radio3-2">Toggle Longer</label>
</div>
<div class="form element radio">
<input type="radio" name="group3" id="radio3" value="1" checked/><label for="radio3"><span class="circle inner-element"></span><span class="text">Radio 1</span></label>
<input type="radio" name="group3" id="radio4" value="1" /><label for="radio4"><span class="circle inner-element"></span><span class="text">Radio 2</span></label>
<input type="radio" name="group3" id="radio5" value="1" disabled/><label for="radio5"><span class="circle inner-element"></span><span class="text">Radio Disabled</span></label>
<input class="large" type="radio" name="group3" id="radio6" value="1" /><label for="radio6"><span class="circle inner-element"></span><span class="text">Radio Large</span></label>
</div>
<div class="form element checkbox">
<input type="checkbox" id="check1" value="1" checked/><label for="check1"><span class="square inner-element"><span class="tick"></span></span><span class="text">Checkbox 1</span></label>
<input type="checkbox" id="check2" value="1" /><label for="check2"><span class="square inner-element"><span class="tick"></span></span><span class="text">Checkbox 2</span></label>
<input type="checkbox" id="check3" value="1" disabled/><label for="check3"><span class="square inner-element"><span class="tick"></span></span><span class="text">Checkbox Disabled</span></label>
<input type="checkbox" id="check3" value="1" disabled checked/><label for="check3"><span class="square inner-element"><span class="tick"></span></span><span class="text">Checkbox checked Disabled</span></label>
<input class="large" type="checkbox" id="check4" value="1" /><label for="check4"><span class="square inner-element"><span class="tick"></span></span> <span class="text">Checkbox Large</span></label>
</div>
<div class="form element toggle">
<input type="checkbox" id="toggle1" value="1" checked/><label for="toggle1"><span class="toggle-switch"><span class="switch"></span></span> <span class="text">Toggle On</span></label>
<input type="checkbox" id="toggle2" value="1" /><label for="toggle2"><span class="toggle-switch"><span class="switch"></span></span> <span class="text">Toggle Off</span></label>
<input type="checkbox" id="toggle3" value="1" disabled/><label for="toggle3"><span class="toggle-switch"><span class="switch"></span></span><span class="text">Toggle Disabled</span></label>
<input class="large" type="checkbox" id="toggle4" value="1"/><label for="toggle4"><span class="toggle-switch"><span class="switch"></span></span><span class="text">Toggle Large</span></label>
</div>
<div class="form-group">
<label for="input">Input field:</label>
<input type="text" class="form-control" id="input" placeholder="Place holder text">
</div>
<div class="form-group">
<label for="input">Input error:</label>
<input type="text" class="form-control error" id="input">
<p>A description of the error.</p>
</div>
A description of the error.
<button class="cta primary fill" data-toggle="modal" data-target="#myModal">Launch Modal</button>
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>This is an example modal.</p>
</div>
<div class="modal-footer">
<button class="modal-button cancel" data-dismiss="modal">Cancel</button>
<button class="modal-button apply" data-dismiss="modal">Apply</button>
</div>
</div>
</div>
</div>
<span class="rating star one"><span></span><span></span><span></span><span></span><span></span></span>
<span class="rating star two"><span></span><span></span><span></span><span></span><span></span></span>
<span class="rating star three"><span></span><span></span><span></span><span></span><span></span></span>
<span class="rating star four"><span></span><span></span><span></span><span></span><span></span></span>
<span class="rating star five"><span></span><span></span><span></span><span></span><span></span></span>
<span class="rating t-rating one"><span></span><span></span><span></span><span></span><span></span></span>
<span class="rating t-rating two"><span></span><span></span><span></span><span></span><span></span></span>
<span class="rating t-rating three"><span></span><span></span><span></span><span></span><span></span></span>
<span class="rating t-rating four"><span></span><span></span><span></span><span></span><span></span></span>
<span class="rating t-rating five"><span></span><span></span><span></span><span></span><span></span></span>
<span class="rating t-rating five plus"><span></span><span></span><span></span><span></span><span></span></span>
<a class="text-accordion" data-toggle="collapse" data-target="#accordion"></a>
<div id="accordion" class="collapse">
<p>......</p>
</div>
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 ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse1"><span class="icon"></span>Collapsible panel<span class="chevron"></span></a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body">.....</div>
</div>
</div>
</div>
<a href="JavaScript:Void(0)" data-toggle="tooltip" data-placement="bottom" title="This is an example of a tooltip!">Tooltip Example</a>
<hr class="beige">
<hr>
<div class="col-xs-12 messaging">
<h6 class="headline">Headline here</h6>
<div class="row">
<div class="col-xs-12">
<p class="small">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 ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<a href="#">More Information ></a>
</div>
</div>
</div>
<div class="col-xs-12 messaging warning">
<h6 class="headline">Headline here</h6>
<div class="row">
<div class="col-xs-12">
<p class="small">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 ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<a href="#">More Information ></a>
</div>
</div>
</div>
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 ullamco laboris nisi ut aliquip ex ea commodo consequat.
More Information >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 ullamco laboris nisi ut aliquip ex ea commodo consequat.
More Information >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 ullamco laboris nisi ut aliquip ex ea commodo consequat.
More Information >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 ullamco laboris nisi ut aliquip ex ea commodo consequat.
More Information >