In this topic you will add a Panel control with some formatted content.

1. Create an ASP.NET Web application with a ScriptManager control and install Juice UI and the Wijmo Juice libraries to your project via NuGet.
2. In the Visual Studio Toolbox, double-click the Panel control to add a panel to the main content of your page.
3. Add some content to the panel. For example:

   <asp:Panel ID="Panel1" runat="server" Height="300" Width="300">
   

         <div class="elements">
   

               <ul>
   

                   <li style="background: AliceBlue;"><span>AliceBlue</span></li>
   

                   <li style="background: AntiqueWhite;"><span>AntiqueWhite</span></li>
   

                   <li style="background: Aqua;"><span>Aqua</span></li>
   

                   <li style="background: Aquamarine;"><span>Aquamarine</span></li>
   

                   <li style="background: Azure;"><span>Azure</span></li>
   

                   <li style="background: Beige;"><span>Beige</span></li>
   

                   <li style="background: Bisque;"><span>Bisque</span></li>
   

                   <li style="background: Black;"><span>Black</span></li>
   

                   <li style="background: BlanchedAlmond;"><span>BlanchedAlmond</span></li>
   

                   <li style="background: Blue;"><span>Blue</span></li>
   

                   <li style="background: BlueViolet;"><span>BlueViolet</span></li>
   

                   <li style="background: Brown;"><span>Brown</span></li>
   

                   <li style="background: BurlyWood;"><span>BurlyWood</span></li>
   

                   <li style="background: CadetBlue;"><span>CadetBlue</span></li>
   

                   <li style="background: Chartreuse;"><span>Chartreuse</span></li>
   

                   <li style="background: Chocolate;"><span>Chocolate</span></li>
   

                   <li style="background: Coral;"><span>Coral</span></li>
   

                   <li style="background: CornflowerBlue;"><span>CornflowerBlue</span></li>
   

                   <li style="background: Cornsilk;"><span>Cornsilk</span></li>
   

                   <li style="background: Crimson;"><span>Crimson</span></li>
   

                   <li style="background: Cyan;"><span>Cyan</span></li>
   

                   <li style="background: DarkBlue;"><span>DarkBlue</span></li>
   

                   <li style="background: DarkCyan;"><span>DarkCyan</span></li>
   

                   <li style="background: DarkGoldenrod;"><span>DarkGoldenrod</span></li>
   

                   <li style="background: DarkGray;"><span>DarkGray</span></li>
   

                   <li style="background: DarkGreen;"><span>DarkGreen</span></li>
   

                   <li style="background: DarkKhaki;"><span>DarkKhaki</span></li>
   

                   <li style="background: DarkMagenta;"><span>DarkMagenta</span></li>
   

                   <li style="background: DarkOliveGreen;"><span>DarkOliveGreen</span></li>
   

                   <li style="background: DarkOrange;"><span>DarkOrange</span></li>
   

               </ul>
   

           </div>
   

      </asp:Panel>
   

4. Format the content with a CSS so it appears a little cleaner by adding the following markup within the <asp:Content> tags for the HeaderContent. Add the following:

   <asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
   

    <style type="text/css">
   

           .elements ul
   

           {
   

               padding: 8px 0 0 8px;
   

               margin: 0px;
   

               width: 840px;
   

               float: left;
   

           }
   

           .elements ul li
   

           {
   

               background: #fff;
   

               color: #fff;
   

               font-weight: 900;
   

               height: 70px;
   

               margin: 0 8px 8px 0;
   

               padding: 0;
   

               padding-top: 62px;
   

               position: relative;
   

               text-align: center;
   

               width: 132px;
   

           }
   

           .elements li
   

           {
   

               float: left;
   

               list-style: none;
   

           }
   

       </style>
   

   </asp:Content>
   

   Next, add a WijSuperPanel control and associate it with the panel.