fractal example

Example component 

<div class="faq-row ">

    <div class="faq-row__container container-constrained">
        <div class="faq-row__text">
            <h4 class="heading-2 faq-row__heading">Frequently Asked Questions</h4>
            <div class="heading-5 faq-row__subheading">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
        </div>
        <div class="faq-row__faqs">
            <div class="faq-row__faq-wrapper">

                <div class="accordian-dropdown">
                    <div class="accordian-dropdown__top">
                        <div class="accordian-dropdown__top-text heading-5">
                            What types of developments does YTL specialise in?
                        </div>
                        <img class="accordian-dropdown__top-icon" src="/arrow-down.svg" />
                    </div>
                    <div class="accordian-dropdown__bottom">
                        <div class="accordian-dropdown__bottom-wrapper paragraph">
                            <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="faq-row__faq-wrapper">

                <div class="accordian-dropdown">
                    <div class="accordian-dropdown__top">
                        <div class="accordian-dropdown__top-text heading-5">
                            What types of developments does YTL specialise in?
                        </div>
                        <img class="accordian-dropdown__top-icon" src="/arrow-down.svg" />
                    </div>
                    <div class="accordian-dropdown__bottom">
                        <div class="accordian-dropdown__bottom-wrapper paragraph">
                            <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="faq-row__faq-wrapper">

                <div class="accordian-dropdown">
                    <div class="accordian-dropdown__top">
                        <div class="accordian-dropdown__top-text heading-5">
                            What types of developments does YTL specialise in?
                        </div>
                        <img class="accordian-dropdown__top-icon" src="/arrow-down.svg" />
                    </div>
                    <div class="accordian-dropdown__bottom">
                        <div class="accordian-dropdown__bottom-wrapper paragraph">
                            <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
 
{{!< layouts}}

<div class="faq-row {{#if inverse}}inverse{{/if}}">

    <div class="faq-row__container container-constrained">
        <div class="faq-row__text">
            <h4 class="heading-2 faq-row__heading">{{heading}}</h4>
            <div class="heading-5 faq-row__subheading" >{{subheading}}</div>
        </div>
        <div class="faq-row__faqs">
             {{#each faqs}}
                <div class="faq-row__faq-wrapper">
                    {{> @accordian-dropdown }}
                </div>           
            {{/each}}
        </div>
    </div>
</div>
 
{
  "heading": "Frequently Asked Questions",
  "subheading": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
  "faqs": [
    {
      "question": "What types of developments does YTL specialise in?",
      "answer": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
    },
    {
      "question": "What types of developments does YTL specialise in?",
      "answer": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
    },
    {
      "question": "What types of developments does YTL specialise in?",
      "answer": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
    }
  ]
}

No notes defined.