sidebar

Boxes and Alerts

Text Boxes

Default Text Box

Nunc et urna ullamcorper tortor eleifend pretium sit amet vel dui. Integer blandit ipsum in iaculis. Nam ultricies lectus.

Text Box Theme A (centered)

Nunc et urna ullamcorper tortor eleifend pretium sit amet vel dui. Integer blandit ipsum in iaculis. Nam ultricies lectus.

Text Box Theme B (align right)

Nunc et urna ullamcorper tortor eleifend pretium sit amet vel dui. Integer blandit ipsum in iaculis. Nam ultricies lectus.

Show source

<div data-role="none" class="nightly-text-box">
    <h3 class="nightly-text-box-title">Default Text Box</h3>
    <p>Nunc et urna ullamcorper tortor eleifend pretium sit amet vel dui. Integer blandit ipsum in iaculis. Nam ultricies lectus.</p> 
</div>

<div data-role="none" class="nightly-text-box nightly-text-box-a align-center">
    <h3 class="nightly-text-box-title">Text Box Theme A (centered)</h3>
    <p>Nunc et urna ullamcorper tortor eleifend pretium sit amet vel dui. Integer blandit ipsum in iaculis. Nam ultricies lectus.</p> 
</div>

Progress bars

Default 25%

Theme A 50%

Theme B 75%

Show source

<progress value='25' max='100'></progress>
<progress data-theme="a" value='50' max='100'></progress>
<progress data-theme="b" value='75' max='100'></progress>

Alert boxes

Dis a Warning Message

This is a notice

Dis an error message

Yay! This is success!

Show source

<div class='nightly-alert nightly-alert-warning'>
	<i class='fa fa-2x fa-warning fa-fw'></i>
	<p>Dis a Warning Message</p>
</div>
<div class='nightly-alert nightly-alert-info'>
	<i class='fa fa-2x fa-lightbulb-o fa-fw'></i>
	<p>This is a notice</p>
</div>
<div class='nightly-alert nightly-alert-error'>
	<i class='fa fa-2x fa-exclamation fa-fw'></i>
	<p>Dis an error message</p>
</div>
<div class='nightly-alert nightly-alert-success'>
    <class='fa fa-2x fa-check fa-fw'></i>
    <p>Yay! This is success!</p>
</div>

NIGHTLY 2014. All rights reserved.