Table of Contents

W3.CSS Panels

Panels are the same as containers but extra feature is to added top and bottom margin.

The w3-panel class adds a 16px top and bottom margin and a 16px left and right padding to any HTML element.

Example

<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<link rel="stylesheet" href="w3.css">
<body>

<div class="w3-container">
<h2> Different between Panel and Container</h2>

<div class="w3-panel w3-red">
<p>This is a paragraph panel.</p>
</div>
<div class="w3-panel w3-green">
<p>This is a paragraph panel.</p>
</div>

<div class="w3-container w3-red">
<p>This is a paragraph container.</p>
</div>
<div class="w3-container w3-green">
<p>This is a paragraph container.</p>
</div>
</div>

</body>
</html>

W3.CSS Card Panels

The w3-card-4 class adds shadow any HTML element.

Example

<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<link rel="stylesheet" href="w3.css">
<body>

<div class="w3-container">
<h2> Use panel as card</h2>
<p>Using the w3-panel class can display cards:</p>

<div class="w3-panel w3-green w3-card-4">
<p>This paragraph is used to add card in pannel.</p>
</div>
</div>

</body>
</html>

W3.CSS Rounded Panels

The w3-round-size class adds rounded Panels.

tiny: Use the tiny class to display tiny panels.
small: Use the small class to display small panels.
large: Use the large class to display large panels.
xlarge :Use the xlarge class to display an xlarge panels.
xxlarge :Use the xxlarge class to display an xxlarge panels.

Example

<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<link rel="stylesheet" href="w3.css">
<body>

<div class="w3-container">
<h3> Use of Rounded Panels</h3>
<div class="w3-panel w3-green w3-round-tiny">
<p> This paragraph is tiny Rounded Panels</p>
</div>
<div class="w3-panel w3-red w3-round-small">
<p> This paragraph is small Rounded Panels</p>
</div>
<div class="w3-panel w3-blue w3-round-large">
<p> This paragraph is large Rounded Panels</p>
</div>
<div class="w3-panel w3-orange w3-round-xlarge">
<p> This paragraph is xlarge Rounded Panels</p>
</div>
<div class="w3-panel w3-black w3-round-xxlarge">
<p> This paragraph is xxlarge Rounded Panels</p>
</div>

</div>
</body>
</html>