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 »
What You Have Learned
- Notes highlight information that deserves attention
- Panels can also be styled with pale colors, borders, and round classes
- Color can support meaning, but text should explain the message
- Notes should be noticeable without dominating the page
More Examples
Explore more ways to style W3.CSS notes.
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 »
