fractal example

Example component: Full Image Invert 

<div class="hero-row invert full-image ">
    <div class="hero-row__container">

        <div class="hero-row__text">
            <div class="hero-row__text-container">
                <div class="hero-row__subheading heading-5">Welcome to YTL Developments</div>
                <div class="hero-row__heading heading-1">
                    <h1>Award winning property developers</h1>
                </div>
                <div class="hero-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.</div>
                <div class="flex-row-responsive">

                    <div class="primary-cta white">
                        <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 class="hero-row__image image-container">
            <img src="/placeholder.png" />
            <img class="hero-row__logo" src="/ytl-logo-alt.svg" />
        </div>
    </div>
</div>
 
{{!< layouts}}

<div class="hero-row {{#if invert}}invert{{/if}} {{#if fullImage}}full-image{{/if}} {{#if fullOverlay}}full-overlay{{/if}}">
    <div class="hero-row__container">
      
        <div class="hero-row__text">
            <div class="hero-row__text-container">
                <div class="hero-row__subheading heading-5">{{subheading}}</div>
                <div class="hero-row__heading heading-1"><h1>{{heading}}</h1></div>
                <div class="hero-row__copy paragraph">{{copy}}</div>
                <div class="flex-row-responsive">
                    {{> @primary-cta isWhite=invert }}
                </div>
              
            </div>
        </div>
          <div class="hero-row__image image-container">
             <img src="/placeholder.png" />
             <img class="hero-row__logo" src="/ytl-logo-alt.svg"/>
        </div>
    </div>
</div>
 
{
  "subheading": "Welcome to YTL Developments",
  "heading": "Award winning property developers",
  "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.",
  "invert": true,
  "fullImage": true
}

No notes defined.