PatternLab (1.1.11)

Menu Button Row / Teaser ​

The MenuBtnRow is a versatile button / card component based on the classic Menu Button designed to display structured information in a horizontal layout. Similar to a table row, it presents multiple data points while remaining fully interactive and selectable. Ideal for use in menus, lists, or selection interfaces where users need to quickly access detailed information at a glance.

Nested Instances
  • An optional Circular Icon or DuoTone Icon (default) on the left to convey more context
  • An optional “RemoveBtn” .c-menu-btn__remove to delete the item
  • An optional Icon Button or Button on the right for any kind of action (in static versions only this button is clickable!)
Usage Details
  • Adding a Tooltip improves usability by providing users with clarity on where the Menu-Button Row leads before they interact with it.
  • Use Grid for layouting the content if needed.
TODOs
  • Test + fix print styles
  • Improve responsiveness, add dividers to grid? update grid?

Static Version ​

.c-menu-btn.-is-row.-is-static

Usage Details

Use the static version to display read-only data and the interactive version if the whole container should be a link or button.

Static Example

Try hovering over me.

Bezeichnung

NRF 11.100. Hydrophile Tretinoin-Creme 0,1 % aus Rezeptursubstanz

Datum

12.04.2025

Show Code
html
<div class="c-menu-btn -is-row -is-static" tabindex="0">
  <button class="c-menu-btn__remove js-tooltip" aria-label="Bereitstellung rückgängig machen" data-placement="bottom" data-title="Bereitstellung rückgängig machen">
    <i class="fa-solid fa-times" aria-hidden="true"></i>
  </button>
  <div class="c-menu-btn__icon">
    <div class="c-circular-icon -xs" aria-hidden="true">
      <i class="c-duotone-icon -pruefung_dark -sm"></i>
    </div>
  </div>
  <div class="grid-noGutter h-width-100">
    <div class="col-2_sm-12 p-r-12">
      <p class="h-color-dark-gray h-type-extra-small -redesign m-b-xxs h-type-bold h-no-wrap h-overflow-ellipsis">Static Example</p>
      <p class="h-type-bold h-type-small">Try hovering over me.</p>
    </div>
    <div class="col-7_sm-12 h-border-left-light-gray p-x-12">
      <p class="h-color-dark-gray h-type-extra-small -redesign m-b-xxs h-type-bold h-no-wrap h-overflow-ellipsis">Bezeichnung</p>
      <p class="h-type-bold h-type-small">NRF 11.100. Hydrophile Tretinoin-Creme 0,1 % aus Rezeptursubstanz</p>
    </div>
    <div class="col-3_sm-12 h-border-left-light-gray p-x-12">
      <p class="h-color-dark-gray h-type-extra-small -redesign m-b-xxs h-type-bold h-no-wrap h-overflow-ellipsis">Datum</p>
      <p class="h-type-bold h-type-small">12.04.2025</p>
    </div>
  </div>
  <a href="#" aria-label="In neuem Tab öffnen" class="c-btn -icon-btn -small -primarylight m-l-auto js-tooltip print-hide" data-title="In neuem Tab öffnen" data-placement="bottom">
    <i class="fa-regular fa-arrow-up-right-from-square" aria-hidden="true"></i>
  </a>
</div>

Selected State ​

Use the selected state if the whole item can be selected or needs to be highlighted.
.c-menu-btn.-is-row[.-is-selected]

Static Selected Example

Fertigarzneimittel

Bezeichnung

NRF 11.100. Hydrophile Tretinoin-Creme 0,1 % aus Rezeptursubstanz

Datum

12.04.2025

Show Code
html
<div class="c-menu-btn -is-row -is-static -is-selected">
  <div class="c-menu-btn__icon">
    <div class="c-circular-icon -xs" aria-hidden="true">
      <i class="c-duotone-icon -pruefung_dark -sm"></i>
    </div>
  </div>
  <div class="grid-noGutter h-width-100">
    <div class="col-3_sm-12 p-r-12">
      <p class="h-color-dark-gray h-type-extra-small -redesign m-b-xxs h-type-bold h-no-wrap h-overflow-ellipsis">Static Selected Example</p>
      <p class="h-type-bold h-type-small">Fertigarzneimittel</p>
    </div>
    <div class="col-6_sm-12 h-border-left-light-gray p-x-12">
      <p class="h-color-dark-gray h-type-extra-small -redesign m-b-xxs h-type-bold h-no-wrap h-overflow-ellipsis">Bezeichnung</p>
      <p class="h-type-bold h-type-small">NRF 11.100. Hydrophile Tretinoin-Creme 0,1 % aus Rezeptursubstanz</p>
    </div>
    <div class="col-3_sm-12 h-border-left-light-gray p-x-12">
      <p class="h-color-dark-gray h-type-extra-small -redesign m-b-xxs h-type-bold h-no-wrap h-overflow-ellipsis">Datum</p>
      <p class="h-type-bold h-type-small">12.04.2025</p>
    </div>
  </div>
  <a href="#" aria-label="Öffnen" class="c-btn -icon-btn -small -primarylight m-l-auto js-tooltip print-hide" data-title="Öffnen" data-placement="bottom">
    <i class="fa-regular fa-arrow-right" aria-hidden="true"></i>
  </a>
