FTSE Russell Styleguide

Footer 

<footer class="footer">
    <div class="footer__top alternative">
        <h3>Our Weekly Index Newsletter</h3>
        <p>Get up to the minute information</p>
        <div class="footer__newsletter">
            <form class="footer__newsletter__form grid">
                <div class="input-field form__item__wrapper form__item--inline">
                    <div class="input-field"><input class="browser-default form__item form__item--text form__item--inverted " type="text" name="Input Type Text" placeholder=" First Name"></div>
                </div>
                <div class="input-field form__item__wrapper form__item--inline">
                    <div class="input-field"><input class="browser-default form__item form__item--text form__item--inverted " type="text" name="Input Type Text" placeholder=" Last Name"></div>
                </div>
                <div class="input-field form__item__wrapper form__item--inline">
                    <div class="input-field"><input class="browser-default form__item form__item--email form__item--inverted " type="email" name="E-mail" placeholder=" E-mail"></div>
                </div>
                <div class="input-field form__item__wrapper form__item--inline">
                    <div class="input-field">
                        <select class="browser-default form__item form__item--select form__item--select--inverted" type="select" name="" placeholder=" " required>
    
    <option value="" >Region</option>
    
    <option value="" >United Stated</option>
    
    <option value="" >United Kingdom</option>
    
    <option value="" >Mexico</option>
    
    <option value="" >Germany</option>
    
  </select>
                    </div>
                </div>
                <div class="input-field form__item__wrapper form__item--inline checkbox"><span class="input-field">By submitting this form, you consent to receiving email communications from FTSE Russell and the London Stock Exchange Group of companies (together, “LSEG”). LSEG will update your email preferences and hold your details in its contact database which can be accessed by LSEG group companies. For more information on how LSEG uses your data, see our Privacy Policy. For more information about LSEG group companies, see LSEG.com.</span></div>
                <div class="input-field form__item__wrapper form__item--inline"><button class="btn btn-large waves-effect waves-light btn--submit form__item">Sign Up</button></div>
            </form>
        </div>
    </div>
    <div class="footer__middle grid">
        <div class="grid col col-grow-3 footer__middle_col footer__partners">
            <div class="footer__logo text--center col">
                <a href="#"><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 48 48" style="enable-background:new 0 0 48 48;" xml:space="preserve"> <style type="text/css"> .st0{fill:#531732;} .st1{fill:#FFFFFF;} </style> <g id="Page-1"> <g id="whiteout"> <path id="Shape" class="st0" d="M23.8,48C37,48.1,47.9,37.4,48,24.2C48.1,11,37.4,0.1,24.2,0S0.1,10.6,0,23.8 c-0.1,6.4,2.4,12.6,6.9,17C11.3,45.4,17.4,47.9,23.8,48"/> <path id="Shape_1_" class="st1" d="M12.7,29.1c0.8-0.4,1.2-1.1,1.2-2s-0.7-2.1-2.4-2.1H9.2V32h1.3v-2.7h0.9l1.5,2.8h1.5L12.7,29.1 z M11.5,28.1h-1.1v-2h1.1c0.7,0,1.1,0.4,1.1,1.1C12.5,27.7,12.1,28.1,11.5,28.1L11.5,28.1z"/> <path id="Shape_2_" class="st1" d="M14.8,27.1H16v3.1c0,0.7,0.4,0.9,0.9,0.9c0.7,0,1.2-0.5,1.2-1.3v-2.7h1.2V32h-1.2v-0.5 c-0.4,0.4-0.9,0.7-1.5,0.7c-1.2,0-1.9-0.8-1.9-2V27.1z"/> <polygon id="Shape_3_" class="st1" points="17.9,18.7 14.9,18.7 14.9,16.8 18.1,16.8 18.1,15.6 13.6,15.6 13.6,22.7 14.9,22.7 14.9,19.9 17.9,19.9 		"/> <polygon id="Shape_4_" class="st1" points="20.7,22.7 22,22.7 22,16.8 23.9,16.8 23.9,15.6 18.8,15.6 18.8,16.8 20.7,16.8 		"/> <polygon id="Shape_5_" class="st1" points="31.6,19.6 34.4,19.6 34.4,18.5 31.6,18.5 31.6,16.8 34.8,16.8 34.8,15.6 30.3,15.6 30.3,22.7 34.8,22.7 34.8,21.5 31.6,21.5 		"/> <rect id="Rectangle-path" x="35.6" y="24.9" class="st1" width="1.2" height="7.1"/> <rect id="Rectangle-path_1_" x="37.9" y="24.9" class="st1" width="1.2" height="7.1"/> <path id="Shape_6_" class="st1" d="M22.3,32.3c-0.7,0-1.5-0.1-2-0.5l0.5-0.9c0.1,0,0.8,0.4,1.5,0.4c0.7,0,0.9-0.3,0.9-0.5 s-0.4-0.5-1.3-0.8c-0.5-0.1-1.3-0.5-1.3-1.5s0.8-1.6,2.1-1.6c1.2,0,1.7,0.4,1.7,0.4l-0.5,0.9c-0.4-0.3-0.8-0.4-1.3-0.4 s-0.8,0.3-0.8,0.4c0,0.4,0.5,0.5,1.1,0.7c0.8,0.3,1.5,0.5,1.5,1.6C24.3,31.5,23.6,32.3,22.3,32.3z"/> <path id="Shape_7_" class="st1" d="M27.1,32.3c-0.7,0-1.5-0.1-2-0.5l0.5-0.9c0.1,0,0.8,0.4,1.5,0.4s0.9-0.3,0.9-0.5 s-0.4-0.5-1.3-0.8c-0.5-0.1-1.3-0.5-1.3-1.5s0.8-1.6,2.1-1.6c1.2,0,1.7,0.4,1.7,0.4l-0.5,0.9c-0.4-0.3-0.8-0.4-1.3-0.4 s-0.8,0.3-0.8,0.4c0,0.4,0.5,0.5,1.1,0.7c0.8,0.3,1.5,0.5,1.5,1.6C29.1,31.5,28.4,32.3,27.1,32.3z"/> <path id="Shape_8_" class="st1" d="M34.8,29.7c0-1.2-0.7-2.8-2.4-2.8c-1.5,0-2.5,1.1-2.5,2.5c0,1.6,1.1,2.7,2.7,2.7 c0.8,0,1.5-0.3,2.1-0.7l-0.5-0.8c-0.5,0.4-1.1,0.5-1.6,0.5c-0.7,0-1.3-0.5-1.3-1.2h3.7L34.8,29.7z M31.1,29.1 c0-0.5,0.4-1.1,1.3-1.1c0.3,0,0.5,0.1,0.8,0.3c0.3,0.3,0.4,0.5,0.4,0.8C33.6,29.1,31.1,29.1,31.1,29.1z"/> <path id="Shape_9_" class="st1" d="M26.7,22.9c-1.5,0-2.3-0.8-2.4-0.8l0.7-0.9c0.1,0.1,0.8,0.5,1.6,0.5c0.8,0,1.3-0.4,1.3-0.9 c0-0.5-0.4-0.8-1.7-1.2c-1.1-0.4-1.9-0.8-1.9-2c0-1.3,1.1-2.1,2.5-2.1s2.1,0.7,2.3,0.8l-0.7,0.9c-0.4-0.3-1.1-0.5-1.6-0.5 c-0.7,0-1.1,0.4-1.1,0.8c0,0.5,0.4,0.8,1.5,1.2c1.1,0.4,2,0.8,2,2.1C29.3,22,28.3,22.9,26.7,22.9z"/> </g> </g> </svg> </a>
                <p class="text--small text--center">Partner Websites</p>
            </div>
            <div class="col partners">
                <nav class="menubar" aria-label="Partners">
                    <h2 class="visuallyhidden">Partner Websites</h2>
                    <div class="grid navbar__partners">
                        <ul class="col nav navbar__partners--left" role="menubar" aria-hidden="false">

                            <li>
                                <a class="navbar__partners_item__link" href="#">London Stock Exchange Group</a>
                            </li>

                            <li>
                                <a class="navbar__partners_item__link" href="#">Mergent</a>
                            </li>

                            <li>
                                <a class="navbar__partners_item__link" href="#">ICB</a>
                            </li>

                        </ul>

                        <ul class="col nav navbar__partners--right" role="menubar" aria-hidden="false">

                            <li>
                                <a class="navbar__partners_item__link" href="#">FTSE Japan</a>
                            </li>

                            <li>
                                <a class="navbar__partners_item__link" href="#">FTSE China</a>
                            </li>

                            <li>
                                <a class="navbar__partners_item__link" href="#">FTSE Korea</a>
                            </li>

                        </ul>

                    </div>
                </nav>
            </div>
        </div>
        <div class="col col-grow-2 footer__middle_col footer__menu grid">

            <div class="col footer__menu--left">
                <nav class="menubar" aria-label="Footer Menu">
                    <h2 class="visuallyhidden">Footer Menu</h2>
                    <ul class="nav navbar__footer-menu" role="menubar" aria-hidden="false">

                        <li>
                            <a class="navbar__footer-menu_item__link" href="#">Indexes</a>
                        </li>

                        <li>
                            <a class="navbar__footer-menu_item__link" href="#">Research</a>
                        </li>

                        <li>
                            <a class="navbar__footer-menu_item__link" href="#">Analytics</a>
                        </li>

                        <li>
                            <a class="navbar__footer-menu_item__link" href="#">Data</a>
                        </li>

                        <li>
                            <a class="navbar__footer-menu_item__link" href="#">Blog & Events</a>
                        </li>

                    </ul>
                </nav>
            </div>
            <div class="col footer__menu--right">
                <nav class="menubar" aria-label="Footer Menu Secondary">
                    <h2 class="visuallyhidden">Footer Menu Secondary</h2>
                    <ul class="nav navbar__footer-menu--secondary" role="menubar" aria-hidden="false">

                        <li>
                            <a class="navbar__footer-menu_item__link" href="#">About Us</a>
                        </li>

                        <li>
                            <a class="navbar__footer-menu_item__link" href="#">Contact</a>
                        </li>

                        <li>
                            <a class="navbar__footer-menu_item__link" href="#">Support Portal</a>
                        </li>

                        <li>
                            <a class="navbar__footer-menu_item__link" href="#">Client Portal</a>
                        </li>

                        <li>
                            <a class="navbar__footer-menu_item__link" href="#">Careers</a>
                        </li>

                        <li>
                            <a class="navbar__footer-menu_item__link" href="#">Sitemap</a>
                        </li>

                    </ul>
                </nav>
            </div>
        </div>
        <div class="col footer__middle_col footer__social">
            <h6>Follow Us</h6>
            <ul>

                <li>
                    <a class="navbar__footer-menu_item__link" href="">
            <svg class="icon">
              <use xlink:href="/assets/sprites/icons.svg#ico-twitter-circle"></use>
            </svg>
            <span>Twitter</span>
          </a>
                </li>

                <li>
                    <a class="navbar__footer-menu_item__link" href="">
            <svg class="icon">
              <use xlink:href="/assets/sprites/icons.svg#ico-linkedin-circle"></use>
            </svg>
            <span>LinkedIn</span>
          </a>
                </li>

                <li>
                    <a class="navbar__footer-menu_item__link" href="">
            <svg class="icon">
              <use xlink:href="/assets/sprites/icons.svg#ico-youtube"></use>
            </svg>
            <span>YouTube</span>
          </a>
                </li>

                <li>
                    <a class="navbar__footer-menu_item__link" href="">
            <svg class="icon">
              <use xlink:href="/assets/sprites/icons.svg#ico-press"></use>
            </svg>
            <span>Press</span>
          </a>
                </li>

            </ul>
        </div>
    </div>
    <div class="footer__bottom grid text--center">
        <nav class="col footer__bottom-nav" aria-label="Footer Bottom Menu">
            <h2 class="visuallyhidden">Footer Bottom Menu</h2>
            <ul class="nav navbar__footer__bottom-menu grid" role="menubar" aria-hidden="false">

                <li>
                    <a class="navbar__footer__bottom-menu_item__link" href="#">Privacy & Cookie Policy</a>
                </li>

                <li>
                    <a class="navbar__footer__bottom-menu_item__link" href="#">Website Terms & Conditions</a>
                </li>

                <li>
                    <a class="navbar__footer__bottom-menu_item__link" href="#">Legal Disclaimer</a>
                </li>

                <li>
                    <a class="navbar__footer__bottom-menu_item__link" href="#">Attribution Requirements</a>
                </li>

            </ul>
        </nav>
        <p class="col copyright">© Copyright FTSE Russell 2018</p>
    </div>
