fractal example

Example component 

<div class="nav">
    <div class="nav__top-bar">
        <img class="nav__logo" src="/ytl-logo.png" />
        <div class="nav__buttons-container">
            <div class="nav__hamburger-button">

                <div class="nav__hamburger-open">
                    <img src="/hamburger.svg" />
                    Menu
                </div>
                <div class="nav__hamburger-close">
                    <img src="/close.svg" />
                    Close
                </div>
            </div>
            <div class="nav__cta">Contact Us</div>
        </div>
    </div>
    <div class="nav__expandable">
        <div class="nav__primary-section">
            <div class="nav__primary-container">
                <div class="nav__home-button">Home</div>
                <div class="nav__primary-item has-children" data-section-id="1">About us</div>
                <div class="nav__primary-item has-children"> Our Projects</div>
                <div class="nav__primary-item has-children">Work with Us</div>
                <div class="nav__primary-item ">News</div>
                <div class="nav__search-input">
                    <img src="/search.svg" />
                    <input type="text" placeholder="Search">
                </div>
            </div>
            <div class="nav__cta-mobile">Contact Us</div>
        </div>
        <div class="nav__secondary-section">
            <div class="nav__secondary-return"><img src="/left-arrow-white.svg" />
                <div>Go Back</div>
                <div class="nav__secondary-return-spacer"></div>
            </div>
            <div class="nav__secondary-container" data-section-id="1" style="display:none">
                <div class="nav__secondary-item nav__secondary-title"><a href="/">About Us</a></div>
                <div class="nav__secondary-item"><a href="/">Our Story</a></div>
                <div class="nav__secondary-item"><a href="/">Our mission, vision & values</a></div>
                <div class="nav__secondary-item"><a href="/">Our people</a></div>
                <div class="nav__secondary-item"><a href="/">Diversity & inclusion</a></div>
                <div class="nav__secondary-item"><a href="/">Our responsibilities (ESG)</a></div>
            </div>
        </div>
    </div>
</div>
 
{{!< layouts}}

<div class="nav">
    <div class="nav__top-bar">
    <img class="nav__logo" src="/ytl-logo.png" />
    <div class="nav__buttons-container">
        <div class="nav__hamburger-button">
      
            <div class="nav__hamburger-open">
                      <img src="/hamburger.svg" />
                Menu
                </div>
              <div class="nav__hamburger-close">
                      <img src="/close.svg" />
                Close</div>
        </div>
         <div class="nav__cta">Contact Us</div>
    </div>
    </div>
    <div class="nav__expandable">
        <div class="nav__primary-section">
            <div class="nav__primary-container">
              <div class="nav__home-button">Home</div>
              <div class="nav__primary-item has-children" data-section-id="1">About us</div>
              <div class="nav__primary-item has-children"> Our Projects</div>
              <div class="nav__primary-item has-children">Work with Us</div>
              <div class="nav__primary-item ">News</div>
              <div class="nav__search-input">
                <img src="/search.svg" />
                <input type="text"  placeholder="Search">
              </div>
            </div>
             <div class="nav__cta-mobile">Contact Us</div>
        </div>
        <div class="nav__secondary-section">
            <div class="nav__secondary-return"><img src="/left-arrow-white.svg"/><div>Go Back</div><div class="nav__secondary-return-spacer"></div></div>
            <div class="nav__secondary-container" data-section-id="1" style="display:none">
                <div class="nav__secondary-item nav__secondary-title"><a href="/">About Us</a></div>
                 <div class="nav__secondary-item"><a href="/">Our Story</a></div>
                  <div class="nav__secondary-item"><a href="/">Our mission, vision & values</a></div>
                   <div class="nav__secondary-item"><a href="/">Our people</a></div>
                    <div class="nav__secondary-item"><a href="/">Diversity & inclusion</a></div>
                     <div class="nav__secondary-item"><a href="/">Our responsibilities (ESG)</a></div>
            </div>
        </div>
    </div>
</div>
 
{
  "title": "This is an example of a news article title",
  "date": "Xth July 2023",
  "description": "Inspired by an icon of engineering, Brabazon is a place that changes everything. A thriving new neighbourhood for Bristol and the most exciting new city."
}

No notes defined.