<p>
	Use any number of notifications shortcodes within your Joomla <span class="highlight">articles or modules</span>.<br />
	They can easily be added inside the editor by using <strong>
	<a class="yjsg-link-lightbox" href="images/docs/notifications-lg.jpg">
		[yjsgfa name="fa fa-picture-o"] Notifications shortcode form
	</a>
	</strong> located under text editor or by adding shortcodes directly. Notification can be combined with icons, border types or border radius as well.
</p>
<div class="yjsg-row">
	<div class="yjsg-col-1">
		<div class="yjsg-hr-empty"></div>
		<h2>Notifications colors</h2>
		<h3 class="yjsg-sub-heading">shortcode:</h3>
		[yjsgpre pretty="1" scroll="0"]
		{yjsgnote color="red" close="no" title="Title" border="default" radius="0" icon=""}
		Some text...
		{/yjsgnote}
		[/yjsgpre] </div>
	<div class="yjsg-col-1-2"> [yjsgnote color="red" close="no" title="Notification red" border="default" radius="0" icon=""]
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla, est et ultricies porttitor, augue purus condimentum mi, vel congue nunc est vitae diam. Proin.
		[/yjsgnote] </div>
	<div class="yjsg-col-1-2"> [yjsgnote color="green" close="no" title="Notification green" border="default" radius="0" icon=""]
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla, est et ultricies porttitor, augue purus condimentum mi, vel congue nunc est vitae diam. Proin.
		[/yjsgnote] </div>
	<div class="yjsg-col-1-2"> [yjsgnote color="blue" close="no" title="Notification blue" border="default" radius="0" icon=""]
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla, est et ultricies porttitor, augue purus condimentum mi, vel congue nunc est vitae diam. Proin.
		[/yjsgnote] </div>
	<div class="yjsg-col-1-2"> [yjsgnote color="yellow" close="no" title="Notification yellow" border="default" radius="0" icon=""]
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla, est et ultricies porttitor, augue purus condimentum mi, vel congue nunc est vitae diam. Proin.
		[/yjsgnote] </div>
	<div class="yjsg-col-1-2"> [yjsgnote color="gray" close="no" title="Notification gray" border="default" radius="0" icon=""]
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla, est et ultricies porttitor, augue purus condimentum mi, vel congue nunc est vitae diam. Proin.
		[/yjsgnote] </div>
	<div class="yjsg-col-1-2"> [yjsgnote color="dark" close="no" title="Notification dark" border="default" radius="0" icon=""]
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla, est et ultricies porttitor, augue purus condimentum mi, vel congue nunc est vitae diam. Proin.
		[/yjsgnote] </div>
	<div class="yjsg-col-1-2"> [yjsgnote color="clear" close="no" title="Notification clear" border="default" radius="0" icon=""]
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla, est et ultricies porttitor, augue purus condimentum mi, vel congue nunc est vitae diam. Proin.
		[/yjsgnote] </div>
	<div class="yjsg-col-1">
		<div class="yjsg-hr-empty"></div>
		<h2>Notifications with close button</h2>
		<h3 class="yjsg-sub-heading">shortcode:</h3>
		[yjsgpre pretty="1" scroll="0"]
		{yjsgnote color="red" close="yes" title="Title" border="default" radius="0" icon=""}
		Some text...
		{/yjsgnote}
		[/yjsgpre]	
		[yjsgnote color="red" close="yes" title="Notifications with close button" border="default" radius="0" icon=""]
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla, est et ultricies porttitor, augue purus condimentum mi, vel congue nunc est vitae diam. Proin.
		[/yjsgnote] </div>
	<div class="yjsg-col-1">
		<div class="yjsg-hr-empty"></div>
		<h2>Notifications with icon</h2>
		<h3 class="yjsg-sub-heading">shortcode:</h3>
		[yjsgpre pretty="1" scroll="0"]
		{yjsgnote color="red" close="yes" title="Title" border="default" radius="0" icon="fa fa-heart fa-lg"}
		Some text...
		{/yjsgnote}
		[/yjsgpre]	
		[yjsgnote color="red" close="yes" title="Notifications with icon" border="default" radius="0" icon="fa fa-heart fa-lg"]
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla, est et ultricies porttitor, augue purus condimentum mi, vel congue nunc est vitae diam. Proin.
		[/yjsgnote] </div>
	<div class="yjsg-col-1">
		<div class="yjsg-hr-empty"></div>
		<h2>Notifications with border radius</h2>
		<h3 class="yjsg-sub-heading">shortcode:</h3>
		[yjsgpre pretty="1" scroll="0"]
		{yjsgnote color="blue" close="yes" title="Title" border="default" radius="radiusb5" icon="fa fa-camera fa-lg"}
		Some text...
		{/yjsgnote}
		[/yjsgpre]	
		[yjsgnote color="blue" close="yes" title="Notifications with border radius" border="default" radius="radiusb5" icon="fa fa-camera fa-lg"]
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla, est et ultricies porttitor, augue purus condimentum mi, vel congue nunc est vitae diam. Proin.
		[/yjsgnote] </div>
	<div class="yjsg-col-1">
		<div class="yjsg-hr-empty"></div>
		<h2>Notifications dashed with border radius</h2>
		<h3 class="yjsg-sub-heading">shortcode:</h3>
		[yjsgpre pretty="1" scroll="0"]
		{yjsgnote color="blue" close="yes" title="Title" border="dashedb" radius="radiusb5" icon="fa fa-camera fa-lg"}
		Some text...
		{/yjsgnote}
		[/yjsgpre]	
		[yjsgnote color="blue" close="yes" title="Notifications dashed with border radius" border="dashedb" radius="radiusb5" icon="fa fa-camera fa-lg"]
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla, est et ultricies porttitor, augue purus condimentum mi, vel congue nunc est vitae diam. Proin.
		[/yjsgnote] </div>
	<div class="yjsg-col-1">
		<div class="yjsg-hr-empty"></div>
		<h2>Notifications dotted with border radius</h2>
		<h3 class="yjsg-sub-heading">shortcode:</h3>
		[yjsgpre pretty="1" scroll="0"]
		{yjsgnote color="green" close="yes" title="Title" border="dottedb" radius="radiusb5" icon="fa fa-camera fa-lg"}
		Some text...
		{/yjsgnote}
		[/yjsgpre]	
		[yjsgnote color="green" close="yes" title="Notifications dotted with border radius" border="dottedb" radius="radiusb5" icon="fa fa-camera fa-lg"]
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla, est et ultricies porttitor, augue purus condimentum mi, vel congue nunc est vitae diam. Proin.
		[/yjsgnote] </div>
	<div class="yjsg-col-1">
		<div class="yjsg-hr-empty"></div>
		<h2>Notifications double with border radius</h2>
		<h3 class="yjsg-sub-heading">shortcode:</h3>
		[yjsgpre pretty="1" scroll="0"]
		{yjsgnote color="green" close="yes" title="Title" border="doubleb" radius="radiusb5" icon="fa fa-camera fa-lg"}
		Some text...
		{/yjsgnote}
		[/yjsgpre]	
		[yjsgnote color="yellow" close="yes" title="Notifications double with border radius" border="doubleb" radius="radiusb5" icon="fa fa-camera fa-lg"]
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla, est et ultricies porttitor, augue purus condimentum mi, vel congue nunc est vitae diam. Proin.
		[/yjsgnote] </div>
</div>
