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>