fractal example

Example component: Inverse 

<div class="tabbed-content-row  inverse">

    <div class="container-constrained">
        <div class="tabbed-content-row__tabs">

            <div class="tab paragraph active  inverse">
                About us
            </div>

            <div class="tab paragraph   inverse">
                About us
            </div>

            <div class="tab paragraph   inverse">
                About us
            </div>
        </div>
        <div class="tabbed-content-row__tab-dropdown">
            <select class="tab paragraph dropdown">
                <option selected>EXAMPLE TAB</option>
                <option>EXAMPLE TAB</option>
                <option>EXAMPLE TAB</option>
            </select>
        </div>
        <div class="tabbed-content-row__container">
            <div class="tabbed-content-row__image image-container">
                <img src="/placeholder.png" />
            </div>
            <div class="tabbed-content-row__text">
                <div class="tabbed-content-row__text-container">
                    <div class="tabbed-content-row__title heading-2">About us</div>
                    <div class="tabbed-content-row__copy paragraph">We’re an ambitious, innovative and aspirational company that aims to bring a radical, new approach to development by creating sustainable communities that understand and meet the needs of people.We’re an ambitious, innovative and aspirational company that aims to bring a radical, new approach to development by creating sustainable communities that understand and meet the needs of people.</div>
                    <div class="flex-row-responsive">

                        <div class="primary-cta ">
                            <div class="primary-cta__inner-container">
                                <div class="primary-cta__arrow-left"></div>
                                <div class="primary-cta__text">Find out more</div>
                            </div>

                            <div class="primary-cta__arrow-right"></div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
 
{{!< layouts}}

<div class="tabbed-content-row  {{#if inverse}}inverse{{/if}}">
   
    <div class="container-constrained">
         <div class="tabbed-content-row__tabs">
              {{> @tab isActive = true }}
              {{> @tab }}
              {{> @tab }}
        </div>
        <div class="tabbed-content-row__tab-dropdown">
              <select class="tab paragraph dropdown">
                <option selected>EXAMPLE TAB</option>
                <option >EXAMPLE TAB</option>
                <option >EXAMPLE TAB</option>
              </select>
        </div>
        <div class="tabbed-content-row__container">
                <div class="tabbed-content-row__image image-container">
                    <img src="/placeholder.png" />
                </div>
                <div class="tabbed-content-row__text">
                    <div class="tabbed-content-row__text-container">
                        <div class="tabbed-content-row__title heading-2">{{title}}</div>
                        <div class="tabbed-content-row__copy paragraph">{{copy}}</div>
                        <div class="flex-row-responsive">
                            {{> @primary-cta }}
                        </div>              
                    </div>
                </div>
            </div>
    </div>
 
</div>
 
{
  "title": "About us",
  "copy": "We’re an ambitious, innovative and aspirational company that aims to bring a radical, new approach to development by creating sustainable communities that understand and meet the needs of people.We’re an ambitious, innovative and aspirational company that aims to bring a radical, new approach to development by creating sustainable communities that understand and meet the needs of people.",
  "inverse": true
}

No notes defined.