Component overview
The Panel component is a container that holds Content Blocks. Putting Content Blocks in a Panel allows you to put multiple Content Blocks in the same row and apply a background color across the Content Blocks.
- Panels can be used on all page types: Panels are designed to be used on all page types. Panels are full-width when used on section fronts.
- Panels can be used to group related content: Panels are containers for Content Blocks. By grouping content blocks into rows and applying an (optional) common background color to Content Blocks, Panels can be used to show how content is related and to create separation between different elements on a page.
- Panels offer design flexibility: Putting Content Blocks inside Panels will generally give you the most design flexibility in how your Content Blocks display on a page.
- No WYSIWYG: The Panel component does not have a formattable WYSIWYG field. Be mindful of how you want your content to appear in the component.
- You may use different background colors on the Panel component: Panels can have a silver, dark gray or blue background color applied.
- Panels can be full-width on section fronts: Panels have the option of spanning full-width on section fronts or being restricted to the content space.
- Panels have flexible spacing: By default, Panels have additional spacing at the top. Putting Content Blocks in a panel can help provide extra space between components. Panels also allow you to add additional space at the top and bottom of the component.
- Text alignment: You can choose to align text to the left, center or right in a Panel. This choice applies to the panel title and description field. Text alignment in the Content Blocks is controlled at the Content Block level. Right-aligned text is unusual for on-page content and should be used sparingly.
- Panels use rows of 12 columns: Content Blocks in a Panel will be on the same row when the total number of columns in the Content Blocks is equal to or less than 12. Once the total number of columns is more than 12, the Panel will automatically start a new line. Panels can contain multiple lines.
- The Panel title field uses H-tag options: Make sure you select the appropriate tag based on the Panel's position on your page.
PANEL: UNIT NAME - Purpose
- Example: PANEL: NURS- Academic Programs
Example Panel components
Example #1
Panel with 3 Content Blocks and background color. In the example below, a background color is applied to the Panel element, providing a common background color to all three Content Blocks contained in the Panel.
Partner with us!
Introducing kids to engineering
We offer a range of K-12 programs that make engineering accessible to Nevada's youth.
Training Nevada's high-tech workforce
College of Engineering graduates are some of the brightest students in Nevada, and they're ready to work for you.
Conducting cutting-edge research
We are committed to research and innovation that addresses local and national needs and improves the economy.
Example #2
Panel with no background color and four Content Blocks, each with column widths of 3. Choosing "no background color" for the Panel creates separation between Content Blocks that have grey or blue background colors applied.
Please note the differences in spacing and text alignment between this Content Block that is not in a Panel, compared to the spacing and text alignment of Content Blocks that are stored in the Panel below.
Example #3
Panel with one Content Block. In the example below, the Panel has just one Content Block. In this case, Panels can be used to create additional space around the Content Blocks and to add a full-width color on Section Fronts.
Dean Manos Maragakis
“The College of Engineering is committed to providing students a globally competitive engineering education, conducting innovative, cutting-edge research and engaging with the community. The William N. Pennington Engineering Building propels these goals forward and contributes to the vitality of our region, our nation and our world.”