W3.CSS Panels
The Panel Class
The w3-panel class is used to display highlighted content.
Panels are useful for messages, notes, warnings, quotes, and other content that should stand out.
London is the capital of England.
Example
<div class="w3-panel w3-blue">
<p>London is the capital of England.</p>
</div>
Try it Yourself »
Panels vs Containers
The w3-container
and w3-panel classes both add 16px left and right padding.
The difference is that w3-panel also adds 16px top and bottom margins.
| Class | Horizontal Padding | Vertical Margin |
|---|---|---|
w3-container |
16px | No |
w3-panel |
16px | 16px |
Compare the spacing between the containers and the panels:
This is a container.
This is a container.
This is a panel.
This is a panel.
Example
<div class="w3-container w3-light-grey">
<p>This is a container.</p>
</div>
<div class="w3-panel w3-light-grey">
<p>This is a panel.</p>
</div>
Try it Yourself »
Use a container to structure a page.
Use a panel when content should stand apart from the content around it.
Message Panels
W3.CSS includes semantic color classes for common messages.
These classes describe the meaning of the message instead of a specific color.
| Class | Use |
|---|---|
w3-info |
Information |
w3-success |
Success |
w3-warning |
Warning |
w3-danger |
Danger or error |
w3-note |
Notes and important information |
Information
Your profile was updated.
Success
Your changes were saved.
Warning
Your subscription expires soon.
Danger
Something went wrong.
Example
<div class="w3-panel w3-info">
<h3>Information</h3>
<p>Your profile was updated.</p>
</div>
<div class="w3-panel w3-success">
<h3>Success</h3>
<p>Your changes were saved.</p>
</div>
<div class="w3-panel w3-warning">
<h3>Warning</h3>
<p>Your subscription expires soon.</p>
</div>
<div class="w3-panel w3-danger">
<h3>Danger</h3>
<p>Something went wrong.</p>
</div>
Try it Yourself »
Notes
Use w3-note for notes and important information.
Note
W3.CSS panels can contain any HTML content.
Example
<div class="w3-panel w3-note">
<p><b>Note:</b> W3.CSS panels can contain any HTML content.</p>
</div>
Try it Yourself »
Panels with Colors
Panels can also use any regular W3.CSS color class.
Use regular colors when the color is part of the design rather than the meaning of a message.
Event
The conference starts at 9:00.
Travel
Your train leaves from platform 4.
Example
<div class="w3-panel w3-indigo">
<h3>Event</h3>
<p>The conference starts at 9:00.</p>
</div>
<div class="w3-panel w3-teal">
<h3>Travel</h3>
<p>Your train leaves from platform 4.</p>
</div>
Try it Yourself »
Panels with Borders
Panels do not need a background color.
Borders can highlight content with a lighter visual effect.
A panel with a blue border.
Example
<div class="w3-panel w3-border w3-border-blue">
<p>A panel with a blue border.</p>
</div>
<div class="w3-panel w3-leftbar w3-border-green">
<p>A panel with a green left border.</p>
</div>
<div class="w3-panel w3-leftbar w3-border-red">
<p>A panel with a red left border.</p>
</div>
Try it Yourself »
Panels for Quotes
Panels are also useful for displaying quotations.
Example
<div class="w3-panel w3-light-grey w3-leftbar w3-border-grey">
<p class="w3-xlarge">
<i>"Simplicity is the ultimate sophistication."</i>
</p>
<p>Leonardo da Vinci</p>
</div>
Try it Yourself »
Panels Can Contain Anything
A panel can contain headings, paragraphs, images, buttons, lists, and other HTML elements.
Weekend in Oslo
Explore museums, architecture, food, and the Oslo Fjord.
Example
<div class="w3-panel w3-card w3-light-grey">
<h2>Weekend in Oslo</h2>
<p>Explore museums, architecture, food, and the Oslo Fjord.</p>
<p><button class="w3-button w3-black">View Guide</button></p>
</div>
Try it Yourself »
Build a Status Panel
Semantic colors are especially useful for status information.
Website Online
All systems are working normally.
Example
<div class="w3-panel w3-success">
<h3>Website Online</h3>
<p>All systems are working normally.</p>
<p><button class="w3-button w3-white">View Status</button></p>
</div>
Try it Yourself »
Semantic Colors vs Regular Colors
Use semantic colors when the color communicates meaning.
Use regular colors when the color is mainly part of the visual design.
| Purpose | Examples |
|---|---|
| Message meaning | w3-info, w3-success, w3-warning, w3-danger, w3-note |
| Visual design | w3-blue, w3-green, w3-red, w3-indigo, w3-teal |
What You Have Learned
The w3-panel class is useful for content that should stand out from the rest of a page.
- It adds 16px left and right padding
- It adds 16px top and bottom margins
- It works with regular W3.CSS colors and borders
w3-infois used for informationw3-successis used for successful resultsw3-warningis used for warningsw3-dangeris used for danger and errorsw3-noteis used for notes- Panels can contain any HTML content
More Examples
Explore more ways to use W3.CSS panels.
Panels are the same as containers except for an added top and bottom margin:
The w3-panel class is perfect for displaying notes.
Notes are often displayed with a pale color:
Example
<div class="w3-panel w3-pale-green">
<p>London
is the most populous city in the United Kingdom,
with a
metropolitan area of over 9 million inhabitants.</p>
</div>
Try It Yourself »
The w3-panel class is perfect for displaying quotes:
Example
<div class="w3-panel w3-leftbar w3-sand w3-xxlarge w3-serif">
<p><i>"Make it as simple as possible, but not simpler."</i></p>
</div>
Try It Yourself »
The w3-panel class is perfect for displaying alerts:
Example
<div class="w3-panel w3-red">
<h3>Danger!</h3>
<p>Red often
indicates a dangerous or negative situation.</p>
</div>
Try It Yourself »
The w3-panel class is perfect for displaying cards:
Example
<div class="w3-panel w3-blue w3-card-4">
<p>London is the most populous city in the United Kingdom,
with a
metropolitan area of over 9 million inhabitants.</p>
</div>
Try It Yourself »
Panels can be rounded:
Example
<div class="w3-panel w3-blue w3-round-xlarge">
<p>London is the most populous city in the United Kingdom,
with
a metropolitan area of over 9 million inhabitants.</p>
</div>
Try It Yourself »
Hide (Close) a Panel
Add a close button to let the user hide a panel.
Click the X to close this panel.
Example
<div class="w3-panel w3-danger w3-display-container">
<span class="w3-button w3-large w3-display-topright"
onclick="this.parentElement.style.display='none'">×</span>
<p>Click the X to close this panel.</p>
</div>
Try It Yourself »
Show a Panel
JavaScript can also be used to show a hidden panel.
Example
<button class="w3-button w3-black"
onclick="document.getElementById('id01').style.display='block'">
Show Panel
</button>
<div id="id01" class="w3-panel w3-success w3-display-container" style="display:none">
<span class="w3-button w3-large w3-display-topright"
onclick="this.parentElement.style.display='none'">×</span>
<p>This panel was hidden.</p>
</div>
Try It Yourself »
