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

 <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

 <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

Cancel Accept

Sticky notes

Cancel Accept

    <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.

One-time donation

Donate

Serious sponsor

Become a Patron