Notes Component

The notes inform the users about a pending task, the states of the system and the actions of the user or for what you believe you can use them, they can contain critical information, require decisions or involve multiple tasks.

With personalization, it adds a bit of emotional weight to the information.



Observations
This section shows how to create an note of each type, using only one color as an example. If you want to see all the colors then go to the previews of the notes.

With any color


Sticky notes
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam ac eleifend lacus, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor.
Sticky notes
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam ac eleifend lacus, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor.
 <article class="e-note primary">
   <div class="note-header">
     Sticky notes
     <a class="e-delete"><i aria-hidden="true">&times;</i></a>
   </div>
   <div class="note-body">
     Lorem ipsum dolor sit amet, consectetur adipiscing elit.
   </div>
 </article>

 <article class="e-note success">
   <div class="note-header">
     Sticky notes
     <a class="e-delete"><i aria-hidden="true">&times;</i></a>
   </div>
   <div class="note-body">
     Lorem ipsum dolor sit amet, consectetur adipiscing elit.
   </div>
 </article>
 

With buttons


Sticky notes
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam ac eleifend lacus, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor.
Sticky notes
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam ac eleifend lacus, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor.
 <article class="e-note danger">
   <div class="note-header">
     Sticky notes
     <a class="e-delete"><i aria-hidden="true">&times;</i></a>
   </div>
   <div class="note-body">
     Lorem ipsum dolor sit amet, consectetur adipiscing elit.
   </div>
   <div class="note-footer">
     <a class="e-btn plane danger">Accept</a>
   </div>
 </article>

 <article class="e-note warning">
   <div class="note-header">
     Sticky notes
     <a class="e-delete"><i aria-hidden="true">&times;</i></a>
   </div>
   <div class="note-body">
     Lorem ipsum dolor sit amet, consectetur adipiscing elit.
   </div>
   <div class="note-footer">
     <a class="e-btn plane warning">Accept</a>
   </div>
 </article>
 

Block notes


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam Aenean ac eleifend lacus, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam Aenean ac eleifend lacus, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor.
 <article class="e-note block primary">
   <div class="note-body">
     Lorem ipsum dolor sit amet, consectetur adipiscing elit.
   </div>
 </article>

 <article class="e-note block warning">
   <div class="note-body">
     Lorem ipsum dolor sit amet, consectetur adipiscing elit.
   </div>
 </article>
 

Lighten notes


Sticky notes
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam ac eleifend lacus, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor.
Sticky notes
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam ac eleifend lacus, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor.
    <article class="e-note lighten danger">
      <div class="note-header">
        Sticky notes
        <a class="e-delete"><i aria-hidden="true">&times;</i></a>
      </div>
      <div class="note-body">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      <div class="note-footer">
        <a class="e-btn inverted danger">Cancel</a>
        <a class="e-btn danger">Accept</a>
      </div>
    </article>

    <article class="e-note lighten primary">
      <div class="note-header">
        Sticky notes
        <a class="e-delete"><i aria-hidden="true">&times;</i></a>
      </div>
      <div class="note-body">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      <div class="note-footer">
        <a class="e-btn inverted primary">Cancel</a>
        <a class="e-btn primary">Accept</a>
      </div>
    </article>
 
Contribute on GitHub
Become a sponsor.

If you are using our framework in a product that generates income, you can also help its maintenance if you wish, if you frequently help in your company or personal developments consider making a recurring donation.

If you want to see your company's logo on this site it's time to be a serious Sponsor.

eFrolic | framework css 2018
eFrolic | framework css 2018

One-time donation


Donate
eFrolic | framework css 2018
eFrolic | framework css 2018

Serious sponsor


Become a Patron