</footer>
 
<footer class="footer">
  <div class="footer__top alternative">
    <h3>{{ form.title }}</h3>
    <p>{{ form.subtitle }}</p>
    <div class="footer__newsletter">
      <form class="footer__newsletter__form grid">
        <div class="input-field form__item__wrapper form__item--inline">{% render '@input--default', form.firstName, true  %}</div>
        <div class="input-field form__item__wrapper form__item--inline">{% render '@input--default', form.lastName, true  %}</div>
        <div class="input-field form__item__wrapper form__item--inline">{% render '@input--email', form.email, true %}</div>
        <div class="input-field form__item__wrapper form__item--inline">{% render '@select', form.select, true %}</div>
        <div class="input-field form__item__wrapper form__item--inline checkbox"><span class="input-field">{{ form.consentText }}</span></div>
        <div class="input-field form__item__wrapper form__item--inline"><button class="btn btn-large waves-effect waves-light btn--submit form__item">{{ form.buttonText }}</button></div>
      </form>
    </div>
  </div>
  <div class="footer__middle grid">
    <div class="grid col col-grow-3 footer__middle_col footer__partners">
        <div class="footer__logo text--center col">
          <a href="#">{{ logo.src }}</a>
          <p class="text--small text--center">Partner Websites</p>
        </div>
        <div class="col partners">
          <nav class="menubar" aria-label="Partners">
            <h2 class="visuallyhidden">Partner Websites</h2>
            <div class="grid navbar__partners">
              <ul class="col nav navbar__partners--left" role="menubar" aria-hidden="false">
                {% for partner in partnersItemsFirst %}
                <li>
                  <a class="navbar__partners_item__link" href="#">{{ partner.title }}</a>
                </li>
                {% endfor %}
              </ul>

              <ul class="col nav navbar__partners--right" role="menubar" aria-hidden="false">
                {% for partner in partnersItemsSecond %}
                <li>
                  <a class="navbar__partners_item__link" href="#">{{ partner.title }}</a>
                </li>
                {% endfor %}
              </ul>

            </div>
          </nav>
        </div>
    </div>
    <div class="col col-grow-2 footer__middle_col footer__menu grid">

      <div class="col footer__menu--left">
        <nav class="menubar" aria-label="Footer Menu">
          <h2 class="visuallyhidden">Footer Menu</h2>
          <ul class="nav navbar__footer-menu" role="menubar" aria-hidden="false">
            {% for item in footerMenu %}
            <li>
              <a class="navbar__footer-menu_item__link" href="#">{{ item.title }}</a>
            </li>
             {% endfor %}
          </ul>
        </nav>
      </div>
      <div class="col footer__menu--right">
        <nav class="menubar" aria-label="Footer Menu Secondary">
          <h2 class="visuallyhidden">Footer Menu Secondary</h2>
          <ul class="nav navbar__footer-menu--secondary" role="menubar" aria-hidden="false">
            {% for item in footerMenuSecondary %}
            <li>
              <a class="navbar__footer-menu_item__link" href="#">{{ item.title }}</a>
            </li>
             {% endfor %}
          </ul>
        </nav>
      </div>
    </div>
    <div class="col footer__middle_col footer__social">
      <h6>{{ socialMediaTitle }}</h6>
      <ul>
        {% for item in socialMedia %}
        <li>
          <a class="navbar__footer-menu_item__link" href="">
            <svg class="icon">
              <use xlink:href="/assets/sprites/icons.svg#{{ item.icon }}"></use>
            </svg>
            <span>{{ item.title }}</span>
          </a>
        </li>
         {% endfor %}
      </ul>
    </div>
  </div>
  <div class="footer__bottom grid text--center">
    <nav class="col footer__bottom-nav" aria-label="Footer Bottom Menu">
      <h2 class="visuallyhidden">Footer Bottom Menu</h2>
      <ul class="nav navbar__footer__bottom-menu grid" role="menubar" aria-hidden="false">
        {% for item in footerBottomMenu %}
        <li>
          <a class="navbar__footer__bottom-menu_item__link" href="#">{{ item.title }}</a>
        </li>
         {% endfor %}
      </ul>
    </nav>
    <p class="col copyright">{{ copyright }}</p>
  </div>
