`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="note-icon"
	width="25"
	height="25"
	loading="lazy"/>
	<p class="note-title">Note</p>
	<div class="note-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 note-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 note-title into it for rendering purpose.
Line 9 - Use a div wrapper <div> to contain your note contents. You must apply note-content into if for rendering purpose.

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
 9
10
11
<aside class="note">
	<amp-img alt="additional note"
	src="https://bissetii.zoralab.com/en/img/css/info-icon.svg"
	class="note-icon"
	width="25"
	height="25"></amp-img>
	<p class="note-title">Note</p>
	<div class="note-content">
		<!-- content to display -->
	</div>
</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">
<img alt="ADDITIONAL NOTE"
	src="https://bissetii.zoralab.com/img/icons/info-icon.svg"
	class="note-icon"
	width="25"
	height="25"/>
	<p class="note-title">Important Note</p>
	<div class="note-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">
<img alt="NOTICE"
	src="https://bissetii.zoralab.com/img/icons/success-icon.svg"
	class="note-icon"
	width="25"
	height="25"/>
	<p class="note-title">Data Submitted Safely</p>
	<div class="note-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">
<img alt="WARNING"
	src="https://bissetii.zoralab.com/img/icons/warning-icon.svg"
	class="note-icon"
	width="25"
	height="25"/>
	<p class="note-title">Attention Required</p>
	<div class="note-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">
<img alt="ERROR"
	src="https://bissetii.zoralab.com/img/icons/error-icon.svg"
	class="note-icon"
	width="25"
	height="25"/>
	<p class="note-title">Network Failure</p>
	<div class="note-content">
		
<p>This is the content. It is aligned with justified styling. You may write
anything inside here as HTML.</p>

	</div>
</aside>