THE WORLD'S LARGEST WEB DEVELOPER SITE

How TO - Notes


Learn how to create "notes" with CSS.


Notes

Notes can be used to notify the user about something special: danger, success, information or warning

Danger! Some text...

Success! Some text...

Info! Some text...

Warning! Some text...


How To Create Notes

Step 1) Add HTML:

Example

<div class="danger">
  <p><strong>Danger!</strong> Some text...</p>
</div>

Step 2) Add CSS:

Example

.danger {
    background-color: #ffdddd;
    border-left: 6px solid #f44336;
}
Try it Yourself »

Tip: Also check out Alerts.