`Note` Component

Notes component is the inline content snippet that is indirectly related to the main content. This is usually used for highlighting important reminders, warning, and to convey and error. Bissetii supports a number of notes through the use of class tag.

This component was inspired from an idea created by Swarup Kumar Kuila. Bissetii adopted and modified the idea heavily to keep quite a large number of aspects to simple and nice to use.

This component is available starting from v1.12.1.

Sass Styling Parts

The Sass styling script responsible for styling the notes is located in:

assets/css/bissetii/modules/core/_Note.scss

Javascript Parts

This module does not depend on any Javascript.

HTML Parts

Bissetii decided to use <aside> tag to denotes an extended note mainly because the note is indirectly related to the main content. Most of the time, it serves as additional notes, warning, error messages, and tips that are always optional to the main content.

Depending on output types, the code structure varies as accordingly.

Vanilla HTML

For vanilla HTML, Bissetii supports the following code structure:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<aside class="note">
	<img alt="additional note"
	src="https://bissetii.zoralab.com/en/img/css/info-icon.svg"
	class="icon"
	width="25"
	height="25"
	loading="lazy"/>
	<p class="title">Note</p>
	<div class="content">
		<!-- content to display -->
	</div>
</aside>

Line 1 - Create an <aside> with note class tag.
Line 2-7 - Optionally, create an image icon for displaying the note’s icon on your own (recommended dimension is 25x25px). You MUST remember to add icon class tag into it.
Line 8 - Use a paragraph <p> tag to create the note title. You MUST NOT use header tags to avoid confusing content outlines. You must apply title class tag into it for rendering purposes.
Line 9 - Use a div wrapper <div> to contain your note contents. You must apply content class tag into if for rendering purposes.

AMP HTML

For AMP HTML, Bissetii supports the same code structure as Vanilla HTML with the exception to AMP-specific element. Example:

1
2
3
4
5
6
7
8
<aside class="note">
	<amp-img alt="additional note"
	src="https://bissetii.zoralab.com/en/img/css/info-icon.svg"
	class="icon"
	width="25"
	height="25"></amp-img>
	...
</aside>

Line 2-8 - Use <amp-img> instead of <img> tag.

Available Rendering Styles

Bissetii supports a number of available rendering styles depending on needs and use cases.

Default / Info Style

By default, Bissetii renders the note as an info style like the following:

