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:
|
|
- Line 1 - Create an
<aside>
withnote
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 addnote-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 applynote-title
into it for rendering purpose. - Line 9 - Use a div wrapper
<div>
to contain your note contents. You must applynote-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:
|
|
- 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>