Panel

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.

Call to Action

<div class="bux-panel">
  <h2 class="bux-panel__heading">Title of Panel</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  <a href="#" class="bux-button">Call to Action</a>
</div>

<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