W3.CSS — Panels

Basic Panel

<div class="w3-panel">
    <p>This is a basic panel with default styling.</p>
</div>

Panel with Background

<div class="w3-panel w3-blue">
    <p>Blue panel</p>
</div>

<div class="w3-panel w3-green">
    <p>Green panel</p>
</div>

<div class="w3-panel w3-red">
    <p>Red panel</p>
</div>

Panel with Border

<div class="w3-panel w3-border w3-round">
    <p>Panel with border</p>
</div>

<div class="w3-panel w3-leftbar w3-border-blue">
    <p>Panel with left border</p>
</div>

Note Panel

<div class="w3-panel w3-pale-blue w3-border w3-border-blue">
    <p><strong>Note:</strong> This is an important note.</p>
</div>

Tip Panel

<div class="w3-panel w3-pale-green w3-border w3-border-green">
    <p><strong>Tip:</strong> This is a helpful tip.</p>
</div>

Warning Panel

<div class="w3-panel w3-pale-yellow w3-border w3-border-yellow">
    <p><strong>Warning:</strong> Be careful with this!</p>
</div>

Danger Panel

<div class="w3-panel w3-pale-red w3-border w3-border-red">
    <p><strong>Danger:</strong> This could cause errors!</p>
</div>

Panel Examples

<!-- Info panel -->
<div class="w3-panel w3-leftbar w3-light-blue">
    <p><strong>Info:</strong> This is informational content.</p>
</div>

<!-- Custom panel -->
<div class="w3-panel w3-border w3-round-large w3-border-purple">
    <h4>Custom Panel</h4>
    <p>This panel has custom border and rounded corners.</p>
</div>

Panel Utilities

Class	Description
w3-panel	Basic panel
w3-panel w3-leftbar	Left border panel
w3-panel w3-rightbar	Right border panel
w3-panel w3-topbar	Top border panel
w3-panel w3-bottombar	Bottom border panel

Mini Practice

Create HTML code that:

1. Creates a basic panel
2. Adds a colored panel
3. Creates a note panel
4. Creates a warning panel

Up Next

Next: Learn about W3.CSS Tables.