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
<p>London is the capital of England.</p>
</div>
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
<p>This is a container.</p>
</div>
<div class="w3-panel w3-light-grey">
<p>This is a panel.</p>
</div>
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 with 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
<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>
Notes
Use w3-note for notes and important information.
Note
W3.CSS panels can contain any HTML content.
Example
<p><b>Note:</b> W3.CSS panels can contain any HTML content.</p>
</div>
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
<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>
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.
A panel with a green left border.
A panel with a red left border.
Example
<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>
Panels for Quotes
Panels are also useful for displaying quotations.
"Simplicity is the ultimate sophistication."
Leonardo da Vinci
Example
<p class="w3-xlarge">
<i>"Simplicity is the ultimate sophistication."</i>
</p>
<p>Leonardo da Vinci</p>
</div>
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
<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>
Build a Status Panel
Semantic colors are especially useful for status information.
Website Online
All systems are working normally.
Example
<h3>Website Online</h3>
<p>All systems are working normally.</p>
<p><button class="w3-button w3-white">View Status</button></p>
</div>
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
<p>London is the most populous city in the United Kingdom,
with a metropolitan area of over 9 million inhabitants.</p>
</div>
The w3-panel class is perfect for displaying quotes:
Example
<p><i>"Make it as simple as possible, but not simpler."</i></p>
</div>
The w3-panel class is perfect for displaying alerts:
Example
<h3>Danger!</h3>
<p>Red often indicates a dangerous or negative situation.</p>
</div>
The w3-panel class is perfect for displaying cards:
Example
<p>London is the most populous city in the United Kingdom,
with a metropolitan area of over 9 million inhabitants.</p>
</div>
Panels can be rounded:
Example
<p>London is the most populous city in the United Kingdom,
with a metropolitan area of over 9 million inhabitants.</p>
</div>
Hide (Close) a Panel
Add a close button to let the user hide a panel.
Click the X to close this panel.
Example
<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>
Show a Panel
JavaScript can also be used to show a hidden panel.
This panel was hidden.
Example
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>