Panel

The panel serves as a container for various UI elements that have to be shown (on-demand) on the same page.

Modifiers•
Structure•
Plugin•
Default example•
Header customization•
Footer modifiers•
Double footer columns•
Non-modal panel

The panel component is a dialog window that separates content from the rest of the page.

The panel can be non-modal (without overlay and users can interact with the elements outside of the panel) or modal (has an overlay and the user can only interact with what is inside the panel).

Modifiers

The three modifiers bellow can be added to the flix-panel wrapper element to control the appearance of the panel:

flix-panel--left: Makes the element slide from the left side of the window.; The default width of panels sliding from the sides is 380px.
flix-panel--bottom: Panel slides from the bottom of the window.; By default, the height of panels sliding from the bottom depends on the content.
flix-panel--full: Makes the panel cover the entire visible window.

Structure

The panel markup consists of 3 main areas that are enclosed within the panel body element: header, content and footer.

<div class="flix-panel" role="dialog" aria-labelledby="the-panel-title-id">
  <div class="flix-panel__body">
    <div class="flix-panel__header">{header code}</div>
    <div class="flix-panel__content">{content code}</div>
    <div class="flix-panel__footer">{footer code}</div>
  </div>
</div>
<div class="flix-panel" role="dialog" aria-labelledby="the-panel-title-id">
  <div class="flix-panel__body">
    <div class="flix-panel__header">{header code}</div>
    <div class="flix-panel__content">{content code}</div>
    <div class="flix-panel__footer">{footer code}</div>
  </div>
</div>

Header

The header contains the back button, the title and a closing control.
The back button is optional and can be omitted, but the close button must always be present.
Both the home and close buttons must be properly labelled with a screen reader only text or aria-label attribute.
The panel title is required and you can use it to label the panel by giving it an id and passing it as aria-labelledby attribute to the panel element.

Content

This is the main area for all your wonderful HTML stuff!

Footer

The footer contains the main actions such as "Confirm" or "Cancel".
It can have up to two columns on which you can add buttons or other custom elements.
You can use regular buttons or block buttons depending on your needs.
If you have only one call to action with a side sliding panel (left or right), try to stick to block buttons for a better visual result.

Plugin

The examples bellow are using the popup.js plugin to handle most of the javascript hard work.

If you configure it correctly, the plugin will take care of all of this for you:

Adding the right role="dialog" to the panel element;
Add aria-modal="true" if the panel has an overlay;
Toggling the hidden and --active modifiers to show and hide the panel with a small interval to enable the smooth CSS transition to run smoothly;
Adding ESC key press support for closing the panel with the keyboard;
If the panel has an overlay: creating a tab trap that doesn't allow the user to tab away from the panel (cycling between first and last focusable items);
Adding tabindex="0" to the panel content if it has a scroll to enable keyboard users to focus the content in order to scroll it with arrow keys;
Adding the close button click handler for controls that have data-closePopup="true" attribute;

To configure the panels to use the plugin follow these steps:

Include the plugin from our CDN at the header of your page:

<script src="https://honeycomb.flixbus.com/dist/{VERSION_TAG}/js/popup.js"></script>

Initialize the plugin at the end:

document.addEventListener("DOMContentLoaded", function() {
  popup.init();
});

Add an id to the flix-panel element and initialize it with the hidden attribute, so it's closed;
Use the panel id and connect it to the toggle by using data-popup="{THE_PANEL_ID}";
Accessibility guidelines dictates that all dialogs must have a label:

You can either give the panel an aria-label with adequate text;
Or you can associate the panel title with and id and aria-labelledby;

Default example

<button type="button" class="flix-btn flix-btn--primary" data-popup="default-panel">
  Default example
</button>

<div id="default-panel" class="flix-panel" hidden="" aria-labelledby="default-example-title">
  <div class="flix-panel__body">
    <div class="flix-panel__header">
      <div id="default-example-title" class="flix-panel__title">
        <h3 class="flix-h3 flix-h3--space-flush">
          Default Example
        </h3>
      </div>
      <button type="button" class="flix-panel__close flix-btn flix-btn--square flix-btn--link" aria-label="Close panel" data-closepopup="true"></button>
    </div>
    <div class="flix-panel__content">
      <p class="flix-text">
        This is the default panel behavior: it slides from the right and has a fixed narrow width.
      </p>
    </div>
    <div class="flix-panel__footer">
      <div class="flix-panel__footer-column">
        <button type="button" class="flix-btn flix-btn--primary flix-btn--block" data-closepopup="true">
          Confirm
        </button>
      </div>
    </div>
  </div>
  <div class="flix-panel__overlay flix-overlay"></div>
</div>

<button type="button" class="flix-btn flix-btn--primary" data-popup="default-panel">
  Default example
</button>

<div id="default-panel" class="flix-panel" hidden="" aria-labelledby="default-example-title">
  <div class="flix-panel__body">
    <div class="flix-panel__header">
      <div id="default-example-title" class="flix-panel__title">
        <h3 class="flix-h3 flix-h3--space-flush">
          Default Example
        </h3>
      </div>
      <button type="button" class="flix-panel__close flix-btn flix-btn--square flix-btn--link" aria-label="Close panel" data-closepopup="true"></button>
    </div>
    <div class="flix-panel__content">
      <p class="flix-text">
        This is the default panel behavior: it slides from the right and has a fixed narrow width.
      </p>
    </div>
    <div class="flix-panel__footer">
      <div class="flix-panel__footer-column">
        <button type="button" class="flix-btn flix-btn--primary flix-btn--block" data-closepopup="true">
          Confirm
        </button>
      </div>
    </div>
  </div>
  <div class="flix-panel__overlay flix-overlay"></div>
</div>

Header customization

You can provide any custom content as the header title as long as you provide the correct styles and properly associate it as the panel title.

For example, to show the panel header with title and subtitle in the next example we can use the following markup:

<div class="flix-panel" aria-labelledby="panel-title">
  <div class="flix-panel__body">
    <div class="flix-panel__header">
      <button class="flix-panel__back flix-btn flix-btn--square flix-btn--md flix-btn--link" aria-label="Navigate back">
        <flix-icon name="home" solid="" aria-hidden="true"></flix-icon>
      </button>
      <div id="panel-title" class="flix-panel__title flix-has-text-centered">
        <h3 class="flix-h3 flix-h3--space-flush">
          Title
        </h3>
        <strong class="flix-h4 flix-h4--space-flush">
          Subtitle
        </strong>
      </div>
      <button class="flix-panel__close flix-btn flix-btn--square flix-btn--md flix-btn--link" aria-label="Close panel"></button>
    </div>
// ... rest of the panel content
      

      <div class="code-block"><div class="code-block__example"><button type="button" class="flix-btn flix-btn--primary" data-popup="custom-header-example">
  Custom header example
</button>

<div id="custom-header-example" class="flix-panel flix-panel--left" aria-labelledby="custom-header-title">
  <div class="flix-panel__body">
    <div class="flix-panel__header">
      <button class="flix-panel__back flix-btn flix-btn--square flix-btn--md flix-btn--link" aria-label="Navigate back">
        <flix-icon name="home" solid="" aria-hidden="true"></flix-icon>
      </button>
      <div id="custom-header-title" class="flix-panel__title flix-has-text-centered">
        <h3 class="flix-h3 flix-h3--space-flush">
          High heading
        </h3>
        <strong class="flix-h4 flix-h4--space-flush">
          Sub heading
        </strong>
      </div>
      <button class="flix-panel__close flix-btn flix-btn--square flix-btn--md flix-btn--link" aria-label="Close panel" data-closepopup="true"></button>
    </div>
    <div class="flix-panel__content">
      <p class="flix-text">
        This panel slides from the left and has fixed narrow width.
      </p>
      <p class="flix-text">
        The panel header and footer are taller to show how they can increase in size based on their content.
      </p>
    </div>
    <div class="flix-panel__footer">
      <div class="flix-panel__footer-column">
        <div class="flix-btn-group flix-btn-group--vertical">
          <button class="flix-btn flix-btn--block" data-closepopup="true">Close</button>
          <button class="flix-btn flix-btn--block flix-btn--primary">Confirm</button>
        </div>
      </div>
    </div>
  </div>
  <div class="flix-panel__overlay flix-overlay"></div>
</div></div><div class="code-block__code-example  "><div class="code-block__code-example-controls"><button type="button" class="hcr-btn-10-8-1 hcr-btn--square-10-8-1" aria-label="Copy code example"><span class="hci-icon" style="display:inline-block;width:20px;height:20px;vertical-align:middle;fill:currentColor"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="hci-svg-copy" role="img" style="display:block;max-width:100%"><path d="M13 8H5a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3v-8a3 3 0 0 0-3-3m1 11c0 .54-.46 1-1 1H5c-.54 0-1-.46-1-1v-8c0-.54.46-1 1-1h8c.54 0 1 .46 1 1zm8-14v8a3 3 0 0 1-3 3h-1v-2h1c.54 0 1-.46 1-1V5c0-.54-.46-1-1-1h-8c-.54 0-1 .46-1 1v1H8V5a3 3 0 0 1 3-3h8a3 3 0 0 1 3 3"></path></svg></span></button><textarea readonly="" aria-hidden="true" class="code-block__code-example-textarea">&lt;button type=&quot;button&quot; class=&quot;flix-btn flix-btn--primary&quot; data-popup=&quot;custom-header-example&quot;&gt;
  Custom header example
&lt;/button&gt;

