fractal example

Example component: Inverse 

<div class="downloads-row inverse">

    <div class="downloads-row__container container-constrained">
        <div class="downloads-row__text">
            <h4 class="heading-2 downloads-row__heading">Frequently Asked Questions</h4>
            <div class="heading-5 downloads-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="downloads-row__downloads">
            <div class="downloads-row__download-wrapper">

                <div class="download-button">

                    <div class="download-button__top">
                        <div class="download-button__top-text heading-5">
                            Download Example
                        </div>
                        <img class="download-button__top-icon" src="/download.svg" />
                    </div>
                </div>
            </div>
            <div class="downloads-row__download-wrapper">

                <div class="download-button">

                    <div class="download-button__top">
                        <div class="download-button__top-text heading-5">
                            Download Example
                        </div>
                        <img class="download-button__top-icon" src="/download.svg" />
                    </div>
                </div>
            </div>
            <div class="downloads-row__download-wrapper">

                <div class="download-button">

                    <div class="download-button__top">
                        <div class="download-button__top-text heading-5">
                            Download Example
                        </div>
                        <img class="download-button__top-icon" src="/download.svg" />
                    </div>
                </div>
            </div>
            <div class="downloads-row__download-wrapper">

                <div class="download-button">

                    <div class="download-button__top">
                        <div class="download-button__top-text heading-5">
                            Download Example
                        </div>
                        <img class="download-button__top-icon" src="/download.svg" />
                    </div>
                </div>
            </div>
            <div class="downloads-row__download-wrapper">

                <div class="download-button">

                    <div class="download-button__top">
                        <div class="download-button__top-text heading-5">
                            Download Example
                        </div>
                        <img class="download-button__top-icon" src="/download.svg" />
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
 
{{!< layouts}}

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

    <div class="downloads-row__container container-constrained">
        <div class="downloads-row__text">
            <h4 class="heading-2 downloads-row__heading">{{heading}}</h4>
            <div class="heading-5 downloads-row__subheading" >{{subheading}}</div>
        </div>
        <div class="downloads-row__downloads">
             {{#each downloads}}
                <div class="downloads-row__download-wrapper">
                    {{> @download-button }}
                </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.",
  "downloads": [
    {
      "title": "Download Example"
    },
    {
      "title": "Download Example"
    },
    {
      "title": "Download Example"
    },
    {
      "title": "Download Example"
    },
    {
      "title": "Download Example"
    }
  ],
  "inverse": true
}

No notes defined.