Panel

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.

<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 class="bux-link" href="#" rel="noopener">
    <button class="bux-button">Call to Action</button>
  </a>
</div>

{#
Buckeye UX - version 1.5.0
Copyright (C) 2026 The Ohio State University
#}

{#

Panel

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

This DocBlock is auto-generated and any changes could be overwritten.
Use the component's corresponding *.config.ts to make changes to this file.

Last Updated: 04-01-2026 12:07:55
#}

<div class="bux-panel">
  {% include '@bux/heading/heading.twig' with {
    base_class: 'bux-panel__heading',
    heading_level: panel_heading_level,
    heading_text: panel_title
  } %}
  <p>
    {{ panel_text }}
  </p>
  {% if link_url %}
    {% embed '@bux/link/link.twig'
      with {
        link_url: link_url,
        link_text: link_text
      }
    %}
      {% block content %}
        {% include '@bux/button/button.twig' with {
          button_text: link_text
        } only %}
      {% endblock content %}
    {% endembed %}
  {% endif %}
</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