&lt;div id=&quot;custom-header-example&quot; class=&quot;flix-panel flix-panel--left&quot; aria-labelledby=&quot;custom-header-title&quot;&gt;
  &lt;div class=&quot;flix-panel__body&quot;&gt;
    &lt;div class=&quot;flix-panel__header&quot;&gt;
      &lt;button class=&quot;flix-panel__back flix-btn flix-btn--square flix-btn--md flix-btn--link&quot; aria-label=&quot;Navigate back&quot;&gt;
        &lt;flix-icon name=&quot;home&quot; solid=&quot;&quot; aria-hidden=&quot;true&quot;&gt;&lt;/flix-icon&gt;
      &lt;/button&gt;
      &lt;div id=&quot;custom-header-title&quot; class=&quot;flix-panel__title flix-has-text-centered&quot;&gt;
        &lt;h3 class=&quot;flix-h3 flix-h3--space-flush&quot;&gt;
          High heading
        &lt;/h3&gt;
        &lt;strong class=&quot;flix-h4 flix-h4--space-flush&quot;&gt;
          Sub heading
        &lt;/strong&gt;
      &lt;/div&gt;
      &lt;button class=&quot;flix-panel__close flix-btn flix-btn--square flix-btn--md flix-btn--link&quot; aria-label=&quot;Close panel&quot; data-closepopup=&quot;true&quot;&gt;&lt;/button&gt;
    &lt;/div&gt;
    &lt;div class=&quot;flix-panel__content&quot;&gt;
      &lt;p class=&quot;flix-text&quot;&gt;
        This panel slides from the left and has fixed narrow width.
      &lt;/p&gt;
      &lt;p class=&quot;flix-text&quot;&gt;
        The panel header and footer are taller to show how they can increase in size based on their content.
      &lt;/p&gt;
    &lt;/div&gt;
    &lt;div class=&quot;flix-panel__footer&quot;&gt;
      &lt;div class=&quot;flix-panel__footer-column&quot;&gt;
        &lt;div class=&quot;flix-btn-group flix-btn-group--vertical&quot;&gt;
          &lt;button class=&quot;flix-btn flix-btn--block&quot; data-closepopup=&quot;true&quot;&gt;Close&lt;/button&gt;
          &lt;button class=&quot;flix-btn flix-btn--block flix-btn--primary&quot;&gt;Confirm&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class=&quot;flix-panel__overlay flix-overlay&quot;&gt;&lt;/div&gt;
&lt;/div&gt;</textarea></div><pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flix-btn flix-btn--primary<span class="token punctuation">"</span></span> <span class="token attr-name">data-popup</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>custom-header-example<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
  Custom header example
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">></span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>custom-header-example<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flix-panel flix-panel--left<span class="token punctuation">"</span></span> <span class="token attr-name">aria-labelledby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>custom-header-title<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flix-panel__body<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flix-panel__header<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flix-panel__back flix-btn flix-btn--square flix-btn--md flix-btn--link<span class="token punctuation">"</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Navigate back<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>flix-icon</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>home<span class="token punctuation">"</span></span> <span class="token attr-name">solid</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span> <span class="token attr-name">aria-hidden</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>true<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>flix-icon</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>custom-header-title<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flix-panel__title flix-has-text-centered<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h3</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flix-h3 flix-h3--space-flush<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
          High heading
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h3</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>strong</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flix-h4 flix-h4--space-flush<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
          Sub heading
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>strong</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flix-panel__close flix-btn flix-btn--square flix-btn--md flix-btn--link<span class="token punctuation">"</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Close panel<span class="token punctuation">"</span></span> <span class="token attr-name">data-closepopup</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>true<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flix-panel__content<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flix-text<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
        This panel slides from the left and has fixed narrow width.
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flix-text<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
        The panel header and footer are taller to show how they can increase in size based on their content.
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flix-panel__footer<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flix-panel__footer-column<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flix-btn-group flix-btn-group--vertical<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flix-btn flix-btn--block<span class="token punctuation">"</span></span> <span class="token attr-name">data-closepopup</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>true<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Close<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">></span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flix-btn flix-btn--block flix-btn--primary<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Confirm<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flix-panel__overlay flix-overlay<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></code></pre></div></div>
      
<h2 class="hcr-h2-10-8-1 toc-anchor" id="footer-modifiers" style="position:relative"><a class="toc-anchor-icon before" href="#footer-modifiers" aria-label="footer modifiers permalink"><svg class="flix-svg-link" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1000 1000"><path d="M277.3 916.7A156.2 156.2 0 0 1 166.2 870.8L129.2 833.8A157.3 157.3 0 0 1 129.2 611.6L330.4 410.5A157.2 157.2 0 0 1 552.5 410.5L571 429A20.8 20.8 0 1 1 541.8 458.1L523.3 439.7A116 116 0 0 0 441.5 406.8H441.5A116 116 0 0 0 359.7 439.7L158.3 640.8A115.8 115.8 0 0 0 158.3 804.6L195.3 841.5A118.5 118.5 0 0 0 359 841.5L459.5 740.9A20.8 20.8 0 0 1 488.7 740.9H488.7A20.8 20.8 0 0 1 488.7 770.1L388.3 870.8A156 156 0 0 1 277.3 916.7ZM558.3 635.6A156.4 156.4 0 0 1 447.2 589.8L428.8 571.2A20.8 20.8 0 0 1 458.3 541.7L476.8 560.2A116 116 0 0 0 558.6 593H558.6A116.1 116.1 0 0 0 640.5 560.2L841.6 359A115.5 115.5 0 0 0 841.6 195.3L804.7 158.4A116 116 0 0 0 722.9 125.5H722.9A115.9 115.9 0 0 0 641 158.4L540.2 259.1A20.8 20.8 0 0 1 511 259.1 20.8 20.8 0 0 1 511 230L611.5 129.2A155.9 155.9 0 0 1 722.6 83.3H722.6A156.1 156.1 0 0 1 833.7 129.2L870.6 166.1A157.1 157.1 0 0 1 870.6 388.3L669.5 589.4A156.3 156.3 0 0 1 558.3 635.6Z"></path></svg></a>Footer modifiers</h2>
<p class="hcr-text-10-8-1">The footer container will initially justify the columns with equal space between them, ans have the columns fill the space available to them.</p>
<p class="hcr-text-10-8-1">If you want to change this behavior you can use the following modifiers:</p>
<dl class="flix-list-description">
  <dt class="flix-list-description__term"><code>flix-panel__footer--justify-start</code></dt>
  <dt class="flix-list-description__term"><code>flix-panel__footer--justify-center</code></dt>
  <dt class="flix-list-description__term"><code>flix-panel__footer--justify-end</code></dt>
  <dd class="flix-list-description__details">When applied to the footer will control where the coolumns will be placed.</dd>
  <dt class="flix-list-description__term"><code>flix-panel__footer-column--narrow</code></dt>
  <dd class="flix-list-description__details">When applied to a footer column makes that column size content aware.</dd>
</dl>
<p class="hcr-text-10-8-1">This is how we achieve the &quot;Button to the right&quot; layout on the example bellow:</p>

      <div class="code-block"><div class="code-block__code-example  "><div class="code-block__code-example-controls"><button type="button" class="hcr-btn-10-8-1 hcr-btn--square-10-8-1" aria-label="Copy code example"><span class="hci-icon" style="display:inline-block;width:20px;height:20px;vertical-align:middle;fill:currentColor"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="hci-svg-copy" role="img" style="display:block;max-width:100%"><path d="M13 8H5a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3v-8a3 3 0 0 0-3-3m1 11c0 .54-.46 1-1 1H5c-.54 0-1-.46-1-1v-8c0-.54.46-1 1-1h8c.54 0 1 .46 1 1zm8-14v8a3 3 0 0 1-3 3h-1v-2h1c.54 0 1-.46 1-1V5c0-.54-.46-1-1-1h-8c-.54 0-1 .46-1 1v1H8V5a3 3 0 0 1 3-3h8a3 3 0 0 1 3 3"></path></svg></span></button><textarea readonly="" aria-hidden="true" class="code-block__code-example-textarea">&lt;div class=&quot;flix-panel__footer flix-panel__footer--justify-end&quot;&gt;
  &lt;div class=&quot;flix-panel__footer-column flix-panel__footer-column--narrow&quot;&gt;
    &lt;button type=&quot;button&quot; class=&quot;flix-btn flix-btn--primary&quot;&gt;Confirm&lt;/button&gt;
  &lt;/div&gt;
&lt;/div&gt;</textarea></div><pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flix-panel__footer flix-panel__footer--justify-end<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flix-panel__footer-column flix-panel__footer-column--narrow<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flix-btn flix-btn--primary<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Confirm<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></code></pre></div></div>
      

      <div class="code-block"><div class="code-block__example"><button type="button" class="flix-btn flix-btn--primary" data-popup="footer-example-panel">
  Button to the right example
</button>

<div id="footer-example-panel" class="flix-panel flix-panel--bottom" aria-labelledby="button-right-example-title">
  <div class="flix-panel__body">
    <div class="flix-panel__header">
      <div id="button-right-example-title" class="flix-panel__title">
        <h3 class="flix-h3 flix-h3--space-flush">
          Button to the Right Example
        </h3>
      </div>
      <button type="button" class="flix-panel__close flix-btn flix-btn--square flix-btn--link" aria-label="Close panel" data-closepopup="true"></button>
    </div>
    <div class="flix-panel__content">
      <p class="flix-text">
        You can place the call to action buttons in the corners by creating one narrow column and justifying the footer according to your own needs.
      </p>
    </div>
    <div class="flix-panel__footer flix-panel__footer--justify-end">
      <div class="flix-panel__footer-column flix-panel__footer-column--narrow">
        <button type="button" class="flix-btn flix-btn--primary" data-closepopup="true">
          Confirm
        </button>
      </div>
    </div>
  </div>
  <div class="flix-panel__overlay flix-overlay"></div>
</div></div><div class="code-block__code-example  "><div class="code-block__code-example-controls"><button type="button" class="hcr-btn-10-8-1 hcr-btn--square-10-8-1" aria-label="Copy code example"><span class="hci-icon" style="display:inline-block;width:20px;height:20px;vertical-align:middle;fill:currentColor"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="hci-svg-copy" role="img" style="display:block;max-width:100%"><path d="M13 8H5a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3v-8a3 3 0 0 0-3-3m1 11c0 .54-.46 1-1 1H5c-.54 0-1-.46-1-1v-8c0-.54.46-1 1-1h8c.54 0 1 .46 1 1zm8-14v8a3 3 0 0 1-3 3h-1v-2h1c.54 0 1-.46 1-1V5c0-.54-.46-1-1-1h-8c-.54 0-1 .46-1 1v1H8V5a3 3 0 0 1 3-3h8a3 3 0 0 1 3 3"></path></svg></span></button><textarea readonly="" aria-hidden="true" class="code-block__code-example-textarea">&lt;button type=&quot;button&quot; class=&quot;flix-btn flix-btn--primary&quot; data-popup=&quot;footer-example-panel&quot;&gt;
  Button to the right example
&lt;/button&gt;

