<div class="header-button">
    <div class="header-button__container">

        <a href="#" class="header-button__link -icon-cart">

            <span class="visually-hidden">Zum Warenkorb</span>

            <span class="visually-hidden">(</span>
            <span class="header-button__currency">CHF</span>
            <span class="header-button__value">2584.60</span>
            <span class="visually-hidden">)</span>

            <span class="visually-hidden">Artikel im Warenkorb:</span>

            <span class="header-button__badge">4</span>

        </a>
        <button type="button" class="header-button__link--button -icon-cart">

            <span class="visually-hidden">Zum Warenkorb</span>

            <span class="visually-hidden">(</span>
            <span class="header-button__currency">CHF</span>
            <span class="header-button__value">2584.60</span>
            <span class="visually-hidden">)</span>

            <span class="visually-hidden">Artikel im Warenkorb:</span>

            <span class="header-button__badge">4</span>

        </button>
    </div>
    <div class="header-button-dropdown-root">

        <div class="dropdown">
            <button type="button" class="dropdown__toggle" style="max-width: 200px;">Vororder</button>
            <div class="dropdown__content" style="width: 280px; left: auto; right: 0;">

                <div class="header-button-dropdown">

                    <ul class="header-button-dropdown__list">

                        <li class="header-button-dropdown__list-item--active">

                            <button type="button" class="header-button-dropdown__name">

                                Vororder

                            </button>

                            <div class="header-button-dropdown__item-amount">
                                100
                            </div>

                            <div class="header-button-dropdown__active"></div>
                        </li>

                        <li class="header-button-dropdown__list-item">

                            <button type="button" class="header-button-dropdown__name">

                                Händlerwarenkorb

                            </button>

                            <div class="header-button-dropdown__item-amount">
                                3
                            </div>

                            <div class="header-button-dropdown__active"></div>
                        </li>

                        <li class="header-button-dropdown__list-item">

                            <button type="button" class="header-button-dropdown__name">

                                Kunde 1

                            </button>

                            <div class="header-button-dropdown__item-amount">
                                12
                            </div>

                            <div class="header-button-dropdown__active"></div>
                        </li>

                        <li class="header-button-dropdown__list-item">

                            <button type="button" class="header-button-dropdown__name">

                                Kunde 2

                            </button>

                            <div class="header-button-dropdown__item-amount">
                                5
                            </div>

                            <div class="header-button-dropdown__active"></div>
                        </li>

                        <li class="header-button-dropdown__list-item">

                            <button type="button" class="header-button-dropdown__name">

                                KundeKundeKundeKundeKundeKundeKundeKundeKundeKundeKundeKundeKundeKundeKunde

                            </button>

                            <div class="header-button-dropdown__item-amount">
                                9999
                            </div>

                            <div class="header-button-dropdown__active"></div>
                        </li>

                    </ul>

                    <div class="header-button-dropdown__link-list">

                        <a href="#" class="header-button-dropdown__link">Warenkörbe verwalten</a>

                    </div>

                    <div class="header-button-dropdown__button">
                        <a href="#" class="button--primary-small">Zum Warenkorb</a>

                    </div>
                </div>

            </div>
        </div>

    </div>
</div>
{% include '@SharedComponents/modules/page/components/header/header-button/header-button.twig' %}
{
  "demo": false,
  "labels": {
    "title": "Zum Warenkorb",
    "items": "Artikel im Warenkorb"
  },
  "href": "#",
  "icon": "cart",
  "badge": "4",
  "currency": "CHF",
  "value": "2584.60",
  "dropdown": {
    "activeList": "Vororder",
    "withImages": false,
    "lists": [
      {
        "name": "Vororder",
        "itemAmount": 100,
        "isActive": true
      },
      {
        "name": "Händlerwarenkorb",
        "itemAmount": 3
      },
      {
        "name": "Kunde 1",
        "itemAmount": 12
      },
      {
        "name": "Kunde 2",
        "itemAmount": 5
      },
      {
        "name": "KundeKundeKundeKundeKundeKundeKundeKundeKundeKundeKundeKundeKundeKundeKunde",
        "itemAmount": 9999
      }
    ],
    "linkList": [
      {
        "title": "Warenkörbe verwalten",
        "href": "#"
      }
    ],
    "mobileButton": {
      "variant": "primary-small",
      "type": "a",
      "href": "#",
      "title": "Zum Warenkorb"
    }
  }
}
  • Content:
    import './header-button.scss';
    import HeaderButton, {selector as sel} from 'cando-cx-components-library/components/modules/page/components/header/header-button/header-button';
    
    export default HeaderButton;
    export const selector = sel;
  • URL: /components/raw/header-button/header-button.js
  • Filesystem Path: src/components/modules/page/components/header/header-button/header-button.js
  • Size: 234 Bytes
  • Content:
    @import "~shared/base";
    @import "~cando-cx-components-library/components/modules/page/components/header/header-button/header-button";
  • URL: /components/raw/header-button/header-button.scss
  • Filesystem Path: src/components/modules/page/components/header/header-button/header-button.scss
  • Size: 133 Bytes

used for header-wishlist and header-cart