fractal example

Example component 

<div class="footer">
    <div class="footer__container container-constrained">
        <div class="footer__container-top">
            <div class="footer__top-logo">
                <img src="/ytl-logo.png" />
            </div>
            <div class="footer__primary">
                <div class="footer__primary-section">
                    <div class="footer__primary-title">About us</div>
                    <a href="/" class="footer__primary-link">Footer Link</a>
                    <a href="/" class="footer__primary-link">Footer Link</a>
                    <a href="/" class="footer__primary-link">Footer Link</a>
                    <a href="/" class="footer__primary-link">Footer Link</a>
                    <a href="/" class="footer__primary-link">Footer Link</a>
                    <div class="footer__primary-social">
                    </div>

                </div>

                <div class="footer__primary-section">
                    <div class="footer__primary-title">About us</div>
                    <a href="/" class="footer__primary-link">Footer Link</a>
                    <a href="/" class="footer__primary-link">Footer Link</a>
                    <a href="/" class="footer__primary-link">Footer Link</a>
                    <a href="/" class="footer__primary-link">Footer Link</a>
                    <a href="/" class="footer__primary-link">Footer Link</a>
                    <div class="footer__primary-social">
                    </div>

                </div>

                <div class="footer__primary-section">
                    <div class="footer__primary-title">About us</div>
                    <a href="/" class="footer__primary-link">Footer Link</a>
                    <a href="/" class="footer__primary-link">Footer Link</a>
                    <a href="/" class="footer__primary-link">Footer Link</a>
                    <a href="/" class="footer__primary-link">Footer Link</a>
                    <a href="/" class="footer__primary-link">Footer Link</a>
                    <div class="footer__primary-social">
                        <a href="https://linkedin.com" class="footer__social-link">
                            <img src="/linkedin.svg" />
                        </a>
                        <a href="https://youtube.com" class="footer__social-link">
                            <img src="/youtube.svg" />
                        </a>
                    </div>

                </div>

            </div>
        </div>
        <div class="footer__container-bottom">
            <a href="/" class="footer__bottom-link">Test title</a>
            <a href="/" class="footer__bottom-link">Test title</a>
            <a href="/" class="footer__bottom-link">Test title</a>
            <a href="/" class="footer__bottom-link">Test title</a>
        </div>
    </div>
</div>
 
{{!< layouts}}

<div class="footer">
    <div class="footer__container container-constrained">
      <div class="footer__container-top">
        <div class="footer__top-logo">
          <img  src="/ytl-logo.png" />
        </div>
        <div class="footer__primary">
           {{#each linkGroups}}
              <div class="footer__primary-section">
                <div class="footer__primary-title">{{title}}</div>
                {{#each links}}        
                  <a href="{{url}}"class="footer__primary-link">{{title}}</a>        
                {{/each}}
                <div class="footer__primary-social">
                {{#each socialLinks}}        
                  <a href="{{url}}"class="footer__social-link">
                    <img src="{{imageUrl}}"/>                    
                  </a>        
                {{/each}}
                </div>
               
              </div>
               
            {{/each}}
         
        </div>
      </div>
      <div class="footer__container-bottom">
            {{#each bottomLinks}}        
                  <a href="{{url}}"class="footer__bottom-link">{{title}}</a>        
                {{/each}}
      </div>
    </div>
</div>
 
{
  "title": "This is an example of a news article title",
  "date": "Xth July 2023",
  "linkGroups": [
    {
      "title": "About us",
      "links": [
        {
          "title": "Footer Link",
          "url": "/"
        },
        {
          "title": "Footer Link",
          "url": "/"
        },
        {
          "title": "Footer Link",
          "url": "/"
        },
        {
          "title": "Footer Link",
          "url": "/"
        },
        {
          "title": "Footer Link",
          "url": "/"
        }
      ]
    },
    {
      "title": "About us",
      "links": [
        {
          "title": "Footer Link",
          "url": "/"
        },
        {
          "title": "Footer Link",
          "url": "/"
        },
        {
          "title": "Footer Link",
          "url": "/"
        },
        {
          "title": "Footer Link",
          "url": "/"
        },
        {
          "title": "Footer Link",
          "url": "/"
        }
      ]
    },
    {
      "title": "About us",
      "links": [
        {
          "title": "Footer Link",
          "url": "/"
        },
        {
          "title": "Footer Link",
          "url": "/"
        },
        {
          "title": "Footer Link",
          "url": "/"
        },
        {
          "title": "Footer Link",
          "url": "/"
        },
        {
          "title": "Footer Link",
          "url": "/"
        }
      ],
      "socialLinks": [
        {
          "imageUrl": "/linkedin.svg",
          "url": "https://linkedin.com"
        },
        {
          "imageUrl": "/youtube.svg",
          "url": "https://youtube.com"
        }
      ]
    }
  ],
  "bottomLinks": [
    {
      "title": "Test title",
      "url": "/"
    },
    {
      "title": "Test title",
      "url": "/"
    },
    {
      "title": "Test title",
      "url": "/"
    },
    {
      "title": "Test title",
      "url": "/"
    }
  ]
}

No notes defined.