&lt;div id=&quot;footer-example-panel&quot; class=&quot;flix-panel flix-panel--bottom&quot; aria-labelledby=&quot;button-right-example-title&quot;&gt;
  &lt;div class=&quot;flix-panel__body&quot;&gt;
    &lt;div class=&quot;flix-panel__header&quot;&gt;
      &lt;div id=&quot;button-right-example-title&quot; class=&quot;flix-panel__title&quot;&gt;
        &lt;h3 class=&quot;flix-h3 flix-h3--space-flush&quot;&gt;
          Button to the Right Example
        &lt;/h3&gt;
      &lt;/div&gt;
      &lt;button type=&quot;button&quot; class=&quot;flix-panel__close flix-btn flix-btn--square flix-btn--link&quot; aria-label=&quot;Close panel&quot; data-closepopup=&quot;true&quot;&gt;&lt;/button&gt;
    &lt;/div&gt;
    &lt;div class=&quot;flix-panel__content&quot;&gt;
      &lt;p class=&quot;flix-text&quot;&gt;
        You can place the call to action buttons in the corners by creating one narrow column and justifying the footer according to your own needs.
      &lt;/p&gt;
    &lt;/div&gt;
    &lt;div class=&quot;flix-panel__footer flix-panel__footer--justify-end&quot;&gt;
      &lt;div class=&quot;flix-panel__footer-column flix-panel__footer-column--narrow&quot;&gt;
        &lt;button type=&quot;button&quot; class=&quot;flix-btn flix-btn--primary&quot; data-closepopup=&quot;true&quot;&gt;
          Confirm
        &lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class=&quot;flix-panel__overlay flix-overlay&quot;&gt;&lt;/div&gt;
&lt;/div&gt;</textarea></div><pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flix-btn flix-btn--primary<span class="token punctuation">"</span></span> <span class="token attr-name">data-popup</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>footer-example-panel<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
  Button to the right example
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">></span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>footer-example-panel<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flix-panel flix-panel--bottom<span class="token punctuation">"</span></span> <span class="token attr-name">aria-labelledby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button-right-example-title<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flix-panel__body<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flix-panel__header<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button-right-example-title<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flix-panel__title<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h3</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flix-h3 flix-h3--space-flush<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
          Button to the Right Example
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h3</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flix-panel__close flix-btn flix-btn--square flix-btn--link<span class="token punctuation">"</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Close panel<span class="token punctuation">"</span></span> <span class="token attr-name">data-closepopup</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>true<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flix-panel__content<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flix-text<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
        You can place the call to action buttons in the corners by creating one narrow column and justifying the footer according to your own needs.
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flix-panel__footer flix-panel__footer--justify-end<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flix-panel__footer-column flix-panel__footer-column--narrow<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flix-btn flix-btn--primary<span class="token punctuation">"</span></span> <span class="token attr-name">data-closepopup</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>true<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
          Confirm
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flix-panel__overlay flix-overlay<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></code></pre></div></div>
      
<h3 class="hcr-h3-10-8-1 toc-anchor" id="double-footer-columns" style="position:relative"><a class="toc-anchor-icon before" href="#double-footer-columns" aria-label="double footer columns permalink"><svg class="flix-svg-link" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1000 1000"><path d="M277.3 916.7A156.2 156.2 0 0 1 166.2 870.8L129.2 833.8A157.3 157.3 0 0 1 129.2 611.6L330.4 410.5A157.2 157.2 0 0 1 552.5 410.5L571 429A20.8 20.8 0 1 1 541.8 458.1L523.3 439.7A116 116 0 0 0 441.5 406.8H441.5A116 116 0 0 0 359.7 439.7L158.3 640.8A115.8 115.8 0 0 0 158.3 804.6L195.3 841.5A118.5 118.5 0 0 0 359 841.5L459.5 740.9A20.8 20.8 0 0 1 488.7 740.9H488.7A20.8 20.8 0 0 1 488.7 770.1L388.3 870.8A156 156 0 0 1 277.3 916.7ZM558.3 635.6A156.4 156.4 0 0 1 447.2 589.8L428.8 571.2A20.8 20.8 0 0 1 458.3 541.7L476.8 560.2A116 116 0 0 0 558.6 593H558.6A116.1 116.1 0 0 0 640.5 560.2L841.6 359A115.5 115.5 0 0 0 841.6 195.3L804.7 158.4A116 116 0 0 0 722.9 125.5H722.9A115.9 115.9 0 0 0 641 158.4L540.2 259.1A20.8 20.8 0 0 1 511 259.1 20.8 20.8 0 0 1 511 230L611.5 129.2A155.9 155.9 0 0 1 722.6 83.3H722.6A156.1 156.1 0 0 1 833.7 129.2L870.6 166.1A157.1 157.1 0 0 1 870.6 388.3L669.5 589.4A156.3 156.3 0 0 1 558.3 635.6Z"></path></svg></a>Double footer columns</h3>
<p>If you must show more than one button in the <code>panel__footer</code> area be aware of the screen width constraints. On smaller screens the side variations don&#x27;t offer enough space for two or more buttons, so use either the <code>bottom</code> or the <code>full</code> panel variation in order to get enough horizontal space.</p>
<p>You can have up to two columns inside of the panel footer. In the example bellow we added some text and a call to action, each column is <code>--narrow</code> and they are aligned with space in between, which is the default footer alignment.</p>
<p class="hcr-text-10-8-1">This is how we achieved the panel footer layout in the &quot;double columns&quot; bellow:</p>

      <div class="code-block"><div class="code-block__code-example  "><div class="code-block__code-example-controls"><button type="button" class="hcr-btn-10-8-1 hcr-btn--square-10-8-1" aria-label="Copy code example"><span class="hci-icon" style="display:inline-block;width:20px;height:20px;vertical-align:middle;fill:currentColor"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="hci-svg-copy" role="img" style="display:block;max-width:100%"><path d="M13 8H5a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3v-8a3 3 0 0 0-3-3m1 11c0 .54-.46 1-1 1H5c-.54 0-1-.46-1-1v-8c0-.54.46-1 1-1h8c.54 0 1 .46 1 1zm8-14v8a3 3 0 0 1-3 3h-1v-2h1c.54 0 1-.46 1-1V5c0-.54-.46-1-1-1h-8c-.54 0-1 .46-1 1v1H8V5a3 3 0 0 1 3-3h8a3 3 0 0 1 3 3"></path></svg></span></button><textarea readonly="" aria-hidden="true" class="code-block__code-example-textarea">&lt;div class=&quot;flix-panel__footer&quot;&gt;
  &lt;div class=&quot;flix-panel__footer-column flix-panel__footer-column--narrow&quot;&gt;
    &lt;p class=&quot;flix-text&quot;&gt;
      0 of 1 seats reserved.
    &lt;/p&gt;
  &lt;/div&gt;
  &lt;div class=&quot;flix-panel__footer-column flix-panel__footer-column--narrow&quot;&gt;
    &lt;div class=&quot;flix-btn-group flix-btn-group--align-end&quot;&gt;
      &lt;button type=&quot;button&quot; class=&quot;flix-btn&quot;&gt;
        Close
      &lt;/button&gt;
      &lt;button type=&quot;button&quot; class=&quot;flix-btn flix-btn--primary&quot;&gt;
        Confirm
      &lt;/button&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</textarea></div><pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flix-panel__footer<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flix-panel__footer-column flix-panel__footer-column--narrow<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flix-text<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
      0 of 1 seats reserved.
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flix-panel__footer-column flix-panel__footer-column--narrow<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flix-btn-group flix-btn-group--align-end<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flix-btn<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
        Close
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flix-btn flix-btn--primary<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
        Confirm
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></code></pre></div></div>
      

      <div class="code-block"><div class="code-block__example"><button type="button" class="flix-btn flix-btn--primary" data-popup="double-columns-example">
  Double footer columns example
</button>

<div id="double-columns-example" class="flix-panel flix-panel--bottom" aria-labelledby="double-columns-example">
  <div class="flix-panel__body">
    <div class="flix-panel__header">
      <button type="button" aria-label="Navigate back" class="flix-panel__back flix-btn flix-btn--square flix-btn--link" data-closepopup="true">
        <flix-icon name="home" solid="" aria-hidden="true"></flix-icon>
      </button>
      <div id="double-columns-example" class="flix-panel__title">
        <h3 class="flix-h3 flix-h3--space-flush">
          Double Columns Example
        </h3>
      </div>
      <button type="button" class="flix-panel__close flix-btn flix-btn--square flix-btn--link" aria-label="Close panel" data-closepopup="true"></button>
    </div>
    <div class="flix-panel__content">
      <p class="flix-text">
        This panel slides from the bottom, this means it has enough space to display two columns and two calls to action even on mobile screens. Always be mindful of the space available for your content.
      </p>
    </div>
    <div class="flix-panel__footer">
      <div class="flix-panel__footer-column flix-panel__footer-column--narrow">
        <p class="flix-text">
          0 of 1 seats reserved.
        </p>
      </div>
      <div class="flix-panel__footer-column flix-panel__footer-column--narrow">
        <div class="flix-btn-group flix-btn-group--align-center">
          <button type="button" class="flix-btn" data-closepopup="true">
            Close
          </button>
          <button type="button" class="flix-btn flix-btn--primary">
            Confirm
          </button>
        </div>
      </div>
    </div>
  </div>
  <div class="flix-panel__overlay flix-overlay"></div>
</div></div><div class="code-block__code-example  "><div class="code-block__code-example-controls"><button type="button" class="hcr-btn-10-8-1 hcr-btn--square-10-8-1" aria-label="Copy code example"><span class="hci-icon" style="display:inline-block;width:20px;height:20px;vertical-align:middle;fill:currentColor"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="hci-svg-copy" role="img" style="display:block;max-width:100%"><path d="M13 8H5a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3v-8a3 3 0 0 0-3-3m1 11c0 .54-.46 1-1 1H5c-.54 0-1-.46-1-1v-8c0-.54.46-1 1-1h8c.54 0 1 .46 1 1zm8-14v8a3 3 0 0 1-3 3h-1v-2h1c.54 0 1-.46 1-1V5c0-.54-.46-1-1-1h-8c-.54 0-1 .46-1 1v1H8V5a3 3 0 0 1 3-3h8a3 3 0 0 1 3 3"></path></svg></span></button><textarea readonly="" aria-hidden="true" class="code-block__code-example-textarea">&lt;button type=&quot;button&quot; class=&quot;flix-btn flix-btn--primary&quot; data-popup=&quot;double-columns-example&quot;&gt;
  Double footer columns example
&lt;/button&gt;