</footer>
 
{
  "copyright": "© Copyright FTSE Russell 2018",
  "form": {
    "title": "Our Weekly Index Newsletter",
    "subtitle": "Get up to the minute information",
    "consentText": "By submitting this form, you consent to receiving email communications from FTSE Russell and the London Stock Exchange Group of companies (together, “LSEG”). LSEG will update your email preferences and hold your details in its contact database which can be accessed by LSEG group companies. For more information on how LSEG uses your data, see our Privacy Policy. For more information about LSEG group companies, see LSEG.com.",
    "firstName": {
      "mod": "inverted",
      "placeholder": "First Name"
    },
    "lastName": {
      "mod": "inverted",
      "placeholder": "Last Name"
    },
    "email": {
      "mod": "inverted",
      "placeholder": "E-mail"
    },
    "select": {
      "mod": "inverted",
      "options": [
        {
          "value": null,
          "title": "Region",
          "selected": true
        },
        {
          "value": "USA",
          "title": "United Stated",
          "selected": null
        },
        {
          "value": "UK",
          "title": "United Kingdom",
          "selected": null
        },
        {
          "value": "MX",
          "title": "Mexico",
          "selected": null
        },
        {
          "value": "DE",
          "title": "Germany",
          "selected": null
        }
      ]
    },
    "buttonText": "Sign Up"
  },
  "socialMediaTitle": "Follow Us",
  "socialMedia": [
    {
      "title": "Twitter",
      "icon": "ico-twitter-circle"
    },
    {
      "title": "LinkedIn",
      "icon": "ico-linkedin-circle"
    },
    {
      "title": "YouTube",
      "icon": "ico-youtube"
    },
    {
      "title": "Press",
      "icon": "ico-press"
    }
  ],
  "partnersItemsFirst": [
    {
      "title": "London Stock Exchange Group",
      "url": "#",
      "description": "London Stock Exchange Group",
      "enabled": true
    },
    {
      "title": "Mergent",
      "url": "#",
      "description": "Mergent",
      "enabled": true
    },
    {
      "title": "ICB",
      "url": "#",
      "description": "ICB",
      "enabled": true
    }
  ],
  "partnersItemsSecond": [
    {
      "title": "FTSE Japan",
      "url": "#",
      "description": "FTSE Japan",
      "enabled": true
    },
    {
      "title": "FTSE China",
      "url": "#",
      "description": "FTSE China",
      "enabled": true
    },
    {
      "title": "FTSE Korea",
      "url": "#",
      "description": "FTSE Korea",
      "enabled": true
    }
  ],
  "footerMenu": [
    {
      "title": "Indexes",
      "url": "#",
      "description": "Indexes",
      "enabled": true
    },
    {
      "title": "Research",
      "url": "#",
      "description": "Research",
      "enabled": true
    },
    {
      "title": "Analytics",
      "url": "#",
      "description": "Analytics",
      "enabled": true
    },
    {
      "title": "Data",
      "url": "#",
      "description": "Data",
      "enabled": true
    },
    {
      "title": "Blog & Events",
      "url": "#",
      "description": "Blog & Events",
      "enabled": true
    }
  ],
  "footerMenuSecondary": [
    {
      "title": "About Us",
      "url": "#",
      "description": "About Us",
      "enabled": true
    },
    {
      "title": "Contact",
      "url": "#",
      "description": "Contact",
      "enabled": true
    },
    {
      "title": "Support Portal",
      "url": "#",
      "description": "Support Portal",
      "enabled": true
    },
    {
      "title": "Client Portal",
      "url": "#",
      "description": "Client Portal",
      "enabled": true
    },
    {
      "title": "Careers",
      "url": "#",
      "description": "Careers",
      "enabled": true
    },
    {
      "title": "Sitemap",
      "url": "#",
      "description": "Sitemap",
      "enabled": true
    }
  ],
  "footerBottomMenu": [
    {
      "title": "Privacy & Cookie Policy",
      "url": "#",
      "description": "Privacy & Cookie Policy",
      "enabled": true
    },
    {
      "title": "Website Terms & Conditions",
      "url": "#",
      "description": "Website Terms & Conditions",
      "enabled": true
    },
    {
      "title": "Legal Disclaimer",
      "url": "#",
      "description": "Legal Disclaimer",
      "enabled": true
    },
    {
      "title": "Attribution Requirements",
      "url": "#",
      "description": "Attribution Requirements",
      "enabled": true
    }
  ],
  "logo": {
    "src": "<svg version=\"1.1\" id=\"Layer_1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\" viewBox=\"0 0 48 48\" style=\"enable-background:new 0 0 48 48;\" xml:space=\"preserve\"> <style type=\"text/css\"> .st0{fill:#531732;} .st1{fill:#FFFFFF;} </style> <g id=\"Page-1\"> <g id=\"whiteout\"> <path id=\"Shape\" class=\"st0\" d=\"M23.8,48C37,48.1,47.9,37.4,48,24.2C48.1,11,37.4,0.1,24.2,0S0.1,10.6,0,23.8 c-0.1,6.4,2.4,12.6,6.9,17C11.3,45.4,17.4,47.9,23.8,48\"/> <path id=\"Shape_1_\" class=\"st1\" d=\"M12.7,29.1c0.8-0.4,1.2-1.1,1.2-2s-0.7-2.1-2.4-2.1H9.2V32h1.3v-2.7h0.9l1.5,2.8h1.5L12.7,29.1 z M11.5,28.1h-1.1v-2h1.1c0.7,0,1.1,0.4,1.1,1.1C12.5,27.7,12.1,28.1,11.5,28.1L11.5,28.1z\"/> <path id=\"Shape_2_\" class=\"st1\" d=\"M14.8,27.1H16v3.1c0,0.7,0.4,0.9,0.9,0.9c0.7,0,1.2-0.5,1.2-1.3v-2.7h1.2V32h-1.2v-0.5 c-0.4,0.4-0.9,0.7-1.5,0.7c-1.2,0-1.9-0.8-1.9-2V27.1z\"/> <polygon id=\"Shape_3_\" class=\"st1\" points=\"17.9,18.7 14.9,18.7 14.9,16.8 18.1,16.8 18.1,15.6 13.6,15.6 13.6,22.7 14.9,22.7 14.9,19.9 17.9,19.9 \t\t\"/> <polygon id=\"Shape_4_\" class=\"st1\" points=\"20.7,22.7 22,22.7 22,16.8 23.9,16.8 23.9,15.6 18.8,15.6 18.8,16.8 20.7,16.8 \t\t\"/> <polygon id=\"Shape_5_\" class=\"st1\" points=\"31.6,19.6 34.4,19.6 34.4,18.5 31.6,18.5 31.6,16.8 34.8,16.8 34.8,15.6 30.3,15.6 30.3,22.7 34.8,22.7 34.8,21.5 31.6,21.5 \t\t\"/> <rect id=\"Rectangle-path\" x=\"35.6\" y=\"24.9\" class=\"st1\" width=\"1.2\" height=\"7.1\"/> <rect id=\"Rectangle-path_1_\" x=\"37.9\" y=\"24.9\" class=\"st1\" width=\"1.2\" height=\"7.1\"/> <path id=\"Shape_6_\" class=\"st1\" d=\"M22.3,32.3c-0.7,0-1.5-0.1-2-0.5l0.5-0.9c0.1,0,0.8,0.4,1.5,0.4c0.7,0,0.9-0.3,0.9-0.5 s-0.4-0.5-1.3-0.8c-0.5-0.1-1.3-0.5-1.3-1.5s0.8-1.6,2.1-1.6c1.2,0,1.7,0.4,1.7,0.4l-0.5,0.9c-0.4-0.3-0.8-0.4-1.3-0.4 s-0.8,0.3-0.8,0.4c0,0.4,0.5,0.5,1.1,0.7c0.8,0.3,1.5,0.5,1.5,1.6C24.3,31.5,23.6,32.3,22.3,32.3z\"/> <path id=\"Shape_7_\" class=\"st1\" d=\"M27.1,32.3c-0.7,0-1.5-0.1-2-0.5l0.5-0.9c0.1,0,0.8,0.4,1.5,0.4s0.9-0.3,0.9-0.5 s-0.4-0.5-1.3-0.8c-0.5-0.1-1.3-0.5-1.3-1.5s0.8-1.6,2.1-1.6c1.2,0,1.7,0.4,1.7,0.4l-0.5,0.9c-0.4-0.3-0.8-0.4-1.3-0.4 s-0.8,0.3-0.8,0.4c0,0.4,0.5,0.5,1.1,0.7c0.8,0.3,1.5,0.5,1.5,1.6C29.1,31.5,28.4,32.3,27.1,32.3z\"/> <path id=\"Shape_8_\" class=\"st1\" d=\"M34.8,29.7c0-1.2-0.7-2.8-2.4-2.8c-1.5,0-2.5,1.1-2.5,2.5c0,1.6,1.1,2.7,2.7,2.7 c0.8,0,1.5-0.3,2.1-0.7l-0.5-0.8c-0.5,0.4-1.1,0.5-1.6,0.5c-0.7,0-1.3-0.5-1.3-1.2h3.7L34.8,29.7z M31.1,29.1 c0-0.5,0.4-1.1,1.3-1.1c0.3,0,0.5,0.1,0.8,0.3c0.3,0.3,0.4,0.5,0.4,0.8C33.6,29.1,31.1,29.1,31.1,29.1z\"/> <path id=\"Shape_9_\" class=\"st1\" d=\"M26.7,22.9c-1.5,0-2.3-0.8-2.4-0.8l0.7-0.9c0.1,0.1,0.8,0.5,1.6,0.5c0.8,0,1.3-0.4,1.3-0.9 c0-0.5-0.4-0.8-1.7-1.2c-1.1-0.4-1.9-0.8-1.9-2c0-1.3,1.1-2.1,2.5-2.1s2.1,0.7,2.3,0.8l-0.7,0.9c-0.4-0.3-1.1-0.5-1.6-0.5 c-0.7,0-1.1,0.4-1.1,0.8c0,0.5,0.4,0.8,1.5,1.2c1.1,0.4,2,0.8,2,2.1C29.3,22,28.3,22.9,26.7,22.9z\"/> </g> </g> </svg> ",
    "alt": "FTSE Russell",
    "size": 170
  }
}
  • Content: 
    .footer {
  background-color: $footer-middle-bg;
}

