--- layout: default permalink: /notes category: components title: Notes description: "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." ---

{{page.title}} Component

{{page.description}}



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.
{% highlight html %}
Sticky notes
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sticky notes
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
{% endhighlight %}

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.
{% highlight html %}
Sticky notes
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sticky notes
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
{% endhighlight %}

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.
{% highlight html %}
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
{% endhighlight %}

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.
{% highlight html %}
Sticky notes
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sticky notes
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
{% endhighlight %}