&lt;div id=&quot;double-columns-example&quot; class=&quot;flix-panel flix-panel--bottom&quot; aria-labelledby=&quot;double-columns-example&quot;&gt;
  &lt;div class=&quot;flix-panel__body&quot;&gt;
    &lt;div class=&quot;flix-panel__header&quot;&gt;
      &lt;button type=&quot;button&quot; aria-label=&quot;Navigate back&quot; class=&quot;flix-panel__back flix-btn flix-btn--square flix-btn--link&quot; data-closepopup=&quot;true&quot;&gt;
        &lt;flix-icon name=&quot;home&quot; solid=&quot;&quot; aria-hidden=&quot;true&quot;&gt;&lt;/flix-icon&gt;
      &lt;/button&gt;
      &lt;div id=&quot;double-columns-example&quot; class=&quot;flix-panel__title&quot;&gt;
        &lt;h3 class=&quot;flix-h3 flix-h3--space-flush&quot;&gt;
          Double Columns Example
        &lt;/h3&gt;
      &lt;/div&gt;
      &lt;button type=&quot;button&quot; class=&quot;flix-panel__close flix-btn flix-btn--square flix-btn--link&quot; aria-label=&quot;Close panel&quot; data-closepopup=&quot;true&quot;&gt;&lt;/button&gt;
    &lt;/div&gt;
    &lt;div class=&quot;flix-panel__content&quot;&gt;
      &lt;p class=&quot;flix-text&quot;&gt;
        This panel slides from the bottom, this means it has enough space to display two columns and two calls to action even on mobile screens. Always be mindful of the space available for your content.
      &lt;/p&gt;
    &lt;/div&gt;
    &lt;div class=&quot;flix-panel__footer&quot;&gt;
      &lt;div class=&quot;flix-panel__footer-column flix-panel__footer-column--narrow&quot;&gt;
        &lt;p class=&quot;flix-text&quot;&gt;
          0 of 1 seats reserved.
        &lt;/p&gt;
      &lt;/div&gt;
      &lt;div class=&quot;flix-panel__footer-column flix-panel__footer-column--narrow&quot;&gt;
        &lt;div class=&quot;flix-btn-group flix-btn-group--align-center&quot;&gt;
          &lt;button type=&quot;button&quot; class=&quot;flix-btn&quot; data-closepopup=&quot;true&quot;&gt;
            Close
          &lt;/button&gt;
          &lt;button type=&quot;button&quot; class=&quot;flix-btn flix-btn--primary&quot;&gt;
            Confirm
          &lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class=&quot;flix-panel__overlay flix-overlay&quot;&gt;&lt;/div&gt;
&lt;/div&gt;</textarea></div><pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flix-btn flix-btn--primary<span class="token punctuation">"</span></span> <span class="token attr-name">data-popup</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>double-columns-example<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
  Double footer columns example
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">></span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>double-columns-example<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flix-panel flix-panel--bottom<span class="token punctuation">"</span></span> <span class="token attr-name">aria-labelledby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>double-columns-example<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flix-panel__body<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flix-panel__header<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Navigate back<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flix-panel__back flix-btn flix-btn--square flix-btn--link<span class="token punctuation">"</span></span> <span class="token attr-name">data-closepopup</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>true<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>flix-icon</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>home<span class="token punctuation">"</span></span> <span class="token attr-name">solid</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span> <span class="token attr-name">aria-hidden</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>true<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>flix-icon</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>double-columns-example<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flix-panel__title<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h3</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flix-h3 flix-h3--space-flush<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
          Double Columns Example
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h3</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flix-panel__close flix-btn flix-btn--square flix-btn--link<span class="token punctuation">"</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Close panel<span class="token punctuation">"</span></span> <span class="token attr-name">data-closepopup</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>true<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flix-panel__content<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flix-text<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
        This panel slides from the bottom, this means it has enough space to display two columns and two calls to action even on mobile screens. Always be mindful of the space available for your content.
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flix-panel__footer<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flix-panel__footer-column flix-panel__footer-column--narrow<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flix-text<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
          0 of 1 seats reserved.
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flix-panel__footer-column flix-panel__footer-column--narrow<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flix-btn-group flix-btn-group--align-center<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flix-btn<span class="token punctuation">"</span></span> <span class="token attr-name">data-closepopup</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>true<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
            Close
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">></span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flix-btn flix-btn--primary<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
            Confirm
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flix-panel__overlay flix-overlay<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></code></pre></div></div>
      
<h2 class="hcr-h2-10-8-1 toc-anchor" id="non-modal-panel" style="position:relative"><a class="toc-anchor-icon before" href="#non-modal-panel" aria-label="non modal panel permalink"><svg class="flix-svg-link" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1000 1000"><path d="M277.3 916.7A156.2 156.2 0 0 1 166.2 870.8L129.2 833.8A157.3 157.3 0 0 1 129.2 611.6L330.4 410.5A157.2 157.2 0 0 1 552.5 410.5L571 429A20.8 20.8 0 1 1 541.8 458.1L523.3 439.7A116 116 0 0 0 441.5 406.8H441.5A116 116 0 0 0 359.7 439.7L158.3 640.8A115.8 115.8 0 0 0 158.3 804.6L195.3 841.5A118.5 118.5 0 0 0 359 841.5L459.5 740.9A20.8 20.8 0 0 1 488.7 740.9H488.7A20.8 20.8 0 0 1 488.7 770.1L388.3 870.8A156 156 0 0 1 277.3 916.7ZM558.3 635.6A156.4 156.4 0 0 1 447.2 589.8L428.8 571.2A20.8 20.8 0 0 1 458.3 541.7L476.8 560.2A116 116 0 0 0 558.6 593H558.6A116.1 116.1 0 0 0 640.5 560.2L841.6 359A115.5 115.5 0 0 0 841.6 195.3L804.7 158.4A116 116 0 0 0 722.9 125.5H722.9A115.9 115.9 0 0 0 641 158.4L540.2 259.1A20.8 20.8 0 0 1 511 259.1 20.8 20.8 0 0 1 511 230L611.5 129.2A155.9 155.9 0 0 1 722.6 83.3H722.6A156.1 156.1 0 0 1 833.7 129.2L870.6 166.1A157.1 157.1 0 0 1 870.6 388.3L669.5 589.4A156.3 156.3 0 0 1 558.3 635.6Z"></path></svg></a>Non-modal panel</h2>
<p class="hcr-text-10-8-1">On non-modal panels users can still operate the application while the panel is open and scroll the page.</p>
<p class="hcr-text-10-8-1">To make a non-modal panel simply do not add the overlay element to the component, the plugin will then handle the proper aria attributes and will not create a tab trap for the component.</p>

      <div class="code-block"><div class="code-block__example"><button type="button" class="flix-btn flix-btn--primary" data-popup="non-modal-panel">
  Non-Modal Panel
</button>

<div id="non-modal-panel" class="flix-panel" hidden="" aria-labelledby="non-modal-panel-title">
  <div class="flix-panel__body">
    <div class="flix-panel__header">
      <div id="non-modal-panel-title" class="flix-panel__title flix-has-text-centered">
        <h3 class="flix-h3 flix-h3--space-flush-bottom">Non-Modal Panel Example</h3>
        <p class="flix-text flix-space-2-bottom">Without overlay</p>
      </div>
      <button type="button" class="flix-panel__close flix-btn flix-btn--square flix-btn--link" aria-label="Close panel" data-closepopup="true"></button>
    </div>
    <div class="flix-panel__content">
      <p class="flix-text">Users are free to interact with the elements in the page.</p>
    </div>
    <div class="flix-panel__footer">
      <button type="button" class="flix-btn flix-btn--primary flix-btn--block" data-closepopup="true">
        I understand
      </button>
    </div>
  </div>
</div></div><div class="code-block__code-example  "><div class="code-block__code-example-controls"><button type="button" class="hcr-btn-10-8-1 hcr-btn--square-10-8-1" aria-label="Copy code example"><span class="hci-icon" style="display:inline-block;width:20px;height:20px;vertical-align:middle;fill:currentColor"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="hci-svg-copy" role="img" style="display:block;max-width:100%"><path d="M13 8H5a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3v-8a3 3 0 0 0-3-3m1 11c0 .54-.46 1-1 1H5c-.54 0-1-.46-1-1v-8c0-.54.46-1 1-1h8c.54 0 1 .46 1 1zm8-14v8a3 3 0 0 1-3 3h-1v-2h1c.54 0 1-.46 1-1V5c0-.54-.46-1-1-1h-8c-.54 0-1 .46-1 1v1H8V5a3 3 0 0 1 3-3h8a3 3 0 0 1 3 3"></path></svg></span></button><textarea readonly="" aria-hidden="true" class="code-block__code-example-textarea">&lt;button type=&quot;button&quot; class=&quot;flix-btn flix-btn--primary&quot; data-popup=&quot;non-modal-panel&quot;&gt;
  Non-Modal Panel
&lt;/button&gt;

&lt;div id=&quot;non-modal-panel&quot; class=&quot;flix-panel&quot; hidden=&quot;&quot; aria-labelledby=&quot;non-modal-panel-title&quot;&gt;
  &lt;div class=&quot;flix-panel__body&quot;&gt;
    &lt;div class=&quot;flix-panel__header&quot;&gt;
      &lt;div id=&quot;non-modal-panel-title&quot; class=&quot;flix-panel__title flix-has-text-centered&quot;&gt;
        &lt;h3 class=&quot;flix-h3 flix-h3--space-flush-bottom&quot;&gt;Non-Modal Panel Example&lt;/h3&gt;
        &lt;p class=&quot;flix-text flix-space-2-bottom&quot;&gt;Without overlay&lt;/p&gt;
      &lt;/div&gt;
      &lt;button type=&quot;button&quot; class=&quot;flix-panel__close flix-btn flix-btn--square flix-btn--link&quot; aria-label=&quot;Close panel&quot; data-closepopup=&quot;true&quot;&gt;&lt;/button&gt;
    &lt;/div&gt;
    &lt;div class=&quot;flix-panel__content&quot;&gt;
      &lt;p class=&quot;flix-text&quot;&gt;Users are free to interact with the elements in the page.&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class=&quot;flix-panel__footer&quot;&gt;
      &lt;button type=&quot;button&quot; class=&quot;flix-btn flix-btn--primary flix-btn--block&quot; data-closepopup=&quot;true&quot;&gt;
        I understand
      &lt;/button&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</textarea></div><pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flix-btn flix-btn--primary<span class="token punctuation">"</span></span> <span class="token attr-name">data-popup</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>non-modal-panel<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
  Non-Modal Panel
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">></span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>non-modal-panel<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flix-panel<span class="token punctuation">"</span></span> <span class="token attr-name">hidden</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span> <span class="token attr-name">aria-labelledby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>non-modal-panel-title<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flix-panel__body<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flix-panel__header<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>non-modal-panel-title<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flix-panel__title flix-has-text-centered<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h3</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flix-h3 flix-h3--space-flush-bottom<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Non-Modal Panel Example<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h3</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flix-text flix-space-2-bottom<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Without overlay<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flix-panel__close flix-btn flix-btn--square flix-btn--link<span class="token punctuation">"</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Close panel<span class="token punctuation">"</span></span> <span class="token attr-name">data-closepopup</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>true<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flix-panel__content<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flix-text<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Users are free to interact with the elements in the page.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flix-panel__footer<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flix-btn flix-btn--primary flix-btn--block<span class="token punctuation">"</span></span> <span class="token attr-name">data-closepopup</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>true<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
        I understand
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></code></pre></div></div>
      