.footer__top {
  font-family: $font-family-sans-serif;
  font-size: $font-size-base;
  line-height: $line-height;
  font-weight: $font-weight-light;
  color: $white;
  text-align: center;
  padding: $space-xxl $spacer;
  background: url('../images/ming-e-yip-54208.jpg') center center / cover no-repeat scroll;
  background: linear-gradient(90deg, $primary-dark 0%, $secondary 100%);

  @include mq($breakpoint-lg) {
    padding: $space-xxl;
  }

  p {
     color: $white;
     opacity: 0.5;
     font-weight: $font-weight-light;
     padding-bottom: $space-md;
  }

  h3 {
    font-weight: $font-weight-light;
    margin-bottom: 0;
    font-size: $font-size-xl;
  }

}

.footer__newsletter {
  margin: 0 auto;

  .btn--submit {
    @include mq-only($breakpoint-mob) {
      width: 80%;
    }
  }

  input[type="email"],
  input[type="text"] {
    width: 100%;
  }

  input[type="checkbox"] {
    opacity: 1;
    pointer-events: auto;
    position: static;
  }
}

.footer__newsletter__form {
  grid-template-columns: 1fr;
  justify-content: center;

  @include mq($breakpoint-lg) {
    grid-template-columns: 2fr 2fr 2fr 1fr;
    grid-template-rows: 1fr 1fr;
    margin: 0 auto;
    max-width: 70vw;
  }

  .form__item__wrapper {
    //margin: $space-sm;
  }

  & > div {
    margin: 0;
    padding: 0;

    @include mq-only($breakpoint-mob) {
      width: 100%;
    }

    @include mq($breakpoint-lg) {
      &:nth-child(1) {
        flex-basis: 28.57%;
        grid-area: 1 / 1 / 1 / 1;
      }

      &:nth-child(2) {
        flex-basis: 28.57%;
        grid-area: 1 / 2 / 1 / 2;
      }

      &:nth-child(3) {
        flex-basis: 28.57%;
        grid-area: 1 / 3 / 1 / 3;
      }

      &:nth-child(4) {
        flex-basis: 14.29%;
        grid-area: 1 / 4 / 1 / 4;
      }

      &:nth-child(5) {
        flex-basis: 85.71%;
        grid-area: 2 / 1 / 2 / 4;
      }

      &:nth-child(6) {
        flex-basis: 14.29%;
        grid-area: 2 / 4 / 2 / 4;
      }
    }

    &:last-of-type {
      @include mq-only($breakpoint-mob) {
        padding-top: $space-sm;
      }

      @include mq($breakpoint-lg) {
        align-self: center;
        flex-basis: 13%;
      }
    }

    &.checkbox {
      text-align: left;

      & > * {
        display: inline-block;
        vertical-align: middle;
      }

      span {
        color: $white;
        font-weight: $font-weight-light;
        opacity: .75;
      }
    }
  }
}

