W3.CSS Panels
I am a panel
I am a panel
I am a container
I am a container
The Panel Class
The w3-panel class adds a 16px top and bottom margin and a 16px left and right padding to any HTML element.
Panels for Notes
The w3-panel class is perfect for displaying notes.
Notes are often displayed with a pale color:
London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.
Example
<p>London is the most populous city in the United Kingdom,
with a metropolitan area of over 9 million inhabitants.</p>
</div>
To learn more about W3.CSS Notes please visit the W3.CSS Notes chapter.
Panels for Quotes
The w3-panel class is perfect for displaying quotes.
"Make it as simple as possible, but not simpler."
Example
<p><i>"Make it as simple as possible, but not simpler."</i></p>
</div>
To learn more about W3.CSS Quotes please visit the W3.CSS Quotes chapter.
Panels for Alerts
The w3-panel class is perfect for displaying alerts.
Alerts are often displayed using a strong color:
Danger!
Red often indicates a dangerous or negative situation.
Example
<h3>Danger!</h3>
<p>Red often indicates a dangerous or negative situation.</p>
</div>
To learn more about W3.CSS Alerts please visit the W3.CSS Alerts chapter.
Panels as Cards
London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.
Example
<p>London is the most populous city in the United Kingdom,
with a metropolitan area of over 9 million inhabitants.</p>
</div>
Rounded Panels
London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.
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
Hiding a panel is easy.
Click on the X to close this panel.
Click on the X to close this panel.
Example
<span onclick="this.parentElement.style.display='none'"
class="w3-button w3-display-topright">X</span>
<p>Click on the X to close this panel.</p>
<p>Click on the X to close this panel.</p>
</div>
Show (Open) a Panel
Showing (a hidden) panel is easy:
Click on the X to close this panel.
Click on the X to close this panel.
Example
<div id="id01" class="w3-panel w3-green w3-display-container" style="display:none">
<span onclick="this.parentElement.style.display='none'"
class="w3-button w3-display-topright">X</span>
<p>Click on the X to close this panel.</p>
<p>Click on the X to close this panel.</p>
</div>