<details class="flix-accordion">
  <summary class="flix-accordion__title">
    <h2 class="flix-h2 flix-h2--space-flush">
      <flix-icon name="info" color="neutral" aria-hidden="true"></flix-icon> Making it work without the plugin
    </h2>
  </summary>
  <article class="flix-accordion__content flix-text">
    Modal panels require you to provide an overlay element that will cover the page and block the user from interacting with elements outside of the panel. You must implement a &quot;tab trap&quot; and also disable the window scroll when the panel is open.
<div class="gatsby-highlight" data-language="text"><pre class="language-text"><code class="language-text">- Add `role=&quot;dialog&quot;` and `aria-modal-&quot;true&quot;` to the panel element for accessibility;
- Add an `id` to the title and pass it as `aria-labelledby` value to the panel for proper accessibility;
- Add the `flix-overlay` element at the end of the panel;
- Adding `tabindex=&quot;0&quot;` to the content if it has a lot of content and can show a scroll bar to enable keyboard users to also scroll the content with arrow keys;

- **When a panel is opened:**
  - Move focus to the first element of the panel, usually the close button;
  - Create a &quot;tab trap&quot; so when users tab on the last element it returns focus to the first, and vice versa;
  - Block users from scrolling the page outside by adding `overflow: hidden;` CSS rule to the body element;
- **When the panel is closed:**
  - Allow users to close the panel by clicking the overlay or pressing &lt;kbd&gt;ESC&lt;/kbd&gt;;
  - Move focus back to the element that triggered the panel;
  - Remove the `overflow: hidden&#x27;` CSS rule from the body;

When a panel is **non-modal**, the following features should **not** be added:
- Do not add `aria-modal=&quot;true&quot;` to the panel, but do add the `role=&quot;dialog&quot;` and label it accordingly;
- The `flix-overlay` element is not needed to cover the page;
- A tab trap shouldn&#x27;t be created, but you are encouraged to add keyboard shortcuts to navigate in and out of the panel if needed, including setting the focus to the first interactive element when the panel is opened;
- You shouldn&#x27;t disable the page scroll with `overflow: hidden`.</code></pre></div>
  </article>
</details></div></div>
<div class="flix-panel" aria-labelledby="panel-title">
  <div class="flix-panel__body">
    <div class="flix-panel__header">
      <button class="flix-panel__back flix-btn flix-btn--square flix-btn--md flix-btn--link" aria-label="Navigate back">
        <flix-icon name="home" solid="" aria-hidden="true"></flix-icon>
      </button>
      <div id="panel-title" class="flix-panel__title flix-has-text-centered">
        <h3 class="flix-h3 flix-h3--space-flush">
          Title
        </h3>
        <strong class="flix-h4 flix-h4--space-flush">
          Subtitle
        </strong>
      </div>
      <button class="flix-panel__close flix-btn flix-btn--square flix-btn--md flix-btn--link" aria-label="Close panel"></button>
    </div>
// ... rest of the panel content
      

      <div class="code-block"><div class="code-block__example"><button type="button" class="flix-btn flix-btn--primary" data-popup="custom-header-example">
  Custom header example
</button>

<div id="custom-header-example" class="flix-panel flix-panel--left" aria-labelledby="custom-header-title">
  <div class="flix-panel__body">
    <div class="flix-panel__header">
      <button class="flix-panel__back flix-btn flix-btn--square flix-btn--md flix-btn--link" aria-label="Navigate back">
        <flix-icon name="home" solid="" aria-hidden="true"></flix-icon>
      </button>
      <div id="custom-header-title" class="flix-panel__title flix-has-text-centered">
        <h3 class="flix-h3 flix-h3--space-flush">
          High heading
        </h3>
        <strong class="flix-h4 flix-h4--space-flush">
          Sub heading
        </strong>
      </div>
      <button class="flix-panel__close flix-btn flix-btn--square flix-btn--md flix-btn--link" aria-label="Close panel" data-closepopup="true"></button>
    </div>
    <div class="flix-panel__content">
      <p class="flix-text">
        This panel slides from the left and has fixed narrow width.
      </p>
      <p class="flix-text">
        The panel header and footer are taller to show how they can increase in size based on their content.
      </p>
    </div>
    <div class="flix-panel__footer">
      <div class="flix-panel__footer-column">
        <div class="flix-btn-group flix-btn-group--vertical">
          <button class="flix-btn flix-btn--block" data-closepopup="true">Close</button>
          <button class="flix-btn flix-btn--block flix-btn--primary">Confirm</button>
        </div>
      </div>
    </div>
  </div>
  <div class="flix-panel__overlay flix-overlay"></div>
</div></div><div class="code-block__code-example  "><div class="code-block__code-example-controls"><button type="button" class="hcr-btn-10-8-1 hcr-btn--square-10-8-1" aria-label="Copy code example"><span class="hci-icon" style="display:inline-block;width:20px;height:20px;vertical-align:middle;fill:currentColor"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="hci-svg-copy" role="img" style="display:block;max-width:100%"><path d="M13 8H5a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3v-8a3 3 0 0 0-3-3m1 11c0 .54-.46 1-1 1H5c-.54 0-1-.46-1-1v-8c0-.54.46-1 1-1h8c.54 0 1 .46 1 1zm8-14v8a3 3 0 0 1-3 3h-1v-2h1c.54 0 1-.46 1-1V5c0-.54-.46-1-1-1h-8c-.54 0-1 .46-1 1v1H8V5a3 3 0 0 1 3-3h8a3 3 0 0 1 3 3"></path></svg></span></button><textarea readonly="" aria-hidden="true" class="code-block__code-example-textarea">&lt;button type=&quot;button&quot; class=&quot;flix-btn flix-btn--primary&quot; data-popup=&quot;custom-header-example&quot;&gt;
  Custom header example
&lt;/button&gt;

&lt;div id=&quot;custom-header-example&quot; class=&quot;flix-panel flix-panel--left&quot; aria-labelledby=&quot;custom-header-title&quot;&gt;
  &lt;div class=&quot;flix-panel__body&quot;&gt;
    &lt;div class=&quot;flix-panel__header&quot;&gt;
      &lt;button class=&quot;flix-panel__back flix-btn flix-btn--square flix-btn--md flix-btn--link&quot; aria-label=&quot;Navigate back&quot;&gt;
        &lt;flix-icon name=&quot;home&quot; solid=&quot;&quot; aria-hidden=&quot;true&quot;&gt;&lt;/flix-icon&gt;
      &lt;/button&gt;
      &lt;div id=&quot;custom-header-title&quot; class=&quot;flix-panel__title flix-has-text-centered&quot;&gt;
        &lt;h3 class=&quot;flix-h3 flix-h3--space-flush&quot;&gt;
          High heading
        &lt;/h3&gt;
        &lt;strong class=&quot;flix-h4 flix-h4--space-flush&quot;&gt;
          Sub heading
        &lt;/strong&gt;
      &lt;/div&gt;
      &lt;button class=&quot;flix-panel__close flix-btn flix-btn--square flix-btn--md flix-btn--link&quot; aria-label=&quot;Close panel&quot; data-closepopup=&quot;true&quot;&gt;&lt;/button&gt;
    &lt;/div&gt;
    &lt;div class=&quot;flix-panel__content&quot;&gt;
      &lt;p class=&quot;flix-text&quot;&gt;
        This panel slides from the left and has fixed narrow width.
      &lt;/p&gt;
      &lt;p class=&quot;flix-text&quot;&gt;
        The panel header and footer are taller to show how they can increase in size based on their content.
      &lt;/p&gt;
    &lt;/div&gt;
    &lt;div class=&quot;flix-panel__footer&quot;&gt;
      &lt;div class=&quot;flix-panel__footer-column&quot;&gt;
        &lt;div class=&quot;flix-btn-group flix-btn-group--vertical&quot;&gt;
          &lt;button class=&quot;flix-btn flix-btn--block&quot; data-closepopup=&quot;true&quot;&gt;Close&lt;/button&gt;
          &lt;button class=&quot;flix-btn flix-btn--block flix-btn--primary&quot;&gt;Confirm&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class=&quot;flix-panel__overlay flix-overlay&quot;&gt;&lt;/div&gt;
&lt;/div&gt;</textarea></div><pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flix-btn flix-btn--primary<span class="token punctuation">"</span></span> <span class="token attr-name">data-popup</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>custom-header-example<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
  Custom header example
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">></span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>custom-header-example<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flix-panel flix-panel--left<span class="token punctuation">"</span></span> <span class="token attr-name">aria-labelledby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>custom-header-title<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flix-panel__body<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flix-panel__header<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flix-panel__back flix-btn flix-btn--square flix-btn--md flix-btn--link<span class="token punctuation">"</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Navigate back<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>flix-icon</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>home<span class="token punctuation">"</span></span> <span class="token attr-name">solid</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span> <span class="token attr-name">aria-hidden</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>true<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>flix-icon</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>custom-header-title<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flix-panel__title flix-has-text-centered<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h3</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flix-h3 flix-h3--space-flush<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
          High heading
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h3</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>strong</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flix-h4 flix-h4--space-flush<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
          Sub heading
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>strong</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flix-panel__close flix-btn flix-btn--square flix-btn--md flix-btn--link<span class="token punctuation">"</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Close panel<span class="token punctuation">"</span></span> <span class="token attr-name">data-closepopup</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>true<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flix-panel__content<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flix-text<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
        This panel slides from the left and has fixed narrow width.
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flix-text<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
        The panel header and footer are taller to show how they can increase in size based on their content.
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flix-panel__footer<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flix-panel__footer-column<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flix-btn-group flix-btn-group--vertical<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flix-btn flix-btn--block<span class="token punctuation">"</span></span> <span class="token attr-name">data-closepopup</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>true<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Close<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">></span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flix-btn flix-btn--block flix-btn--primary<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Confirm<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flix-panel__overlay flix-overlay<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></code></pre></div></div>
      
