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.

Example

<div class="w3-panel w3-red">
  <p>I am a panel.</p>
</div> 
Try It Yourself »

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

<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 »

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

<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 »

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

<div class="w3-panel w3-red">
  <h3>Danger!</h3>
  <p>Red often indicates a dangerous or negative situation.</p>
</div>
Try It Yourself »

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

<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 »

Rounded Panels

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-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

Hiding a panel is easy.

×

Click on the X to close this panel.

Click on the X to close this panel.

Example

<div class="w3-panel w3-display-container">
  <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>
Try It Yourself »

Show (Open) a Panel

Showing (a hidden) panel is easy:

Example

<button class="w3-btn" onclick="document.getElementById('id01').style.display='block'">Show panel</button>

<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>
Try It Yourself »

Copyright 1999-2023 by Refsnes Data. All Rights Reserved.