</div>

Interactive Example ​

.c-menu-btn.-is-row > .c-menu-btn__remove

Interactive Example

Fertigarzneimittel

Bezeichnung

NRF 11.100. Hydrophile Tretinoin-Creme 0,1 % aus Rezeptursubstanz

Datum

12.04.2025

Example With Remove 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.

Show Code
html
<div class="c-menu-btn -is-row" role="button" tabindex="0">
  <div class="c-menu-btn__icon">
    <div class="c-circular-icon -xs" aria-hidden="true">
      <span class="c-badge -xs -success"></span>
      <i class="c-duotone-icon -pruefung_dark -sm"></i>
    </div>
  </div>
  <div class="grid-noGutter h-width-100">
    <div class="col-3_sm-12 p-r-12">
      <p class="h-color-dark-gray h-type-extra-small -redesign m-b-xxs h-type-bold h-no-wrap h-overflow-ellipsis">Interactive Example</p>
      <p class="h-type-bold h-type-small">Fertigarzneimittel</p>
    </div>
    <div class="col-6_sm-12 h-border-left-light-gray p-x-12">
      <p class="h-color-dark-gray h-type-extra-small -redesign m-b-xxs h-type-bold h-no-wrap h-overflow-ellipsis">Bezeichnung</p>
      <p class="h-type-bold h-type-small">NRF 11.100. Hydrophile Tretinoin-Creme 0,1 % aus Rezeptursubstanz</p>
    </div>
    <div class="col-3_sm-12 h-border-left-light-gray p-x-12">
      <p class="h-color-dark-gray h-type-extra-small -redesign m-b-xxs h-type-bold h-no-wrap h-overflow-ellipsis">Datum</p>
      <p class="h-type-bold h-type-small">12.04.2025</p>
    </div>
  </div>
  <a href="#" class="c-btn -icon-btn -small -primarylight m-l-auto js-tooltip print-hide"
     aria-label="Öffnen"
     data-title="Öffnen"
     data-placement="bottom">
    <i class="fa-regular fa-arrow-right" aria-hidden="true"></i>
  </a>
</div>
<div class="c-menu-btn -is-row m-t-s" role="button">
  <button class="c-menu-btn__remove js-tooltip"
          aria-label="Bereitstellung rückgängig machen"
          data-title="Bereitstellung rückgängig machen"
          data-placement="bottom">
    <i class="fa-solid fa-times" aria-hidden="true"></i>
  </button>
  <div class="c-menu-btn__icon">
    <div class="c-circular-icon -xs" aria-hidden="true">
      <span class="c-badge -xs -success"></span>
      <i class="c-duotone-icon -defektur_dark -sm"></i>
    </div>
  </div>
  <div class="grid-noGutter h-width-100">
    <div>
      <p class="h-color-dark-gray h-type-extra-small -redesign m-b-xxs h-type-bold h-no-wrap h-overflow-ellipsis">Example With Remove Button</p>
      <p class="h-type-bold h-type-small">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>
  </div>
</div>

Other Modifier Classes ​

Disabled State ​

.c-menu-btn.-is-row.-is-disabled

Disabled Example

Use the disabled attribute to prevent users from interacting with this element and provide a reason for why it is disabled.

Disabled Static Example

Lorem ipsum dolor sit amet

Show Code
html
<div class="c-menu-btn -is-row -is-disabled" disabled role="button" tabindex="0">
  <button class="c-menu-btn__remove js-tooltip" disabled aria-label="Bereitstellung rückgängig machen" data-placement="bottom" data-title="Bereitstellung rückgängig machen">
    <i class="fa-solid fa-times" aria-hidden="true"></i>
  </button>
  <div class="c-menu-btn__icon">
    <div class="c-circular-icon -xs -is-disabled" aria-hidden="true">
      <i class="c-duotone-icon -pruefung_dark -sm"></i>
    </div>
  </div>
  <div class="grid h-width-100">
    <div>
      <p class="h-color-dark-gray h-type-extra-small -redesign m-b-xxs h-type-bold h-no-wrap h-overflow-ellipsis">Disabled Example</p>
      <p class="h-type-bold h-type-small">
        Use the disabled attribute to prevent users from interacting with this element and provide a reason for why it is disabled.
      </p>
    </div>
  </div>
  <a disabled
     class="c-btn -icon-btn -small -primarylight m-l-auto js-tooltip print-hide"
     data-title="In Bearbeitung"
     aria-label="In Bearbeitung"
     data-placement="bottom">
    <i class="fa-regular fa-arrow-right" aria-hidden="true"></i>
  </a>