<h2 class="hcr-h2-10-8-1 toc-anchor" id="footer-modifiers" style="position:relative"><a class="toc-anchor-icon before" href="#footer-modifiers" aria-label="footer modifiers permalink"><svg class="flix-svg-link" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1000 1000"><path d="M277.3 916.7A156.2 156.2 0 0 1 166.2 870.8L129.2 833.8A157.3 157.3 0 0 1 129.2 611.6L330.4 410.5A157.2 157.2 0 0 1 552.5 410.5L571 429A20.8 20.8 0 1 1 541.8 458.1L523.3 439.7A116 116 0 0 0 441.5 406.8H441.5A116 116 0 0 0 359.7 439.7L158.3 640.8A115.8 115.8 0 0 0 158.3 804.6L195.3 841.5A118.5 118.5 0 0 0 359 841.5L459.5 740.9A20.8 20.8 0 0 1 488.7 740.9H488.7A20.8 20.8 0 0 1 488.7 770.1L388.3 870.8A156 156 0 0 1 277.3 916.7ZM558.3 635.6A156.4 156.4 0 0 1 447.2 589.8L428.8 571.2A20.8 20.8 0 0 1 458.3 541.7L476.8 560.2A116 116 0 0 0 558.6 593H558.6A116.1 116.1 0 0 0 640.5 560.2L841.6 359A115.5 115.5 0 0 0 841.6 195.3L804.7 158.4A116 116 0 0 0 722.9 125.5H722.9A115.9 115.9 0 0 0 641 158.4L540.2 259.1A20.8 20.8 0 0 1 511 259.1 20.8 20.8 0 0 1 511 230L611.5 129.2A155.9 155.9 0 0 1 722.6 83.3H722.6A156.1 156.1 0 0 1 833.7 129.2L870.6 166.1A157.1 157.1 0 0 1 870.6 388.3L669.5 589.4A156.3 156.3 0 0 1 558.3 635.6Z"></path></svg></a>Footer modifiers</h2>
<p class="hcr-text-10-8-1">The footer container will initially justify the columns with equal space between them, ans have the columns fill the space available to them.</p>
<p class="hcr-text-10-8-1">If you want to change this behavior you can use the following modifiers:</p>
<dl class="flix-list-description">
  <dt class="flix-list-description__term"><code>flix-panel__footer--justify-start</code></dt>
  <dt class="flix-list-description__term"><code>flix-panel__footer--justify-center</code></dt>
  <dt class="flix-list-description__term"><code>flix-panel__footer--justify-end</code></dt>
  <dd class="flix-list-description__details">When applied to the footer will control where the coolumns will be placed.</dd>
  <dt class="flix-list-description__term"><code>flix-panel__footer-column--narrow</code></dt>
  <dd class="flix-list-description__details">When applied to a footer column makes that column size content aware.</dd>
</dl>
<p class="hcr-text-10-8-1">This is how we achieve the &quot;Button to the right&quot; layout on the example bellow:</p>

      <div class="code-block"><div class="code-block__code-example  "><div class="code-block__code-example-controls"><button type="button" class="hcr-btn-10-8-1 hcr-btn--square-10-8-1" aria-label="Copy code example"><span class="hci-icon" style="display:inline-block;width:20px;height:20px;vertical-align:middle;fill:currentColor"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="hci-svg-copy" role="img" style="display:block;max-width:100%"><path d="M13 8H5a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3v-8a3 3 0 0 0-3-3m1 11c0 .54-.46 1-1 1H5c-.54 0-1-.46-1-1v-8c0-.54.46-1 1-1h8c.54 0 1 .46 1 1zm8-14v8a3 3 0 0 1-3 3h-1v-2h1c.54 0 1-.46 1-1V5c0-.54-.46-1-1-1h-8c-.54 0-1 .46-1 1v1H8V5a3 3 0 0 1 3-3h8a3 3 0 0 1 3 3"></path></svg></span></button><textarea readonly="" aria-hidden="true" class="code-block__code-example-textarea">&lt;div class=&quot;flix-panel__footer flix-panel__footer--justify-end&quot;&gt;
  &lt;div class=&quot;flix-panel__footer-column flix-panel__footer-column--narrow&quot;&gt;
    &lt;button type=&quot;button&quot; class=&quot;flix-btn flix-btn--primary&quot;&gt;Confirm&lt;/button&gt;
  &lt;/div&gt;
&lt;/div&gt;</textarea></div><pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flix-panel__footer flix-panel__footer--justify-end<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flix-panel__footer-column flix-panel__footer-column--narrow<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flix-btn flix-btn--primary<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Confirm<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></code></pre></div></div>
      

      <div class="code-block"><div class="code-block__example"><button type="button" class="flix-btn flix-btn--primary" data-popup="footer-example-panel">
  Button to the right example
</button>

<div id="footer-example-panel" class="flix-panel flix-panel--bottom" aria-labelledby="button-right-example-title">
  <div class="flix-panel__body">
    <div class="flix-panel__header">
      <div id="button-right-example-title" class="flix-panel__title">
        <h3 class="flix-h3 flix-h3--space-flush">
          Button to the Right Example
        </h3>
      </div>
      <button type="button" class="flix-panel__close flix-btn flix-btn--square flix-btn--link" aria-label="Close panel" data-closepopup="true"></button>
    </div>
    <div class="flix-panel__content">
      <p class="flix-text">
        You can place the call to action buttons in the corners by creating one narrow column and justifying the footer according to your own needs.
      </p>
    </div>
    <div class="flix-panel__footer flix-panel__footer--justify-end">
      <div class="flix-panel__footer-column flix-panel__footer-column--narrow">
        <button type="button" class="flix-btn flix-btn--primary" data-closepopup="true">
          Confirm
        </button>
      </div>
    </div>
  </div>
  <div class="flix-panel__overlay flix-overlay"></div>
</div></div><div class="code-block__code-example  "><div class="code-block__code-example-controls"><button type="button" class="hcr-btn-10-8-1 hcr-btn--square-10-8-1" aria-label="Copy code example"><span class="hci-icon" style="display:inline-block;width:20px;height:20px;vertical-align:middle;fill:currentColor"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="hci-svg-copy" role="img" style="display:block;max-width:100%"><path d="M13 8H5a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3v-8a3 3 0 0 0-3-3m1 11c0 .54-.46 1-1 1H5c-.54 0-1-.46-1-1v-8c0-.54.46-1 1-1h8c.54 0 1 .46 1 1zm8-14v8a3 3 0 0 1-3 3h-1v-2h1c.54 0 1-.46 1-1V5c0-.54-.46-1-1-1h-8c-.54 0-1 .46-1 1v1H8V5a3 3 0 0 1 3-3h8a3 3 0 0 1 3 3"></path></svg></span></button><textarea readonly="" aria-hidden="true" class="code-block__code-example-textarea">&lt;button type=&quot;button&quot; class=&quot;flix-btn flix-btn--primary&quot; data-popup=&quot;footer-example-panel&quot;&gt;
  Button to the right example
&lt;/button&gt;

&lt;div id=&quot;footer-example-panel&quot; class=&quot;flix-panel flix-panel--bottom&quot; aria-labelledby=&quot;button-right-example-title&quot;&gt;
  &lt;div class=&quot;flix-panel__body&quot;&gt;
    &lt;div class=&quot;flix-panel__header&quot;&gt;
      &lt;div id=&quot;button-right-example-title&quot; class=&quot;flix-panel__title&quot;&gt;
        &lt;h3 class=&quot;flix-h3 flix-h3--space-flush&quot;&gt;
          Button to the Right Example
        &lt;/h3&gt;
      &lt;/div&gt;
      &lt;button type=&quot;button&quot; class=&quot;flix-panel__close flix-btn flix-btn--square flix-btn--link&quot; aria-label=&quot;Close panel&quot; data-closepopup=&quot;true&quot;&gt;&lt;/button&gt;
    &lt;/div&gt;
    &lt;div class=&quot;flix-panel__content&quot;&gt;
      &lt;p class=&quot;flix-text&quot;&gt;
        You can place the call to action buttons in the corners by creating one narrow column and justifying the footer according to your own needs.
      &lt;/p&gt;
    &lt;/div&gt;
    &lt;div class=&quot;flix-panel__footer flix-panel__footer--justify-end&quot;&gt;
      &lt;div class=&quot;flix-panel__footer-column flix-panel__footer-column--narrow&quot;&gt;
        &lt;button type=&quot;button&quot; class=&quot;flix-btn flix-btn--primary&quot; data-closepopup=&quot;true&quot;&gt;
          Confirm
        &lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class=&quot;flix-panel__overlay flix-overlay&quot;&gt;&lt;/div&gt;
&lt;/div&gt;</textarea></div><pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flix-btn flix-btn--primary<span class="token punctuation">"</span></span> <span class="token attr-name">data-popup</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>footer-example-panel<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
  Button to the right example
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">></span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>footer-example-panel<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flix-panel flix-panel--bottom<span class="token punctuation">"</span></span> <span class="token attr-name">aria-labelledby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button-right-example-title<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flix-panel__body<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flix-panel__header<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button-right-example-title<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flix-panel__title<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h3</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flix-h3 flix-h3--space-flush<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
          Button to the Right Example
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h3</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flix-panel__close flix-btn flix-btn--square flix-btn--link<span class="token punctuation">"</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Close panel<span class="token punctuation">"</span></span> <span class="token attr-name">data-closepopup</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>true<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flix-panel__content<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flix-text<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
        You can place the call to action buttons in the corners by creating one narrow column and justifying the footer according to your own needs.
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flix-panel__footer flix-panel__footer--justify-end<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flix-panel__footer-column flix-panel__footer-column--narrow<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flix-btn flix-btn--primary<span class="token punctuation">"</span></span> <span class="token attr-name">data-closepopup</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>true<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
          Confirm
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flix-panel__overlay flix-overlay<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></code></pre></div></div>
      
