Panel

Component status:Ready

A Panel provides a light gray background, adding visual emphasis to a group of components.

A panel provides a flexible content container. It is similar to a Card, but there are no restrictions as to what components can be contained in them.

Example

Title of Panel

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Call to Action

<div class="bux-panel">
  <h5 class="bux-panel__heading">Title of Panel</h5>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. <br /><br />Lorem ipsum dolor sit amet, consectetur adipiscing
    elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
    enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
    aliquip ex ea commodo consequat.
  </p>
  <a href="#" class="bux-button">Call to Action</a>
</div>

{#
Buckeye UX - version 1.0.12
Copyright (C) 2024 The Ohio State University
#}

{# 

Panel

Available variables:

- panel_heading_level:  Integer value for the heading level of the panel title.
- panel_title:          String for the panel title.
- panel_text:           Content of the panel.
- link_url:             URL of the panel link.
- link_text:            String for the panel button.

#}

<div class="bux-panel">
	<h{{ panel_heading_level|default(2) }} class="bux-panel__heading">
       {{ panel_title }} 
    </h{{ panel_heading_level|default(2) }}>
	<p>{{ panel_text }}</p>
	<a href="{{ link_url }}" class="bux-button">{{ link_text }}</a>
</div>

Usage

Dos

• Limit the amount of components inside a Panel
• Consider a Panel as a complementary component. Use it to create emphasis among Headings and paragraphs

Don’ts

• Don’t put all content on the page into Panels