OFRAG Frontend Components Library v0.0.0

Header Wishlist: Default 

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

            <a href="" class="header-button__link -icon-wishlist">

                <span class="visually-hidden">(</span>
                <span class="header-button__label">Merkliste</span>
                <span class="visually-hidden">)</span>

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

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

                <span class="visually-hidden">(</span>
                <span class="header-button__label">Merkliste</span>
                <span class="visually-hidden">)</span>

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

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

            <div class="dropdown">
                <button type="button" class="dropdown__toggle" style="max-width: 200px;">Hauptliste</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">

                                    Hauptliste

                                </button>

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

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

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

                                    Werkstatt

                                </button>

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

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

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

                                    Herr Müller

                                </button>

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

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

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

                                    Büro

                                </button>

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

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

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

                                    Ein sehr langer Merklistentitel für einen Kunden mit einem sehr langen Namen

                                </button>

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

                        </ul>

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

                            <a href="#" class="header-button-dropdown__link">Merklisten verwalten</a>

                        </div>

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

                        </div>
                    </div>

                </div>
            </div>

        </div>
    </div>
</div>
 
{% include '@SharedComponents/modules/page/components/header/header-wishlist/header-wishlist.twig' %}
 
{
  "labels": {
    "title": "Zur Merkliste",
    "items": "Artikel in Merkliste"
  },
  "href": "#",
  "data": {
    "icon": "wishlist",
    "badge": "12",
    "label": "Merkliste",
    "dropdown": {
      "activeList": "Hauptliste",
      "lists": [
        {
          "name": "Hauptliste",
          "isActive": true
        },
        {
          "name": "Werkstatt"
        },
        {
          "name": "Herr Müller"
        },
        {
          "name": "Büro"
        },
        {
          "name": "Ein sehr langer Merklistentitel für einen Kunden mit einem sehr langen Namen"
        }
      ],
      "linkList": [
        {
          "title": "Merklisten verwalten",
          "href": "#"
        }
      ],
      "mobileButton": {
        "variant": "primary-small",
        "type": "a",
        "href": "#",
        "title": "Zur Merkliste"
      }
    }
  }
}

No notes defined.