<h3 class="hcr-h3-10-8-1 toc-anchor" id="double-footer-columns" style="position:relative"><a class="toc-anchor-icon before" href="#double-footer-columns" aria-label="double footer columns permalink"><svg class="flix-svg-link" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1000 1000"><path d="M277.3 916.7A156.2 156.2 0 0 1 166.2 870.8L129.2 833.8A157.3 157.3 0 0 1 129.2 611.6L330.4 410.5A157.2 157.2 0 0 1 552.5 410.5L571 429A20.8 20.8 0 1 1 541.8 458.1L523.3 439.7A116 116 0 0 0 441.5 406.8H441.5A116 116 0 0 0 359.7 439.7L158.3 640.8A115.8 115.8 0 0 0 158.3 804.6L195.3 841.5A118.5 118.5 0 0 0 359 841.5L459.5 740.9A20.8 20.8 0 0 1 488.7 740.9H488.7A20.8 20.8 0 0 1 488.7 770.1L388.3 870.8A156 156 0 0 1 277.3 916.7ZM558.3 635.6A156.4 156.4 0 0 1 447.2 589.8L428.8 571.2A20.8 20.8 0 0 1 458.3 541.7L476.8 560.2A116 116 0 0 0 558.6 593H558.6A116.1 116.1 0 0 0 640.5 560.2L841.6 359A115.5 115.5 0 0 0 841.6 195.3L804.7 158.4A116 116 0 0 0 722.9 125.5H722.9A115.9 115.9 0 0 0 641 158.4L540.2 259.1A20.8 20.8 0 0 1 511 259.1 20.8 20.8 0 0 1 511 230L611.5 129.2A155.9 155.9 0 0 1 722.6 83.3H722.6A156.1 156.1 0 0 1 833.7 129.2L870.6 166.1A157.1 157.1 0 0 1 870.6 388.3L669.5 589.4A156.3 156.3 0 0 1 558.3 635.6Z"></path></svg></a>Double footer columns</h3>
<p>If you must show more than one button in the <code>panel__footer</code> area be aware of the screen width constraints. On smaller screens the side variations don&#x27;t offer enough space for two or more buttons, so use either the <code>bottom</code> or the <code>full</code> panel variation in order to get enough horizontal space.</p>
<p>You can have up to two columns inside of the panel footer. In the example bellow we added some text and a call to action, each column is <code>--narrow</code> and they are aligned with space in between, which is the default footer alignment.</p>
<p class="hcr-text-10-8-1">This is how we achieved the panel footer layout in the &quot;double columns&quot; bellow:</p>

      <div class="code-block"><div class="code-block__code-example  "><div class="code-block__code-example-controls"><button type="button" class="hcr-btn-10-8-1 hcr-btn--square-10-8-1" aria-label="Copy code example"><span class="hci-icon" style="display:inline-block;width:20px;height:20px;vertical-align:middle;fill:currentColor"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="hci-svg-copy" role="img" style="display:block;max-width:100%"><path d="M13 8H5a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3v-8a3 3 0 0 0-3-3m1 11c0 .54-.46 1-1 1H5c-.54 0-1-.46-1-1v-8c0-.54.46-1 1-1h8c.54 0 1 .46 1 1zm8-14v8a3 3 0 0 1-3 3h-1v-2h1c.54 0 1-.46 1-1V5c0-.54-.46-1-1-1h-8c-.54 0-1 .46-1 1v1H8V5a3 3 0 0 1 3-3h8a3 3 0 0 1 3 3"></path></svg></span></button><textarea readonly="" aria-hidden="true" class="code-block__code-example-textarea">&lt;div class=&quot;flix-panel__footer&quot;&gt;
  &lt;div class=&quot;flix-panel__footer-column flix-panel__footer-column--narrow&quot;&gt;
    &lt;p class=&quot;flix-text&quot;&gt;
      0 of 1 seats reserved.
    &lt;/p&gt;
  &lt;/div&gt;
  &lt;div class=&quot;flix-panel__footer-column flix-panel__footer-column--narrow&quot;&gt;
    &lt;div class=&quot;flix-btn-group flix-btn-group--align-end&quot;&gt;
      &lt;button type=&quot;button&quot; class=&quot;flix-btn&quot;&gt;
        Close
      &lt;/button&gt;
      &lt;button type=&quot;button&quot; class=&quot;flix-btn flix-btn--primary&quot;&gt;
        Confirm
      &lt;/button&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</textarea></div><pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flix-panel__footer<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flix-panel__footer-column flix-panel__footer-column--narrow<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flix-text<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
      0 of 1 seats reserved.
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flix-panel__footer-column flix-panel__footer-column--narrow<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flix-btn-group flix-btn-group--align-end<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flix-btn<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
        Close
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flix-btn flix-btn--primary<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
        Confirm
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></code></pre></div></div>
      

      <div class="code-block"><div class="code-block__example"><button type="button" class="flix-btn flix-btn--primary" data-popup="double-columns-example">
  Double footer columns example
</button>

<div id="double-columns-example" class="flix-panel flix-panel--bottom" aria-labelledby="double-columns-example">
  <div class="flix-panel__body">
    <div class="flix-panel__header">
      <button type="button" aria-label="Navigate back" class="flix-panel__back flix-btn flix-btn--square flix-btn--link" data-closepopup="true">
        <flix-icon name="home" solid="" aria-hidden="true"></flix-icon>
      </button>
      <div id="double-columns-example" class="flix-panel__title">
        <h3 class="flix-h3 flix-h3--space-flush">
          Double Columns Example
        </h3>
      </div>
      <button type="button" class="flix-panel__close flix-btn flix-btn--square flix-btn--link" aria-label="Close panel" data-closepopup="true"></button>
    </div>
    <div class="flix-panel__content">
      <p class="flix-text">
        This panel slides from the bottom, this means it has enough space to display two columns and two calls to action even on mobile screens. Always be mindful of the space available for your content.
      </p>
    </div>
    <div class="flix-panel__footer">
      <div class="flix-panel__footer-column flix-panel__footer-column--narrow">
        <p class="flix-text">
          0 of 1 seats reserved.
        </p>
      </div>
      <div class="flix-panel__footer-column flix-panel__footer-column--narrow">
        <div class="flix-btn-group flix-btn-group--align-center">
          <button type="button" class="flix-btn" data-closepopup="true">
            Close
          </button>
          <button type="button" class="flix-btn flix-btn--primary">
            Confirm
          </button>
        </div>
      </div>
    </div>
  </div>
  <div class="flix-panel__overlay flix-overlay"></div>
</div></div><div class="code-block__code-example  "><div class="code-block__code-example-controls"><button type="button" class="hcr-btn-10-8-1 hcr-btn--square-10-8-1" aria-label="Copy code example"><span class="hci-icon" style="display:inline-block;width:20px;height:20px;vertical-align:middle;fill:currentColor"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="hci-svg-copy" role="img" style="display:block;max-width:100%"><path d="M13 8H5a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3v-8a3 3 0 0 0-3-3m1 11c0 .54-.46 1-1 1H5c-.54 0-1-.46-1-1v-8c0-.54.46-1 1-1h8c.54 0 1 .46 1 1zm8-14v8a3 3 0 0 1-3 3h-1v-2h1c.54 0 1-.46 1-1V5c0-.54-.46-1-1-1h-8c-.54 0-1 .46-1 1v1H8V5a3 3 0 0 1 3-3h8a3 3 0 0 1 3 3"></path></svg></span></button><textarea readonly="" aria-hidden="true" class="code-block__code-example-textarea">&lt;button type=&quot;button&quot; class=&quot;flix-btn flix-btn--primary&quot; data-popup=&quot;double-columns-example&quot;&gt;
  Double footer columns example
&lt;/button&gt;

&lt;div id=&quot;double-columns-example&quot; class=&quot;flix-panel flix-panel--bottom&quot; aria-labelledby=&quot;double-columns-example&quot;&gt;
  &lt;div class=&quot;flix-panel__body&quot;&gt;
    &lt;div class=&quot;flix-panel__header&quot;&gt;
      &lt;button type=&quot;button&quot; aria-label=&quot;Navigate back&quot; class=&quot;flix-panel__back flix-btn flix-btn--square flix-btn--link&quot; data-closepopup=&quot;true&quot;&gt;
        &lt;flix-icon name=&quot;home&quot; solid=&quot;&quot; aria-hidden=&quot;true&quot;&gt;&lt;/flix-icon&gt;
      &lt;/button&gt;
      &lt;div id=&quot;double-columns-example&quot; class=&quot;flix-panel__title&quot;&gt;
        &lt;h3 class=&quot;flix-h3 flix-h3--space-flush&quot;&gt;
          Double Columns Example
        &lt;/h3&gt;
      &lt;/div&gt;
      &lt;button type=&quot;button&quot; class=&quot;flix-panel__close flix-btn flix-btn--square flix-btn--link&quot; aria-label=&quot;Close panel&quot; data-closepopup=&quot;true&quot;&gt;&lt;/button&gt;
    &lt;/div&gt;
    &lt;div class=&quot;flix-panel__content&quot;&gt;
      &lt;p class=&quot;flix-text&quot;&gt;
        This panel slides from the bottom, this means it has enough space to display two columns and two calls to action even on mobile screens. Always be mindful of the space available for your content.
      &lt;/p&gt;
    &lt;/div&gt;
    &lt;div class=&quot;flix-panel__footer&quot;&gt;
      &lt;div class=&quot;flix-panel__footer-column flix-panel__footer-column--narrow&quot;&gt;
        &lt;p class=&quot;flix-text&quot;&gt;
          0 of 1 seats reserved.
        &lt;/p&gt;
      &lt;/div&gt;
      &lt;div class=&quot;flix-panel__footer-column flix-panel__footer-column--narrow&quot;&gt;
        &lt;div class=&quot;flix-btn-group flix-btn-group--align-center&quot;&gt;
          &lt;button type=&quot;button&quot; class=&quot;flix-btn&quot; data-closepopup=&quot;true&quot;&gt;
            Close
          &lt;/button&gt;
          &lt;button type=&quot;button&quot; class=&quot;flix-btn flix-btn--primary&quot;&gt;
            Confirm
          &lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class=&quot;flix-panel__overlay flix-overlay&quot;&gt;&lt;/div&gt;
&lt;/div&gt;</textarea></div><pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flix-btn flix-btn--primary<span class="token punctuation">"</span></span> <span class="token attr-name">data-popup</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>double-columns-example<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
  Double footer columns example
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">></span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>double-columns-example<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flix-panel flix-panel--bottom<span class="token punctuation">"</span></span> <span class="token attr-name">aria-labelledby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>double-columns-example<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flix-panel__body<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flix-panel__header<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Navigate back<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flix-panel__back flix-btn flix-btn--square flix-btn--link<span class="token punctuation">"</span></span> <span class="token attr-name">data-closepopup</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>true<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>flix-icon</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>home<span class="token punctuation">"</span></span> <span class="token attr-name">solid</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span> <span class="token attr-name">aria-hidden</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>true<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>flix-icon</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>double-columns-example<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flix-panel__title<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h3</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flix-h3 flix-h3--space-flush<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
          Double Columns Example
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h3</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flix-panel__close flix-btn flix-btn--square flix-btn--link<span class="token punctuation">"</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Close panel<span class="token punctuation">"</span></span> <span class="token attr-name">data-closepopup</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>true<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flix-panel__content<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flix-text<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
        This panel slides from the bottom, this means it has enough space to display two columns and two calls to action even on mobile screens. Always be mindful of the space available for your content.
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flix-panel__footer<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flix-panel__footer-column flix-panel__footer-column--narrow<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flix-text<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
          0 of 1 seats reserved.
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flix-panel__footer-column flix-panel__footer-column--narrow<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flix-btn-group flix-btn-group--align-center<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flix-btn<span class="token punctuation">"</span></span> <span class="token attr-name">data-closepopup</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>true<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
            Close
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">></span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flix-btn flix-btn--primary<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
            Confirm
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flix-panel__overlay flix-overlay<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></code></pre></div></div>
      
<h2 class="hcr-h2-10-8-1 toc-anchor" id="non-modal-panel" style="position:relative"><a class="toc-anchor-icon before" href="#non-modal-panel" aria-label="non modal panel permalink"><svg class="flix-svg-link" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1000 1000"><path d="M277.3 916.7A156.2 156.2 0 0 1 166.2 870.8L129.2 833.8A157.3 157.3 0 0 1 129.2 611.6L330.4 410.5A157.2 157.2 0 0 1 552.5 410.5L571 429A20.8 20.8 0 1 1 541.8 458.1L523.3 439.7A116 116 0 0 0 441.5 406.8H441.5A116 116 0 0 0 359.7 439.7L158.3 640.8A115.8 115.8 0 0 0 158.3 804.6L195.3 841.5A118.5 118.5 0 0 0 359 841.5L459.5 740.9A20.8 20.8 0 0 1 488.7 740.9H488.7A20.8 20.8 0 0 1 488.7 770.1L388.3 870.8A156 156 0 0 1 277.3 916.7ZM558.3 635.6A156.4 156.4 0 0 1 447.2 589.8L428.8 571.2A20.8 20.8 0 0 1 458.3 541.7L476.8 560.2A116 116 0 0 0 558.6 593H558.6A116.1 116.1 0 0 0 640.5 560.2L841.6 359A115.5 115.5 0 0 0 841.6 195.3L804.7 158.4A116 116 0 0 0 722.9 125.5H722.9A115.9 115.9 0 0 0 641 158.4L540.2 259.1A20.8 20.8 0 0 1 511 259.1 20.8 20.8 0 0 1 511 230L611.5 129.2A155.9 155.9 0 0 1 722.6 83.3H722.6A156.1 156.1 0 0 1 833.7 129.2L870.6 166.1A157.1 157.1 0 0 1 870.6 388.3L669.5 589.4A156.3 156.3 0 0 1 558.3 635.6Z"></path></svg></a>Non-modal panel</h2>
<p class="hcr-text-10-8-1">On non-modal panels users can still operate the application while the panel is open and scroll the page.</p>
<p class="hcr-text-10-8-1">To make a non-modal panel simply do not add the overlay element to the component, the plugin will then handle the proper aria attributes and will not create a tab trap for the component.</p>

      <div class="code-block"><div class="code-block__example"><button type="button" class="flix-btn flix-btn--primary" data-popup="non-modal-panel">
  Non-Modal Panel
</button>

<div id="non-modal-panel" class="flix-panel" hidden="" aria-labelledby="non-modal-panel-title">
  <div class="flix-panel__body">
    <div class="flix-panel__header">
      <div id="non-modal-panel-title" class="flix-panel__title flix-has-text-centered">
        <h3 class="flix-h3 flix-h3--space-flush-bottom">Non-Modal Panel Example</h3>
        <p class="flix-text flix-space-2-bottom">Without overlay</p>
      </div>
      <button type="button" class="flix-panel__close flix-btn flix-btn--square flix-btn--link" aria-label="Close panel" data-closepopup="true"></button>
    </div>
    <div class="flix-panel__content">
      <p class="flix-text">Users are free to interact with the elements in the page.</p>
    </div>
    <div class="flix-panel__footer">
      <button type="button" class="flix-btn flix-btn--primary flix-btn--block" data-closepopup="true">
        I understand
      </button>
    </div>
  </div>
</div></div><div class="code-block__code-example  "><div class="code-block__code-example-controls"><button type="button" class="hcr-btn-10-8-1 hcr-btn--square-10-8-1" aria-label="Copy code example"><span class="hci-icon" style="display:inline-block;width:20px;height:20px;vertical-align:middle;fill:currentColor"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="hci-svg-copy" role="img" style="display:block;max-width:100%"><path d="M13 8H5a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3v-8a3 3 0 0 0-3-3m1 11c0 .54-.46 1-1 1H5c-.54 0-1-.46-1-1v-8c0-.54.46-1 1-1h8c.54 0 1 .46 1 1zm8-14v8a3 3 0 0 1-3 3h-1v-2h1c.54 0 1-.46 1-1V5c0-.54-.46-1-1-1h-8c-.54 0-1 .46-1 1v1H8V5a3 3 0 0 1 3-3h8a3 3 0 0 1 3 3"></path></svg></span></button><textarea readonly="" aria-hidden="true" class="code-block__code-example-textarea">&lt;button type=&quot;button&quot; class=&quot;flix-btn flix-btn--primary&quot; data-popup=&quot;non-modal-panel&quot;&gt;
  Non-Modal Panel
&lt;/button&gt;

&lt;div id=&quot;non-modal-panel&quot; class=&quot;flix-panel&quot; hidden=&quot;&quot; aria-labelledby=&quot;non-modal-panel-title&quot;&gt;
  &lt;div class=&quot;flix-panel__body&quot;&gt;
    &lt;div class=&quot;flix-panel__header&quot;&gt;
      &lt;div id=&quot;non-modal-panel-title&quot; class=&quot;flix-panel__title flix-has-text-centered&quot;&gt;
        &lt;h3 class=&quot;flix-h3 flix-h3--space-flush-bottom&quot;&gt;Non-Modal Panel Example&lt;/h3&gt;
        &lt;p class=&quot;flix-text flix-space-2-bottom&quot;&gt;Without overlay&lt;/p&gt;
      &lt;/div&gt;
      &lt;button type=&quot;button&quot; class=&quot;flix-panel__close flix-btn flix-btn--square flix-btn--link&quot; aria-label=&quot;Close panel&quot; data-closepopup=&quot;true&quot;&gt;&lt;/button&gt;
    &lt;/div&gt;
    &lt;div class=&quot;flix-panel__content&quot;&gt;
      &lt;p class=&quot;flix-text&quot;&gt;Users are free to interact with the elements in the page.&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class=&quot;flix-panel__footer&quot;&gt;
      &lt;button type=&quot;button&quot; class=&quot;flix-btn flix-btn--primary flix-btn--block&quot; data-closepopup=&quot;true&quot;&gt;
        I understand
      &lt;/button&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</textarea></div><pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flix-btn flix-btn--primary<span class="token punctuation">"</span></span> <span class="token attr-name">data-popup</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>non-modal-panel<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
  Non-Modal Panel
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">></span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>non-modal-panel<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flix-panel<span class="token punctuation">"</span></span> <span class="token attr-name">hidden</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span> <span class="token attr-name">aria-labelledby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>non-modal-panel-title<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flix-panel__body<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flix-panel__header<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>non-modal-panel-title<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flix-panel__title flix-has-text-centered<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h3</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flix-h3 flix-h3--space-flush-bottom<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Non-Modal Panel Example<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h3</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flix-text flix-space-2-bottom<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Without overlay<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flix-panel__close flix-btn flix-btn--square flix-btn--link<span class="token punctuation">"</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Close panel<span class="token punctuation">"</span></span> <span class="token attr-name">data-closepopup</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>true<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flix-panel__content<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flix-text<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Users are free to interact with the elements in the page.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flix-panel__footer<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flix-btn flix-btn--primary flix-btn--block<span class="token punctuation">"</span></span> <span class="token attr-name">data-closepopup</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>true<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
        I understand
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></code></pre></div></div>
      
<details class="flix-accordion">
  <summary class="flix-accordion__title">
    <h2 class="flix-h2 flix-h2--space-flush">
      <flix-icon name="info" color="neutral" aria-hidden="true"></flix-icon> Making it work without the plugin
    </h2>
  </summary>
  <article class="flix-accordion__content flix-text">
    Modal panels require you to provide an overlay element that will cover the page and block the user from interacting with elements outside of the panel. You must implement a &quot;tab trap&quot; and also disable the window scroll when the panel is open.
<div class="gatsby-highlight" data-language="text"><pre class="language-text"><code class="language-text">- Add `role=&quot;dialog&quot;` and `aria-modal-&quot;true&quot;` to the panel element for accessibility;
- Add an `id` to the title and pass it as `aria-labelledby` value to the panel for proper accessibility;
- Add the `flix-overlay` element at the end of the panel;
- Adding `tabindex=&quot;0&quot;` to the content if it has a lot of content and can show a scroll bar to enable keyboard users to also scroll the content with arrow keys;

- **When a panel is opened:**
  - Move focus to the first element of the panel, usually the close button;
  - Create a &quot;tab trap&quot; so when users tab on the last element it returns focus to the first, and vice versa;
  - Block users from scrolling the page outside by adding `overflow: hidden;` CSS rule to the body element;
- **When the panel is closed:**
  - Allow users to close the panel by clicking the overlay or pressing &lt;kbd&gt;ESC&lt;/kbd&gt;;
  - Move focus back to the element that triggered the panel;
  - Remove the `overflow: hidden&#x27;` CSS rule from the body;

When a panel is **non-modal**, the following features should **not** be added:
- Do not add `aria-modal=&quot;true&quot;` to the panel, but do add the `role=&quot;dialog&quot;` and label it accordingly;
- The `flix-overlay` element is not needed to cover the page;
- A tab trap shouldn&#x27;t be created, but you are encouraged to add keyboard shortcuts to navigate in and out of the panel if needed, including setting the focus to the first interactive element when the panel is opened;
- You shouldn&#x27;t disable the page scroll with `overflow: hidden`.</code></pre></div>
  </article>
</details></div></div>

Popup

Panel

Modifiers

Structure

Plugin

Default example

Default Example

Header customization

Related Components

Related Guides