W3CSS Panels

W3CSS panels are a type of container, however panels add top and bottom margin of 16 pixels in addition to left and right padding of 16 pixels. Panels are most commonly used for displaying notes, quotes, alerts, cards etc. You can also create closeable and show-able panels. In this article we shall see all of these different types of panels.

A simple W3CSS Panel

You can create a simple W3CSS panel via only two classes: A w3-panel and w3-color class. The later defines the background color of the panel. Take a look at the following code snippet.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>

    <div class="w3-panel w3-blue">
        <h2>This is a panel</h2>
        <p>It has blue background!<p>
    </div>
    


</html>

Download the code Try the code

In the above code we have a simple panel with a heading and paragraph. The background color of the panel is blue. If you open the panel in the browser, you shall see a top margin of 16 pixels. This is where a panel differes from simple container.

Using Panel for Creating Notes

W3CSS panels can also be used for creating notes. Simply add some pale background color to the panel and add a leftbar margin of your desired color. The resulting panel looks like a note. Take a look at the following piece of code.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>

    <div class="w3-panel w3-pale-yellow w3-leftbar w3-border-red">
        <h2>This is a panel</h2>
        <p>It has blue background!<p>
    </div>
    

</html>

Download the code Try the code

In the above code we use the w3-pale-yellow class to set the background of the panel to pale yellow. Next we add w3-leftbar class and then w3-border-red class to add a left border to the panel. This creates a notes effect using panel.

Using Panel for Creating Quotes

Like notes, the W3CSS panel can also be used to create quotes type affect. In the following example quotes effec has been created using panels. Take a look at it.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>

    <div class="w3-panel w3-pale-green w3-leftbar w3-xxlarge w3-sans-serif">
        
        <p><i>"Allwork and no play, makes jack a dull boy"</i><p>
    </div>
    

</html>

Download the code Try the code

In addition to adding pale class and left bar, we have added w3-xxlarge and w3-sans-serif classes to create a quotes effect. Inside the panel div, we have italicized the text to create real quote effect. We shall see remaining uses of panel class in the next article.

<<< W3CSS Borders AdvancedW3CSS Closing and Opening Panels >>>
Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .