PatternLab (1.1.11)

Modal ​

A Modal is a dialog box or popup window that is displayed on top of the current page. It is used to display information or to get input from the user. A Modal is always displayed on top of the current page, and the user needs to interact with it before they can go back to the page.

TIP

Use AppModal component for Vue.js.

.c-panel.-is-modal > .c-panel__inner

Modal Title

This code snippet contains only a preview of the inner panel of the modal with the additional class .-demo-styling which is only used for demo purposes! The complete modal code is shown in the next example.

Show Code
html
<div class="c-panel -is-modal -is-visible" style="position: relative; height: 300px;">
  <div class="c-panel__inner -demo-styling"
       aria-labelledby="example-headline">
      <button class="c-panel__inner__close c-btn -icon-btn -small -flat -link" aria-label="Fenster schließen"></button>
      <h3 class="c-headline" id="example-headline">
          <i class="far fa-cat-space m-r-s" aria-hidden="true"></i>
          Modal Title
      </h3>
      <p class="-redesign">
        This code snippet contains only a preview of the inner panel of the modal with the additional class <code>.-demo-styling</code> which is only used for demo purposes!
        The complete modal code is shown in the next example.
      </p>
      <div class="c-panel__inner__bottom -small -align-right">
        <button type="button" data-dismiss="modal" class="c-btn -small -link -flat -icon-left js-abort">
          Abbrechen
        </button>
        <button type="button" id="certificate-submit" class="c-btn -small -error -icon-left" data-spinner>
          <i class="far fa-trash" aria-hidden="true"></i> Verwerfen
        </button>
      </div>
  </div>
</div>

Example Usage ​

Implementation Details

Based on Panel.js.

  • The Modal can be opened by clicking a trigger element with the attribute data-target='#panelID" (referring to the panel-ID)
  • The Panel is styled by the following classes: .c-panel.-is-modal
  • The Modal can be dismissed by
    • clicking the close button if enabled via .-has-close-btn
    • click on the backdrop if enabled via .-close-backdrop or by pressing the Escape key.
    • OR any custom button if you add the attribute data-dismiss="modal" to it
Accessibility Guidelines
  • Trigger Button: Add aria-haspopup="dialog" to tell screen readers that clicking an element will launch a popup container.
  • Modal Container:
    • The attributes role="dialog" and aria-modal="true" are added automatically to the Panel (.c-panel) by the Panel.js.
    • aria-modal="true" tells assistive tech that the background content behind the open modal is locked out/inert, trapping focus inside.
    • Always use the aria-label or aria-labelledby attribute on the Panel to provide a label for the modal.

Default Modal Example (Medium) ​

An example modal with a default close button and without (visible) backdrop.
.c-panel.-is-modal.-close-backdrop.-has-close-btn

This modal is dismissible by clicking the clicking outside it or pressing the button or escape key.

Show Code
html
<button class="c-btn -secondary -small"
        aria-haspopup="dialog"
        data-target="#modal-example">
  Default Modal Size
</button>
<div id="modal-example"
     aria-labelledby="modal-headline"
     class="c-panel -is-modal -has-close-btn -close-backdrop">
    <div class="c-panel__inner">
      <h3 class="c-headline p-b-s" id="modal-headline">
        <i class="far fa-info-circle m-r-xs" aria-hidden="true"></i>
        Default Modal Size with Invisible Backdrop
      </h3>
      <p>
        This modal is dismissible by clicking the clicking outside it or pressing the button or escape key.
      </p>
      <div class="c-panel__inner__bottom -small -align-right">
        <button type="button" data-dismiss="modal" class="c-btn -redesign -primary -small -icon-left" data-spinner>
          <span class="fas fa-check" aria-hidden="true"></span>Verstanden
        </button>
      </div>
    </div>
</div>

Other Sizes and Variants ​

The following examples show the different size modifiers for the modal. The default size is -is-medium.

Small Modal ​

A small modal (without backdrop or close button):
.c-panel.-is-modal.-is-small

This modal is dismissible by clicking the clicking outside it or pressing the button or escape key.

Show Code
html
<button class="c-btn -secondary -small"
        aria-haspopup="dialog"
        data-target="#modal-example-small">
  Small Modal
</button>
<div id="modal-example-small"
     aria-labelledby="modal-headline-small"
     class="c-panel -is-modal -is-small -close-backdrop">
    <div class="c-panel__inner">
        <h3 class="c-headline p-b-s" id="modal-headline-small">
          <i class="far fa-exclamation-triangle m-r-xs" aria-hidden="true"></i>
          Small Modal
        </h3>
        <p>
            This modal is dismissible by clicking the clicking outside it or pressing the button or escape key.
        </p>
        <div class="c-panel__inner__bottom -small -align-right">
          <button type="button" data-dismiss="modal" class="c-btn -redesign -primary -small h-fullwidth -icon-left" data-spinner>
            <span class="fas fa-check" aria-hidden="true"></span>Verstanden
          </button>
        </div>
    </div>
</div>

Large Modal ​

A large modal with a visible backdrop but not dismissible by clicking on the backdrop:
.c-panel.-is-modal.-is-large.-has-backdrop

This large modal has a custom close button and is not dismissible by clicking outside of it.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

FirstnameLastnameAge
JillSmith50
JillSmith50
EveJackson94
JillSmith50
Show Code
html
<button class="c-btn -secondary -small"
        aria-haspopup="dialog"
        data-target="#modal-large-backdrop">
  Large Modal with Backdrop
</button>
<div id="modal-large-backdrop"
     aria-labelledby="modal-large-headline"
     class="c-panel -is-modal -is-large -has-backdrop">
  <div class="c-panel__inner">
    <div class="c-panel__inner__top">
      <h2 class="c-headline" id="modal-large-headline">
        <i class="far fa-cat-space m-r-s" aria-hidden="true"></i>
        Large Modal with Backdrop
      </h2>
      <button class="c-panel__inner__close c-btn -icon-btn -small -flat -link" data-dismiss="modal" aria-label="Fenster schließen"></button>
    </div>
    <h4>
      This large modal has a custom close button and is not dismissible by clicking outside of it.
    </h4>
    <p>
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
    </p>
    <table class="c-table">
      <tbody>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Age</th>
      </tr>
      <tr>
        <td>Jill</td>
        <td>Smith</td>
        <td>50</td>
      </tr>
      <tr>
        <td>Jill</td>
        <td>Smith</td>
        <td>50</td>
      </tr>
      <tr>
        <td>Eve</td>
        <td>Jackson</td>
        <td>94</td>
      </tr>
      <tr>
        <td>Jill</td>
        <td>Smith</td>
        <td>50</td>
      </tr>
      </tbody>
    </table>

    <div class="c-panel__inner__bottom -has-bg">
      <button type="button" data-dismiss="modal" class="c-btn -small -link -flat -icon-left">
        Abbrechen
      </button>
      <button type="button" data-dismiss="modal" class="c-btn -small -primary -icon-left" data-spinner>
        <i class="fas fa-check" aria-hidden="true"></i> Speichern
      </button>
    </div>
  </div>
</div>

Extra Large Modal ​

An extra large modal with sticky header, normal footer and scrollable content:
.c-panel.-is-modal.-is-extra-large
> .c-panel__inner__top.-is-sticky
> .c-panel__inner__body > .c-panel__inner__bottom (footer must be inside the body in this case)

This extra large modal has a custom close button and is dismissible by clicking outside of it.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

FirstnameLastnameAge
JillSmith50
JillSmith50
EveJackson94
JillSmith50

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

FirstnameLastnameAge
JillSmith50
JillSmith50
EveJackson94
JillSmith50
Show Code
html
<button class="c-btn -secondary -small"
        aria-haspopup="dialog"
        data-target="#modal-xl-backdrop">
  Extra Large Modal
</button>
<div id="modal-xl-backdrop"
     aria-labelledby="modal-xl-headline"
     class="c-panel -is-modal -is-extra-large -close-backdrop -has-backdrop">
  <div class="c-panel__inner">
    <div class="c-panel__inner__top -is-sticky">
      <i class="far fa-2x fa-cat-space" aria-hidden="true"></i>
      <h2 class="c-headline" id="modal-fw-headline">
        XL Modal with Sticky Header & Normal Footer
      </h2>
      <button class="c-panel__inner__close c-btn -icon-btn -flat -link" data-dismiss="modal" aria-label="Fenster schließen"></button>
    </div>

    <div class="c-panel__inner__body">
      <h4>
        This extra large modal has a custom close button and is dismissible by clicking outside of it.
      </h4>
      <p>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
      </p>
      <div class="js-accordion-group c-accordion-wrapper"
        id="accordion-xl-version"
        role="tablist"
        aria-multiselectable="true"
      >
        <div class="c-accordion -large">
          <h3>
            <button class="c-accordion__title"
                    id="accordion1_tab1"
                    role="tab"
                    aria-controls="accordion_xl_panel1"
                    aria-expanded="false"
                    aria-selected="false"
                    type="button"
            >
              Accordion to show how the modal adapts to the content
            </button>
          </h3>
          <div
            class="c-accordion__panel"
            id="accordion_xl_panel1"
            aria-labelledby="accordion_xl_tab1"
            role="tabpanel"
            aria-hidden="false"
          >
            <table class="c-table">
              <tbody>
              <tr>
                <th>Firstname</th>
                <th>Lastname</th>
                <th>Age</th>
              </tr>
              <tr>
                <td>Jill</td>
                <td>Smith</td>
                <td>50</td>
              </tr>
              <tr>
                <td>Jill</td>
                <td>Smith</td>
                <td>50</td>
              </tr>
              <tr>
                <td>Eve</td>
                <td>Jackson</td>
                <td>94</td>
              </tr>
              <tr>
                <td>Jill</td>
                <td>Smith</td>
                <td>50</td>
              </tr>
              </tbody>
            </table>
          </div>
        </div>

        <div class="c-accordion -large">
          <h3>
            <button class="c-accordion__title"
                    id="accordion_xl_tab2"
                    role="tab"
                    aria-controls="accordion_xl_panel2"
                    aria-expanded="false"
                    aria-selected="false"
                    type="button"
            >
              lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
            </button>
          </h3>
          <div
            class="c-accordion__panel"
            id="accordion_xl_panel2"
            aria-labelledby="accordion_xl_tab2"
            role="tabpanel"
            aria-hidden="false"
          >
            <p>
              Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
              Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
              Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
              Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
            </p>
            <table class="c-table">
              <tbody>
              <tr>
                <th>Firstname</th>
                <th>Lastname</th>
                <th>Age</th>
              </tr>
              <tr>
                <td>Jill</td>
                <td>Smith</td>
                <td>50</td>
              </tr>
              <tr>
                <td>Jill</td>
                <td>Smith</td>
                <td>50</td>
              </tr>
              <tr>
                <td>Eve</td>
                <td>Jackson</td>
                <td>94</td>
              </tr>
              <tr>
                <td>Jill</td>
                <td>Smith</td>
                <td>50</td>
              </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>



      <!-- EXAMPLE FOR A NORMAL FOOTER -->
      <div class="c-panel__inner__bottom -has-bg">
        <button type="button" data-dismiss="modal" class="c-btn -small -link -flat -icon-left">
          Abbrechen
        </button>
        <button type="button" data-dismiss="modal" class="c-btn -small -primary -icon-left" data-spinner>
          <i class="fas fa-check" aria-hidden="true"></i> Speichern
        </button>
      </div>
    </div>

  </div>
</div>

A "fullwidth" modal (it has a max-width for really large viewports) with sticky header and footer:
.c-panel.-is-modal.-has-backdrop.-is-fullwidth
> .c-panel__inner__top.-is-sticky
> .c-panel__inner__body (use this wrapper only in this case)
> .c-panel__inner__bottom.-is-sticky

This modal has a sticky header and footer and is a little bit responsive.

Use .c-panel__inner__body as content wrapper if you want to use a sticky header or footer.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Show Code
html
<button class="c-btn -secondary -small"
        aria-haspopup="dialog"
        data-target="#modal-fw">
  Fullwidth Modal with Sticky Header & Footer
</button>
<div id="modal-fw"
     aria-labelledby="modal-fw-headline"
     class="c-panel -is-modal -is-fullwidth -has-backdrop -close-backdrop">
  <div class="c-panel__inner">
    <div class="c-panel__inner__top -is-sticky">
      <i class="far fa-2x fa-cat-space xs-hidden" aria-hidden="true"></i>
      <h2 class="c-headline" id="modal-fw-headline">
        Fullwidth Modal with Sticky Header & Footer
      </h2>
      <button class="c-panel__inner__close c-btn -icon-btn -flat -link" data-dismiss="modal" aria-label="Fenster schließen"></button>
    </div>
    <div class="c-panel__inner__body">
      <h3>
        This modal has a sticky header and footer and is a little bit responsive.<br/>
      </h3>
      <p>
        Use <code>.c-panel__inner__body</code> as content wrapper if you want to use a sticky header or footer.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
      </p>
      <div
        class="js-accordion-group c-accordion-wrapper m-y-m"
        id="accordion2"
        role="tablist"
        aria-multiselectable="true"
      >
        <div class="c-accordion">
          <h3>
            <button
              class="c-accordion__title"
              id="accordion2_tab1"
              role="tab"
              aria-controls="accordion2_panel1"
              aria-expanded="true"
              aria-selected="true"
              type="button"
            >
              Accordion to demonstrate how the modal adapts to the content
            </button>
          </h3>
          <div
            class="c-accordion__panel"
            id="accordion2_panel1"
            aria-labelledby="accordion2_tab1"
            role="tabpanel"
            aria-hidden="true"
          >
            <table class="c-table">
              <tbody>
              <tr>
                <th>Firstname</th>
                <th>Lastname</th>
                <th>Age</th>
              </tr>
              <tr>
                <td>Jill</td>
                <td>Smith</td>
                <td>50</td>
              </tr>
              <tr>
                <td>Jill</td>
                <td>Smith</td>
                <td>50</td>
              </tr>
              <tr>
                <td>Eve</td>
                <td>Jackson</td>
                <td>94</td>
              </tr>
              <tr>
                <td>Jill</td>
                <td>Smith</td>
                <td>50</td>
              </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div class="c-accordion">
          <h3>
            <button
              class="c-accordion__title"
              id="accordion2_tab2"
              role="tab"
              aria-controls="accordion2_panel2"
              aria-expanded="false"
              aria-selected="false"
              type="button"
            >
              Accordion to demonstrate how the modal adapts to the content
            </button>
          </h3>
          <div
            class="c-accordion__panel"
            id="accordion2_panel2"
            aria-labelledby="accordion2_tab2"
            role="tabpanel"
            aria-hidden="true"
          >
            <table class="c-table">
              <tbody>
              <tr>
                <th>Firstname</th>
                <th>Lastname</th>
                <th>Age</th>
              </tr>
              <tr>
                <td>Jill</td>
                <td>Smith</td>
                <td>50</td>
              </tr>
              <tr>
                <td>Jill</td>
                <td>Smith</td>
                <td>50</td>
              </tr>
              <tr>
                <td>Eve</td>
                <td>Jackson</td>
                <td>94</td>
              </tr>
              <tr>
                <td>Jill</td>
                <td>Smith</td>
                <td>50</td>
              </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>

    <div class="c-panel__inner__bottom -is-sticky -small">
      <button type="button" data-dismiss="modal" class="c-btn -small -link -flat -icon-left">
        Abbrechen
      </button>
      <button type="button" data-dismiss="modal" class="c-btn -small -primary -icon-left" data-spinner>
        <i class="fas fa-check" aria-hidden="true"></i> Speichern
      </button>
    </div>
  </div>
</div>

Animation Variants ​

Two animation styles are available. Add .-anim-fade to the .c-panel element to use the new one — existing modals are unaffected.
This animation is set as default for large, extra large and fullwidth modals.

ClassEffect
(none)Slides down from top (translateY(-125%) → center)
.-anim-fadeFades in + scales up from center (scale(0.9) → scale(1))

This is the default animation: the modal slides down from translateY(-125%) to the center.

Classes used: .c-panel -is-modal

New animation: the modal fades in while scaling from 0.9 → 1, appearing directly in the center.

Classes used: .c-panel -is-modal -anim-fade

