Nightly

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>