<aside class="note">
	<svg class="icon" version="1.1" viewBox="0.0 0.0 4096.0 4096.0" fill="none" stroke="none" stroke-linecap="square" stroke-miterlimit="10" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"><clipPath id="p.0"><path d="m0 0l4096.0 0l0 4096.0l-4096.0 0l0 -4096.0z" clip-rule="nonzero"/></clipPath><g clip-path="url(#p.0)"><path fill="#000000" fill-opacity="0.0" d="m0 0l4096.0 0l0 4096.0l-4096.0 0z" fill-rule="evenodd"/><path fill="#0000ff" d="m653.9344 2048.0l0 0c0 -774.10315 627.5346 -1401.6378 1401.638 -1401.6378l0 0c371.7373 0 728.2495 147.67218 991.1074 410.53027c262.85815 262.85803 410.53027 619.3701 410.53027 991.10754l0 0c0 774.1033 -627.53467 1401.6377 -1401.6377 1401.6377l0 0c-774.1033 0 -1401.638 -627.5344 -1401.638 -1401.6377z" fill-rule="evenodd"/><path stroke="#9fc5e8" stroke-width="24.0" stroke-linejoin="round" stroke-linecap="butt" d="m653.9344 2048.0l0 0c0 -774.10315 627.5346 -1401.6378 1401.638 -1401.6378l0 0c371.7373 0 728.2495 147.67218 991.1074 410.53027c262.85815 262.85803 410.53027 619.3701 410.53027 991.10754l0 0c0 774.1033 -627.53467 1401.6377 -1401.6377 1401.6377l0 0c-774.1033 0 -1401.638 -627.5344 -1401.638 -1401.6377z" fill-rule="evenodd"/><path fill="#ffffff" d="m1860.1077 1834.5603l0 0c0 -35.98474 29.171387 -65.15613 65.15613 -65.15613l260.61682 0l0 0c17.280518 0 33.85327 6.864624 46.072266 19.083862c12.219238 12.219116 19.083984 28.79187 19.083984 46.072266l0 1030.79c0 35.984863 -29.17163 65.15625 -65.15625 65.15625l-260.61682 0c-35.98474 0 -65.15613 -29.171387 -65.15613 -65.15625z" fill-rule="evenodd"/><path fill="#ffffff" d="m1860.1077 1360.9423l0 0c0 -107.94336 87.51245 -195.44885 195.4646 -195.44885l0 0c51.840332 0 101.55762 20.591919 138.21436 57.245605c36.656494 36.65381 57.250244 86.36694 57.250244 138.20325l0 0c0 107.94336 -87.512695 195.44885 -195.4646 195.44885l0 0c-107.95215 0 -195.4646 -87.50549 -195.4646 -195.44885z" fill-rule="evenodd"/></g></svg>
	<p class="title">Important Note</p>
	<div class="content">
<p>This is the content. It is aligned with justified styling. You may write
anything inside here as HTML.</p>
</div>
</aside>

Success Style

Additionally, if you set the note class tag alongside with success class tag, Bissetii renders the note as a successful style like the following:

<aside class="note success">
	<svg class="icon" version="1.1" viewBox="0.0 0.0 4096.0 4096.0" fill="none" stroke="none" stroke-linecap="square" stroke-miterlimit="10" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"><clipPath id="g8ac83bc009_0_12.0"><path d="m0 0l4096.0 0l0 4096.0l-4096.0 0l0 -4096.0z" clip-rule="nonzero"/></clipPath><g clip-path="url(#g8ac83bc009_0_12.0)"><path fill="#000000" fill-opacity="0.0" d="m0 0l4096.0 0l0 4096.0l-4096.0 0z" fill-rule="evenodd"/><path fill="#00da00" d="m653.93176 2048.0315l0 0c0 -774.10315 627.53467 -1401.6378 1401.6378 -1401.6378l0 0c371.73755 0 728.2495 147.67218 991.10767 410.53027c262.8579 262.85803 410.53003 619.3701 410.53003 991.10754l0 0c0 774.1033 -627.5344 1401.6377 -1401.6377 1401.6377l0 0c-774.10315 0 -1401.6378 -627.5344 -1401.6378 -1401.6377zm331.34717 0l0 0c0 591.1052 479.18542 1070.2905 1070.2906 1070.2905c591.1052 0 1070.2905 -479.1853 1070.2905 -1070.2905l0 0c0 -591.1052 -479.1853 -1070.2905 -1070.2905 -1070.2905l0 0c-591.1052 0 -1070.2906 479.18536 -1070.2906 1070.2905z" fill-rule="evenodd"/><path stroke="#b6d7a8" stroke-width="24.0" stroke-linejoin="round" stroke-linecap="butt" d="m653.93176 2048.0315l0 0c0 -774.10315 627.53467 -1401.6378 1401.6378 -1401.6378l0 0c371.73755 0 728.2495 147.67218 991.10767 410.53027c262.8579 262.85803 410.53003 619.3701 410.53003 991.10754l0 0c0 774.1033 -627.5344 1401.6377 -1401.6377 1401.6377l0 0c-774.10315 0 -1401.6378 -627.5344 -1401.6378 -1401.6377zm331.34717 0l0 0c0 591.1052 479.18542 1070.2905 1070.2906 1070.2905c591.1052 0 1070.2905 -479.1853 1070.2905 -1070.2905l0 0c0 -591.1052 -479.1853 -1070.2905 -1070.2905 -1070.2905l0 0c-591.1052 0 -1070.2906 479.18536 -1070.2906 1070.2905z" fill-rule="evenodd"/><path fill="#00da00" d="m1832.1036 2707.3542l595.14465 -1318.6456l338.43018 0l-595.14453 1318.6456z" fill-rule="evenodd"/><path fill="#00da00" d="m2118.0066 2707.3464l-385.0913 -565.95264l-402.59375 0l385.0912 565.95264z" fill-rule="evenodd"/></g></svg>
	<p class="title">Data Submitted Safely</p>
	<div class="content">
<p>This is the content. It is aligned with justified styling. You may write
anything inside here as HTML.</p>
</div>
</aside>

Warning Style

On the other hand, if you set the note class tag alongside with warning class tag, Bissetii renders the note as a warning style like the following:

<aside class="note warning">
	<svg class="icon" version="1.1" viewBox="0.0 0.0 4096.0 4096.0" fill="none" stroke="none" stroke-linecap="square" stroke-miterlimit="10" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"><clipPath id="g8ac83bc009_1_36.0"><path d="m0 0l4096.0 0l0 4096.0l-4096.0 0l0 -4096.0z" clip-rule="nonzero"/></clipPath><g clip-path="url(#g8ac83bc009_1_36.0)"><path fill="#000000" fill-opacity="0.0" d="m0 0l4096.0 0l0 4096.0l-4096.0 0z" fill-rule="evenodd"/><path fill="#ffea00" d="m653.9344 3449.6062l1399.8999 -2803.2124l1403.3757 2803.2124z" fill-rule="evenodd"/><path stroke="#ffe599" stroke-width="24.0" stroke-linejoin="round" stroke-linecap="butt" d="m653.9344 3449.6062l1399.8999 -2803.2124l1403.3757 2803.2124z" fill-rule="evenodd"/><path fill="#ffffff" d="m2195.6077 1762.9062l0.0036621094 704.41113l0 0c4.8828125E-4 92.279785 -62.6958 167.0874 -140.03613 167.0874c-77.340454 0 -140.0376 -74.80762 -140.03809 -167.0874l-0.00390625 -704.41113l0 0c-4.8828125E-4 -92.279785 62.695923 -167.08728 140.03638 -167.08728c77.34033 0 140.0376 74.807495 140.03809 167.08728z" fill-rule="evenodd"/><path fill="#ffffff" d="m1915.5249 3001.9712l0 0c0 -77.3374 62.701294 -140.0315 140.04736 -140.0315l0 0c37.142822 0 72.764404 14.753174 99.02832 41.01416c26.263916 26.260986 41.0188 61.878662 41.0188 99.017334l0 0c0 77.33716 -62.70117 140.0315 -140.04712 140.0315l0 0c-77.34607 0 -140.04736 -62.694336 -140.04736 -140.0315z" fill-rule="evenodd"/></g></svg>
	<p class="title">Attention Required</p>
	<div class="content">
<p>This is the content. It is aligned with justified styling. You may write
anything inside here as HTML.</p>
</div>
</aside>

Error Style

Similarly, if you set the note class tag alongside with error class tag, Bissetii renders the note as an error style like the following:

<aside class="note error">
	<svg class="icon" version="1.1" viewBox="0.0 0.0 4096.0 4096.0" fill="none" stroke="none" stroke-linecap="square" stroke-miterlimit="10" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"><clipPath id="g8df0230aa0_0_4.0"><path d="m0 0l4096.0 0l0 4096.0l-4096.0 0l0 -4096.0z" clip-rule="nonzero"/></clipPath><g clip-path="url(#g8df0230aa0_0_4.0)"><path fill="#000000" fill-opacity="0.0" d="m0 0l4096.0 0l0 4096.0l-4096.0 0z" fill-rule="evenodd"/><path fill="#b20000" d="m653.93176 2048.0315l0 0c0 -774.10315 627.53467 -1401.6378 1401.6378 -1401.6378l0 0c371.73755 0 728.2495 147.67218 991.10767 410.53027c262.8579 262.85803 410.53003 619.3701 410.53003 991.10754l0 0c0 774.1033 -627.5344 1401.6377 -1401.6377 1401.6377l0 0c-774.10315 0 -1401.6378 -627.5344 -1401.6378 -1401.6377zm331.34717 0l0 0c0 591.1052 479.18542 1070.2905 1070.2906 1070.2905c591.1052 0 1070.2905 -479.1853 1070.2905 -1070.2905l0 0c0 -591.1052 -479.1853 -1070.2905 -1070.2905 -1070.2905l0 0c-591.1052 0 -1070.2906 479.18536 -1070.2906 1070.2905z" fill-rule="evenodd"/><path stroke="#ea9999" stroke-width="24.0" stroke-linejoin="round" stroke-linecap="butt" d="m653.93176 2048.0315l0 0c0 -774.10315 627.53467 -1401.6378 1401.6378 -1401.6378l0 0c371.73755 0 728.2495 147.67218 991.10767 410.53027c262.8579 262.85803 410.53003 619.3701 410.53003 991.10754l0 0c0 774.1033 -627.5344 1401.6377 -1401.6377 1401.6377l0 0c-774.10315 0 -1401.6378 -627.5344 -1401.6378 -1401.6377zm331.34717 0l0 0c0 591.1052 479.18542 1070.2905 1070.2906 1070.2905c591.1052 0 1070.2905 -479.1853 1070.2905 -1070.2905l0 0c0 -591.1052 -479.1853 -1070.2905 -1070.2905 -1070.2905l0 0c-591.1052 0 -1070.2906 479.18536 -1070.2906 1070.2905z" fill-rule="evenodd"/><path fill="#b20000" d="m2687.7847 2707.3228l-921.89465 -1318.6456l-350.10522 0l921.89465 1318.6456z" fill-rule="evenodd"/><path fill="#b20000" d="m1408.2152 2707.3228l921.89465 -1318.6456l350.10547 0l-921.8948 1318.6456z" fill-rule="evenodd"/></g></svg>
	<p class="title">Network Failure</p>
	<div class="content">
<p>This is the content. It is aligned with justified styling. You may write
anything inside here as HTML.</p>
</div>
</aside>