Show Code
html
<div  class="h-flex gap-16 h-wrap">
    <button class="c-btn -secondary -small" data-target="#modal-anim-slide">
        Slide from Top (default)
    </button>
    <button class="c-btn -primary -small" data-target="#modal-anim-fade">
        Fade + Scale (new)
    </button>
</div>


<div id="modal-anim-slide" aria-labelledby="modal-anim-slide-title" class="c-panel -is-modal -is-medium -has-backdrop -has-close-btn -close-backdrop">
    <div class="c-panel__inner">
        <h3 class="c-headline" id="modal-anim-slide-title">Slide from Top</h3>
        <p>This is the default animation: the modal slides down from <code>translateY(-125%)</code> to the center.</p>
        <p>Classes used: <code>.c-panel -is-modal</code></p>
    </div>
</div>


<div id="modal-anim-fade" aria-labelledby="modal-anim-fade-title" class="c-panel -is-modal -anim-fade -is-medium -has-backdrop -has-close-btn -close-backdrop">
    <div class="c-panel__inner">
        <h3 class="c-headline" id="modal-anim-fade-title">Fade + Scale</h3>
        <p>New animation: the modal fades in while scaling from <code>0.9 → 1</code>, appearing directly in the center.</p>
        <p>Classes used: <code>.c-panel -is-modal -anim-fade</code></p>
    </div>
</div>

Header Variants ​

.c-panel__inner__top[.-is-sticky]

Normal Header

Show Code
html
<div class="h-flex h-flex-column gap-m">
  <div class="c-panel__inner__top -is-sticky" style="position: relative; z-index: 1;">
    <i class="far fa-2x fa-cat-space" aria-hidden="true"></i>
    <h2 class="c-headline" id="modal-fw-headline">
      Fixed Header Example (Extra long headline for demonstration purposes ...)
    </h2>
    <button class="c-panel__inner__close c-btn -icon-btn -flat -link" data-dismiss="modal" aria-label="Fenster schließen"></button>
  </div>
  <div class="c-panel__inner__top" style="position: relative;">
    <h2 class="c-headline" id="example-modal-label2">
      <i class="far fa-cat-space m-r-s" aria-hidden="true"></i>
      Normal Header
    </h2>
    <button class="c-panel__inner__close c-btn -icon-btn -small -flat -link" data-dismiss="modal" aria-label="Fenster schließen"></button>
  </div>
</div>

.c-panel__inner__bottom[.-is-sticky, .-has-bg, .-small, .-align-right]

Show Code
html
<div class="h-flex h-flex-column gap-m h-pos-relative">
  <div class="c-panel__inner__bottom -is-sticky" style="z-index: 1; position: relative;">
      <button type="button" data-dismiss="modal" class="c-btn -small -link -flat -icon-left js-abort">
          Abbrechen
      </button>
      <button type="button" class="c-btn -small -primary -icon-left" data-spinner>
          <i class="fas fa-check" aria-hidden="true"></i> Speichern
      </button>
  </div>
  <div class="c-panel__inner__bottom -has-bg">
      <button type="button" data-dismiss="modal" class="c-btn -small -link -flat -icon-left js-abort">
          Abbrechen
      </button>
      <button type="button" class="c-btn -small -primary -icon-left" data-spinner>
          <i class="fas fa-check" aria-hidden="true"></i> Speichern
      </button>
  </div>
  <div class="c-panel__inner__bottom -has-bg -small">
    <button type="button" data-dismiss="modal" class="c-btn -small -link -flat -icon-left js-abort">
      Abbrechen
    </button>
    <button type="button" class="c-btn -small -primary -icon-left" data-spinner>
      <i class="fas fa-check" aria-hidden="true"></i> Speichern
    </button>
  </div>

  <div class="c-panel__inner__bottom -align-right">
    <button type="button" data-dismiss="modal" class="c-btn -small -link -flat -icon-left js-abort">
      Abbrechen
    </button>
    <button type="button" class="c-btn -small -error -icon-left" data-spinner>
      <i class="far fa-trash" aria-hidden="true"></i> Verwerfen
    </button>
  </div>
</div>

2026 - Pharma4u