</div>
<div class="c-menu-btn -is-row -is-static -is-disabled m-t-s">
  <button class="c-menu-btn__remove js-tooltip" disabled aria-label="Bereitstellung rückgängig machen" data-placement="bottom" data-title="Bereitstellung rückgängig machen">
    <i class="fa-solid fa-times" aria-hidden="true"></i>
  </button>
  <div class="c-menu-btn__icon">
    <div class="c-circular-icon -xs -is-disabled" aria-hidden="true">
      <i class="c-duotone-icon -pruefung_dark -sm"></i>
    </div>
  </div>
  <div class="grid h-width-100">
    <div>
      <p class="h-color-dark-gray h-type-extra-small -redesign m-b-xxs h-type-bold h-no-wrap h-overflow-ellipsis">Disabled Static Example</p>
      <p class="h-type-bold h-type-small">Lorem ipsum dolor sit amet</p>
    </div>
  </div>
</div>

Error States ​

.c-menu-btn.-is-row.-is-static.-is-error

Error Interactive Example

Lorem ipsum dolor sit amet

Keine Abfüllanweisung vorhanden

Erstellen Sie jetzt eine neue Abfüllanweisung, um fortzufahren.

Show Code
html
<div class="c-menu-btn -is-row -is-error" role="button" tabindex="0">
  <div class="c-menu-btn__icon">
    <div class="c-circular-icon -xs -is-disabled" aria-hidden="true">
      <i class="c-duotone-icon -pruefung_dark -sm"></i>
      <div class="c-context-icon -top -warning -xs">
        <i class="fas fa-exclamation"></i>
      </div>
    </div>
  </div>
  <div class="grid h-width-100">
    <div>
      <p class="h-color-dark-gray h-type-extra-small -redesign m-b-xxs h-type-bold h-no-wrap h-overflow-ellipsis">Error Interactive Example</p>
      <p class="h-type-bold h-type-small">Lorem ipsum dolor sit amet</p>
    </div>
  </div>
  <a href="#"
     class="c-btn -icon-btn -small -primarylight m-l-auto js-tooltip print-hide"
     data-title="In Bearbeitung"
     aria-label="In Bearbeitung"
     data-placement="bottom">
    <i class="fa-regular fa-arrow-right" aria-hidden="true"></i>
  </a>
</div>
<!-- Static Error Example -->
<div class="c-menu-btn -is-row -is-static -is-error m-t-s">
  <div class="c-menu-btn__icon">
    <div class="c-circular-icon -is-disabled -xs" aria-hidden="true">
      <i class="fad fa-file-lines fa-1-5x h-color-disabled"></i>
      <div class="c-context-icon -top -warning -xs">
        <i class="far fa-exclamation"></i>
      </div>
    </div>
  </div>
  <div class="h-flex h-flex-row h-align-center h-gap-s h-width-100">
    <div class="h-flex-grow">
      <p class="h-color-dark-gray h-type-small m-b-xxs h-type-bold h-no-wrap h-overflow-ellipsis">Keine Abfüllanweisung vorhanden</p>
      <p class="h-type-small m-b-0">Erstellen Sie jetzt eine neue Abfüllanweisung, um fortzufahren.</p>
    </div>
    <button type="button" class="c-btn -small -secondary -icon-left">
      <i class="fa-regular fa-plus" aria-hidden="true"></i>
      Neue Abfüllanweisung erstellen
    </button>
  </div>
</div>

Highlighted Error Example (Delete) ​

Use the h-bg-color-error-lighter class to highlight the error state, e.g. when an item should be deleted.

.c-menu-btn.-is-row.-is-static.-is-error.h-bg-color-error-lighter

E-Rezept löschen?

Die Rezeptur “NRF 11.100. Hydrophile Tretinoin-Creme 0,1 % aus Rezeptursubstanz” wird unwiderruflich aus dem Laborprogramm gelöscht.

Show Code
html
<div class="c-menu-btn -is-row -is-static -is-error h-bg-color-error-lighter m-t-s">
  <div class="c-menu-btn__icon">
      <i class="fad fa-message-exclamation fa-1-5x h-color-error-darker"></i>
  </div>
  <div class="h-flex h-flex-row h-align-center h-gap-s h-width-100">
    <div>
      <p class="h-color-error-darkest h-type-small m-b-xxs h-type-bold">E-Rezept löschen?</p>
      <p class="h-color-error-darkest h-type-small m-b-0">Die Rezeptur “NRF 11.100. Hydrophile Tretinoin-Creme 0,1 % aus Rezeptursubstanz” wird unwiderruflich aus dem Laborprogramm gelöscht.</p>
    </div>
    <div class="h-flex h-flex-row h-gap-xs h-flex-grow">
      <button type="button" class="c-btn -small -secondary-outline">
        Abbrechen
      </button>
      <button type="button" class="c-btn -small -error -icon-left">
        <i class="fa-regular fa-trash" aria-hidden="true"></i>
        Löschen
      </button>
    </div>
  </div>
</div>

Upload Style ​

.c-menu-btn.-is-row[.-is-upload]

Show Code
html
<button type="button" class="c-menu-btn -is-row -is-upload print-hide" tabindex="0">
  <span class="c-link">
    <i class="fa-regular fa-plus m-r-xs" aria-hidden="true"></i>
    Upload a file ...
  </span>
</button>

2026 - Pharma4u