fractal example

Example component: Inverse 

<div class="highlight-row inverse">

    <div class="highlight-row__container container-constrained">
        <div class="highlight-row__text">
            <h4 class="heading-2 highlight-row__heading">Award winning property developers</h4>
            <div class="heading-5 highlight-row__subheading">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="secondary-cta">
                <div class="secondary-cta__text">Find out more</div>
                <div class="secondary-cta__arrow"><img src="/right-arrow.svg" /></div>
            </div>
        </div>
        <div class="highlight-row__highlights">
            <div class="highlight-row__highlight-wrapper">

                <div class="statistic">
                    <div class="statistic__content">
                        <div class="heading-1 statistic__data">XX</div>
                        <div class="heading-4 statistic__description">Statistic to go here</div>
                    </div>
                </div>
            </div>
            <div class="highlight-row__highlight-wrapper">

                <div class="statistic">
                    <div class="statistic__content">
                        <div class="heading-1 statistic__data">XX</div>
                        <div class="heading-4 statistic__description">Statistic to go here</div>
                    </div>
                </div>
            </div>
            <div class="highlight-row__highlight-wrapper">

                <div class="statistic">
                    <div class="statistic__content">
                        <div class="heading-1 statistic__data">XX</div>
                        <div class="heading-4 statistic__description">Statistic to go here</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
 
{{!< layouts}}

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

    <div class="highlight-row__container container-constrained">
        <div class="highlight-row__text">
            <h4 class="heading-2 highlight-row__heading">{{heading}}</h4>
            <div class="heading-5 highlight-row__subheading" >{{subheading}}</div>
                  {{> @secondary-cta }}
        </div>
        <div class="highlight-row__highlights">
             {{#each highlights}}
                <div class="highlight-row__highlight-wrapper">
                    {{> @statistic }}
                </div>           
            {{/each}}
        </div>
    </div>
</div>
 
{
  "heading": "Award winning property developers",
  "subheading": "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.",
  "highlights": [
    {
      "data": "XX",
      "description": "Statistic to go here"
    },
    {
      "data": "XX",
      "description": "Statistic to go here"
    },
    {
      "data": "XX",
      "description": "Statistic to go here"
    }
  ],
  "inverse": true
}

No notes defined.