NoticeUI - MadeByAmp

NoticeUI is a clean and stylish way to display important notifications to your users.

To get started with NoticeUI add the noticeui.css stylesheet to your document:

<link rel="stylesheet" href="noticeui.css" type="text/css" media="screen" title="no title" charset="utf-8" />

Then add the images folder contained in this download to your project and make sure all the image paths in the noticeui.css file are correct.

View full demo

---

Simple Notice

To change the content of the notice, modify the contents of the paragraph tag below.

To change the notice type, use one of the four predefined notice types: .noticeui-success, .noticeui-warn, .noticeui-error, .noticeui-info

<div class="noticeui noticeui-success">
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut 
	labore et dolore magna aliqua. </p>
		
	<span></span>
</div>	

Notice with Heading

To change the content of the notice, modify the contents of the paragraph tag below.

To change the heading of the notice, modify the text in the H5 tag below.

To change the notice type, use one of the four predefined notice types: .noticeui-success, .noticeui-warn, .noticeui-error, .noticeui-info

<div class="noticeui noticeui-warn">
	<h5>Warning!</h5>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut 
	labore et dolore magna aliqua. </p>
	
	<span></span>
</div>

Notice with Heading and Unordered List

To change the content of the notice, modify the contents of the paragraph tag below.

To change the heading of the notice, modify the text in the H5 tag below.

To change the unordered list in the notice, modify the list items below adding or removing items as necessary.

To change the notice type, use one of the four predefined notice types: .noticeui-success, .noticeui-warn, .noticeui-error, .noticeui-info

<div class="noticeui noticeui-error">
	<h5>Error!</h5>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut 
	labore et dolore magna aliqua. </p>
	<ul>
		<li>Vivamus mattis nibh sed purus ullamcorper mollis.</li>
		<li>Phasellus egestas nulla lobortis est eleifend dapibus.</li>
		<li>Morbi at nisi blandit eros rhoncus gravida et quis leo.</li>
	</ul>
	<span></span>
</div>