<div class="faq-block">
    <div class="faq-block__accordion  js-accordion">
        <div class="faq-block__group accordion js-accordion">
            <div class="faq-block__heading js-accordion-trigger">
                <div class="faq-block__heading--inner">
                    <em class="faq-block__headline">eybrowes</em>
                    <h2 class="faq-block__title">Producten</h2>
                    <script src="/components/raw/common-js/../collapsible/collapsible.js"></script>
                    <script src="/components/raw/common-js/../dropdown-list/dropdown-list.js"></script>
                    <script src="/components/raw/common-js/../tooltip/tooltip.js" defer></script>
                    <script src="/components/raw/common-js/../more-info/more-info.js" defer></script>
                    <script src="/components/raw/common-js/../modal/modal.js"></script>

                    <p class="faq-block__description">Wil je meer weten over producten, klik dan op de vraag en het antwoord verschijnt eronder</p>

                </div>
            </div>
            <div class="faq-block__questions accordion__content js-accordion-content">
                <div id="dropdown-faq" class="dropdown-list dropdown-list faq-block__dropdown-list">
                    <ul class="dropdown-list__list">
                        <li class="
                    dropdown-list__item
                        dropdown-list__item--collapse
                ">
                            <button class="dropdown-list__label " aria-expanded="false" aria-controls="dropdown-customers" aria-controls="dropdown-customers">
                                dit is een vraag

                                <svg class="icon dropdown-list__icon dropdown-list__icon--inner" role="presentation" focusable="false">
                                    <title>Arrow down</title>
                                    <use xlink:href="/images/icons-sprite.svg#angle-down"></use>
                                </svg>

                            </button>

                            <div id="dropdown-customers" class="dropdown-list__content " aria-hidden="true">
                                <ul class="
        list
        list__columns
        dropdown-list__list block-nav__list
    ">
                                </ul>

                            </div>
                        </li>
                        <li class="
                    dropdown-list__item
                        dropdown-list__item--collapse
                ">
                            <button class="dropdown-list__label " aria-expanded="false" aria-controls="dropdown-information" aria-controls="dropdown-information">
                                Information

                                <svg class="icon dropdown-list__icon dropdown-list__icon--inner" role="img">
                                    <title>Arrow down</title>
                                    <use xlink:href="/images/icons-sprite.svg#angle-down"></use>
                                </svg>

                            </button>

                            <div id="dropdown-information" class="dropdown-list__content " aria-hidden="true">
                                <ul class="
        list
        list__columns
        faq-block__links-list
    ">
                                    <li class="
                list__item
                list__column
                list__column--hidden
            ">
                                        <a href="" class="
                    link
                    
                ">
                                            Column 1
                                        </a>
                                        <ul class="list">
                                            <li class="
                            list__item
                            list__column-item
                            
                        ">
                                                <a href="#" class="
                                link
                                faq-block__link
                            " title="Hours">
                                                    Hours
                                                </a>
                                            </li>
                                            <li class="
                            list__item
                            list__column-item
                            
                        ">
                                                <a href="#" class="
                                link
                                faq-block__link
                            " title="About Us">
                                                    About Us
                                                </a>
                                            </li>
                                            <li class="
                            list__item
                            list__column-item
                            
                        ">
                                                <a href="#" class="
                                link
                                faq-block__link
                            " title="Contact Us">
                                                    Contact Us
                                                </a>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>

                            </div>
                        </li>
                    </ul>
                </div>

                <script type="text/javascript">
                    new DropdownList(document.getElementById('dropdown-faq'));
                </script>

            </div>
        </div>
    </div>
</div>
<div class="faq-block">
    <div class="faq-block__accordion  js-accordion">
        <div class="faq-block__group accordion js-accordion">
            <div class="faq-block__heading js-accordion-trigger">
                <div class="faq-block__heading--inner">
                    <em class="faq-block__headline">{{ headline }}</em>
                    <h2 class="faq-block__title">{{ title }}</h2>
                    {{render @image }}
                    <p class="faq-block__description">{{ description }}</p>


                </div>
            </div>
            <div class="faq-block__questions accordion__content js-accordion-content">
                {{ render '@dropdown-list' faqList }}
            </div>
        </div>
    </div>
</div>
{
  "title": "Producten",
  "headline": "eybrowes",
  "description": "Wil je meer weten over producten, klik dan op de vraag en het antwoord verschijnt eronder",
  "faqList": {
    "id": "dropdown-faq",
    "class": "dropdown-list faq-block__dropdown-list",
    "dropdowns": [
      {
        "itemTag": "button",
        "itemAttributes": "aria-expanded=\"false\" aria-controls=\"dropdown-customers\"",
        "title": "dit is een vraag",
        "id": "dropdown-customers",
        "collapse": {
          "class": "dropdown-list__icon dropdown-list__icon--inner",
          "id": "angle-down",
          "title": "Arrow down",
          "hidden": true
        },
        "contentElement": "list--columns",
        "contentContext": {
          "listTag": "ul",
          "elementTag": "li",
          "class": "dropdown-list__list block-nav__list",
          "text": "dit is een antwoord"
        }
      },
      {
        "itemTag": "button",
        "itemAttributes": "aria-expanded=\"false\" aria-controls=\"dropdown-information\"",
        "title": "Information",
        "id": "dropdown-information",
        "collapse": {
          "class": "dropdown-list__icon dropdown-list__icon--inner",
          "id": "angle-down",
          "title": "Arrow down"
        },
        "contentElement": "list--columns",
        "contentContext": {
          "listTag": "ul",
          "elementTag": "li",
          "class": "faq-block__links-list",
          "columns": [
            {
              "text": "Column 1",
              "class": "list__column--hidden",
              "elements": [
                {
                  "text": "Hours",
                  "linkClass": "faq-block__link",
                  "link": "#",
                  "linkAttributes": "title=\"Hours\""
                },
                {
                  "text": "About Us",
                  "linkClass": "faq-block__link",
                  "link": "#",
                  "linkAttributes": "title=\"About Us\""
                },
                {
                  "text": "Contact Us",
                  "linkClass": "faq-block__link",
                  "link": "#",
                  "linkAttributes": "title=\"Contact Us\""
                }
              ]
            }
          ]
        }
      }
    ]
  }
}
  • Content:
    .faq-block {
        width: 100%;
    
        &__group {
            display: flex;
            flex-direction: column;
            @include mq($screen-m) {
                flex-direction: row;
                //align-items: center;
            }
        }
        &__heading {
            width: 100%;
            @include mq($screen-m) {
                width: 50%;
            }
            &--inner {
                @include mq($screen-m) {
                    margin: $spacer--xl;
                    padding: $spacer--xl;
                    box-shadow: 0 0 5px $gray;
                }
            }
        }
        &__content {
            width: 100%;
            @include mq($screen-m) {
                width: 50%;
                margin-top: $spacer--xl;
            }
    
        }
        &__title {
            text-align: center;
        }
        &__description {
            text-align: center;
            font-size: 14px;
        }
        &__image {
            max-width: 75%;
            margin: auto;
        }
        &__dropdown-list {
            .dropdown-list__label {
                font-size: $font-size-medium-large;
                text-transform: none;
            }
            .dropdown-list__content {
                font-size: $font-size-medium-large;
            }
        }
    }
    
  • URL: /components/raw/faq-block/_faq-block.scss
  • Filesystem Path: build/components/Organisms/faq-block/_faq-block.scss
  • Size: 1.1 KB

There are no notes for this item.