.footer__middle {
  padding: 0 $spacer;
  font-size: $small-font-size;
  opacity: 0.9;
  background-color: $footer-middle-bg;
  grid-template-columns: 1fr;
  margin: 0 auto;
  max-width: $breakpoint-xxl;

  @include mq($breakpoint-lg) {
    grid-template-columns: 2fr 1.5fr 1fr;
    padding: $spacer*2 $spacer;
  }
}

.footer__middle_col{
  margin: 0;
  padding: $spacer ($spacer * 2);
  grid-template-columns: 1fr;

  @include mq($breakpoint-lg) {
    grid-template-columns: 1fr 1fr;
  }
}

.footer__middle_col:first-child {
  @include mq($breakpoint-lg) {
    padding: $spacer 0;
  }
}

.footer__middle_col:not(:last-child){
  @include mq($breakpoint-lg) {
    border-right: $border-width-thick solid $footer-separator;
  }
}

.footer__partners {
  @include mq($breakpoint-lg) {
    grid-template-columns: 1fr 2fr;
  }
}

.footer__logo svg{
  max-height: 170px;
  max-width: 170px;
  margin-bottom: $space-xs;

  .st0{
    fill: $footer-logo;
  }
}

.footer__logo p {
  color: $white;
  font-size: 16px;
  letter-spacing: .3em;
  text-transform: uppercase;

  @include mq($breakpoint-lg) {
    font-size: 10px;
  }
}

