W3.CSS Notes
Notes and Information
Notes are used to highlight information that deserves extra attention.
In W3.CSS, notes are commonly created with w3-panel.
Simple Note Styles
Notes can be styled with ordinary W3.CSS colors, borders, and round classes.
Note: Save your work before continuing.
Remember: Test your page on different screen sizes.
Example
<div class="w3-panel w3-light-grey w3-border w3-round-large">
<p><b>Note:</b> Save your work before continuing.</p>
</div>
<div class="w3-panel w3-pale-blue w3-leftbar w3-border-blue">
<p><b>Tip:</b> Use meaningful class names in your HTML.</p>
</div>
<div class="w3-panel w3-pale-yellow w3-border w3-border-yellow">
<p><b>Remember:</b> Test your page on different screen sizes.</p>
</div>
Try it Yourself »
Build a Helpful Tip
A good note should be noticeable without distracting from the main content.
Example
<div class="w3-panel w3-pale-green w3-leftbar w3-border-green">
<h3>Tip</h3>
<p>Use max-width:100% to prevent fixed-width content from becoming wider than its parent.</p>
</div>
Try it Yourself »
Use Colors Carefully
Do not rely on color alone to communicate meaning.
Include clear text such as Note, Warning, or Error.
Note Classes
W3.CSS 5 provides 5 semantic classes for notes.
Different colors suggest different meanings:
| Style | Typical Meaning |
|---|---|
w3-note |
General note or reminder |
w3-info |
Information |
w3-success |
Successful result |
w3-warning |
Warning |
w3-danger |
Danger or error |
The w3-note Class
Note
W3.CSS uses standard CSS only. No JavaScript library is required.
Example
<div class="w3-panel w3-note">
<h3>Note</h3>
<p>W3.CSS uses standard CSS only. No JavaScript library is required.</p>
</div>
Try it Yourself »
Use w3-note when the color should communicate the meaning of a note.
The w3-info Class
Information
Your profile was updated.
Example
<div class="w3-panel w3-info">
<h3>Information</h3>
<p>Your profile was updated.</p>
</div>
Try it Yourself »
The w3-success Class
Success
Your changes were saved.
Example
<div class="w3-panel w3-success">
<h3>Success</h3>
<p>Your changes were saved.</p>
</div>
Try it Yourself »
The w3-warning Class
Warning
Your subscription expires soon.
Example
<div class="w3-panel w3-warning">
<h3>Warning</h3>
<p>Your subscription expires soon.</p>
</div>
Try it Yourself »
The w3-danger Class
Danger
Something went wrong.
Example
<div class="w3-panel w3-danger">
<h3>Danger</h3>
<p>Something went wrong.</p>
</div>
Try it Yourself »
Grey with Rounded Border
London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.
Example
<div class="w3-panel w3-border w3-light-grey w3-round-large">
<p>This is a note.</p>
</div>
Try it Yourself »
Pale Blue with Side Bars
Example
<div class="w3-panel w3-pale-blue w3-leftbar w3-rightbar w3-border-blue">
<p>This is a note.</p>
</div>
Try it Yourself »
Pale Red with Left Bar
Example
<div class="w3-panel w3-pale-red w3-leftbar w3-border-red">
<p>This is a note.</p>
</div>
Try it Yourself »
Pale Yellow with Border
London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.
Example
<div class="w3-panel w3-pale-yellow w3-border w3-border-yellow">
<p>This is a note.</p>
</div>
Try it Yourself »
Pale Green with Bottom Bar
Example
<div class="w3-panel w3-pale-green w3-bottombar w3-border-green">
<p>This is a note.</p>
</div>
Try it Yourself »
Yellow with Top and Bottom Bars
Example
<div class="w3-panel w3-yellow w3-topbar w3-bottombar w3-border-amber">
<p>This is a note.</p>
</div>
Try it Yourself »