.footer__menu {
  @include mq-only($breakpoint-mob) {
    display: none;
  }
}

.navbar__partners {
  grid-template-columns: 1fr;
  margin: 0 $space-lg;

  @include mq($breakpoint-lg) {
    grid-template-columns: 1fr 1fr;
  }
}

.navbar__partners a,
.navbar__footer-menu--secondary a {
  color: $footer-logo;
  font-size: 1rem;
  font-weight: $font-weight-normal;
  letter-spacing: .1em;

  @include mq-only($breakpoint-mob) {
    line-height: 2;
  }

  @include mq($breakpoint-lg) {
    font-size: 13px;
    font-weight: $font-weight-light;
  }
}

.navbar__footer-menu--secondary a {
  line-height: 2;
}

.navbar__partners--right {
  display: flex;
  flex-direction: column;
}

.navbar__footer-menu a {
  color: $white;
  font-size: 14px;
  letter-spacing: .1em;
  line-height: 1.9;
  text-transform: uppercase;
}

.navbar__partners--left,
.navbar__partners--right,
.navbar__footer-menu,
.navbar__footer-menu--secondary,
.footer__social {
  margin: 0;

  @include mq-only($breakpoint-mob) {
    text-align: center;
  }

  li {
    padding: ( $space-xs / 2 ) 0px;
    line-height: 15px;
    margin: $space-xs 0;
  }
}

.footer__social {
  @include mq-only($breakpoint-mob) {
    border-top: $border-width-thick solid $footer-separator;
  }
}

.footer__social,
.footer__social a {
  color: $footer-logo;

  svg {
    fill: $white;
    height: 24px;
    margin-right: $space-md;
    width: 24px;
  }

  & > * {
    display: inline-block;
    vertical-align: middle;
  }
}

.footer__social h6 {
  color: $white;
  font-size: 12px;
  font-weight: $font-weight-normal;
  letter-spacing: .3em;
  padding-top: .25rem;
  text-transform: uppercase;
}

.footer__social ul {
  padding-top: .25rem;

  @include mq-only($breakpoint-mob) {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
  }
}

.footer__social li {
  letter-spacing: .1em;
  list-style: none;
}

.footer__bottom {
  color: $white;
  background: $footer-bottom-bg;
  font-size: $small-font-size;
  grid-template-columns: 1fr;
  margin: 0;
  padding: $spacer;

  & > * {
    @include mq($breakpoint-lg) {
      flex-basis: 100%;
    }
  }
}

.footer__bottom-nav {
  @include mq-only($breakpoint-mob) {
    order: 1;
  }
}

.navbar__footer__bottom-menu {
  justify-content: space-evenly;
  display: flex;
  flex-direction: column;

  @include mq-only($breakpoint-mob) {
    padding: $space-sm;
  }

  @include mq($breakpoint-lg) {
    display: inline-flex;
    flex-direction: row;
  }
}

.navbar__footer__bottom-menu_item__link {
  color: $footer-copyright;
  padding: 0 $space-xs;
  font-size: $font-size-sm;

  @include mq-only($breakpoint-mob) {
    line-height: 2;
  }

  @include mq($breakpoint-lg) {
    font-weight: $font-weight-light;
  }
}

.copyright {
  color: $footer-copyright;
  font-weight: $font-weight-normal;
  margin-bottom: 0;
  font-size: $font-size-sm;

  @include mq-only($breakpoint-mob) {
    line-height: 2;
  }

  @include mq($breakpoint-lg) {
    font-weight: $font-weight-light;
  }
}
  • URL: /components/raw/footer/_footer.scss
  • Filesystem Path: src/components/organisms/footer/_footer.scss
  • Size: 6.6 KB

There are no notes for this item.