<header id="header" class="header theme--main">
<div class="lang-switcher-overlay"></div>
<div class="header__inner grid">
<div class="nav-toggle col col-align-middle" tabindex="0">
<div class="nav-toggle--wrapper">
<div class="nav-toggle__title">MENU</div>
<div class="nav-toggle__title close">CLOSE</div>
<div class="nav-toggle__spans">
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
<div class="header__logo col text--center">
<a href="#" title="← Back to the homepage">
<picture>
<source media="(min-width: 1350px)" srcset="/assets/images/ftse-russell-branded-logo.svg">
<img src="/assets/images/ftse-russell-branded-logo.svg" width="90" height="90" alt="FTSE Russell" />
</picture>
</a>
</div>
<div class="header__right col col-10">
<div class="header__top">
<div class="top-menu">
<nav class="nav navbar__top-menu text--right" aria-label="Top Menu">
<h2 class="visuallyhidden">Top Menu</h2>
<ul class="navbar__top-menu__links" role="menubar" aria-hidden="false">
<li class="navbar__top-menu__item" role="menuitem">
<a class="navbar__top-menu__item__link" href="#">About FTSE Russell</a>
</li>
<li class="navbar__top-menu__item" role="menuitem">
<a class="navbar__top-menu__item__link" href="#">Support Portal</a>
</li>
<li class="navbar__top-menu__item" role="menuitem">
<a class="navbar__top-menu__item__link" href="#">Client Login</a>
</li>
</ul>
</nav>
<nav role="navigation" class="language-switcher">
<h2 class="visuallyhidden">Language</h2>
<ul class="dropdown-menu" role="listbox" aria-hidden="false">
<li class="lang active">
<a title="Active Language English" tabindex="" href="#">English<i class='icon icon-caret'> <svg class="icon"><use xlink:href="/assets/sprites/icons.svg#ico-caret"></use></svg></i></a>
</li>
</ul>
<div class="lang-switcher__popup">
<ul class="languages-list">
<li class="lang active"><i class='icon icon-check'> <svg class="icon"><use xlink:href="/assets/sprites/icons.svg#ico-check"></use></svg></i> English</li>
<li class="lang"><a href="#" title="Language Français">Français</a></li>
<li class="lang"><a href="#" title="Language Deutsche">Deutsche</a></li>
<li class="lang"><a href="#" title="Language 日本語">日本語</a></li>
<li class="lang"><a href="#" title="Language 中文">中文</a></li>
<li class="lang"><a href="#" title="Language Español">Español</a></li>
</ul>
</div>
</nav>
</div>
</div>
<div class="header__bottom grid">
<div class="header__menu col col-10 col-align-middle">
<div class="main-menu">
<nav class="navbar main-menu__nav" aria-label="Main Menu">
<h2 class="visuallyhidden">Main Menu</h2>
<ul class="nav main-menu grid" role="navigation" aria-hidden="false">
<li class="main-menu__item has-dropdown" role="menuitem">
<div class="main-menu__item__inner">
<a class="main-menu__item__link" href="#">Indexes</a>
<i class='icon icon-chevron-down'> <svg class="icon">
<use xlink:href="/assets/sprites/icons.svg#ico-chevron-down"></use>
</svg></i><span class="caret"></span>
</div>
<ul class="submenu browser-default">
<li>
<a class="submenu__item__link" href="#">Indexes sub1<svg class="submenu-icon">
<use xlink:href="/assets/sprites/icons.svg#ico-chevron-down"></use>
</svg></a>
</li>
<li>
<a class="submenu__item__link" href="#">Indexes sub2<svg class="submenu-icon">
<use xlink:href="/assets/sprites/icons.svg#ico-chevron-down"></use>
</svg></a>
</li>
<li>
<a class="submenu__item__link" href="#">Indexes sub3<svg class="submenu-icon">
<use xlink:href="/assets/sprites/icons.svg#ico-chevron-down"></use>
</svg></a>
</li>
<li>
<a class="submenu__item__link" href="#">Indexes sub4<svg class="submenu-icon">
<use xlink:href="/assets/sprites/icons.svg#ico-chevron-down"></use>
</svg></a>
</li>
<li>
<a class="submenu__item__link" href="#">Indexes sub5<svg class="submenu-icon">
<use xlink:href="/assets/sprites/icons.svg#ico-chevron-down"></use>
</svg></a>
</li>
<li>
<a class="submenu__item__link" href="#">Indexes sub6<svg class="submenu-icon">
<use xlink:href="/assets/sprites/icons.svg#ico-chevron-down"></use>
</svg></a>
</li>
<li>
<a class="submenu__item__link" href="#">Indexes sub7<svg class="submenu-icon">
<use xlink:href="/assets/sprites/icons.svg#ico-chevron-down"></use>
</svg></a>
</li>
<li>
<a class="submenu__item__link" href="#">Indexes sub8<svg class="submenu-icon">
<use xlink:href="/assets/sprites/icons.svg#ico-chevron-down"></use>
</svg></a>
</li>
<li>
<a class="submenu__item__link" href="#">Indexes sub9<svg class="submenu-icon">
<use xlink:href="/assets/sprites/icons.svg#ico-chevron-down"></use>
</svg></a>
</li>
</ul>
<ul class="megamenu">
<div class="megamenu--wrapper container">
<div class="megamenu--inner grid">
<div class="megamenu__left col">
<div class="megamenu__featured">
<div class="megamenu__featured--title">
<h3>Indexes</h3>
<p>FTSE Russell Indexes</p>
</div>
<img src="" />
</div>
</div>
<div class="megamenu__middle col">
<ul class="megamenu__submenu">
<li>
<a class="megamenu__item__link" href="#">Indexes sub1</a>
<p>Indexes sub1 desc</p>
</li>
<li>
<a class="megamenu__item__link" href="#">Indexes sub2</a>
<p>Indexes sub2 desd</p>
</li>
<li>
<a class="megamenu__item__link" href="#">Indexes sub3</a>
<p>Indexes sub3 desc</p>
</li>
<li>
<a class="megamenu__item__link" href="#">Indexes sub4</a>
<p>Indexes sub4 desc</p>
</li>
<li>
<a class="megamenu__item__link" href="#">Indexes sub5</a>
<p>Indexes sub5 desc</p>
</li>
<li>
<a class="megamenu__item__link" href="#">Indexes sub6</a>
<p>Indexes sub6 desc</p>
</li>
<li>
<a class="megamenu__item__link" href="#">Indexes sub7</a>
<p>Indexes sub7 desc</p>
</li>
<li>
<a class="megamenu__item__link" href="#">Indexes sub8</a>
<p>Indexes sub8 desc</p>
</li>
<li>
<a class="megamenu__item__link" href="#">Indexes sub9</a>
<p>Indexes sub9 desc</p>
</li>
</ul>
</div>
<div class="megamenu__right col col-middle">
<ul class="megamenu__submenu">
<li>
<a class="megamenu__item__link" href="#">Contacts</a>
</li>
<li>
<a class="megamenu__item__link" href="#">News</a>
</li>
<li>
<a class="megamenu__item__link" href="#">Standards Process</a>
</li>
</ul>
<a href="#" class="btn btn--active">
<span>Read More</span>
</a>
</div>
</div>
</div>
</ul>
</li>
<li class="main-menu__item" role="menuitem">
<div class="main-menu__item__inner">
<a class="main-menu__item__link" href="">Research</a>
</div>
</li>
<li class="main-menu__item" role="menuitem">
<div class="main-menu__item__inner">
<a class="main-menu__item__link" href="">Analytics</a>
</div>
</li>
<li class="main-menu__item" role="menuitem">
<div class="main-menu__item__inner">
<a class="main-menu__item__link" href="">Financial Solution</a>
</div>
</li>
<li class="main-menu__item" role="menuitem">
<div class="main-menu__item__inner">
<a class="main-menu__item__link" href="">Blogs & Events</a>
</div>
</li>
</ul>
</nav>
</div>
</div>
<div class="header__search col icon icon-search col-align-middle text--right">
<a href="#">
<svg class="icon">
<use xlink:href="/assets/sprites/icons.svg#ico-search"></use>
</svg>
</a>
</div>
<div class="language-switcher__mobile col-align-middle">
<nav role="navigation" class="language-switcher">
<h2 class="visuallyhidden">Language</h2>
<ul class="dropdown-menu" role="listbox" aria-hidden="false">
<li class="lang active">
<a title="Active Language En" tabindex="" href="#">En<i class='icon icon-caret'> <svg class="icon"><use xlink:href="/assets/sprites/icons.svg#ico-caret"></use></svg></i></a>
</li>
</ul>
<div class="lang-switcher__popup">
<ul class="languages-list">
<li class="lang active"><i class='icon icon-check'> <svg class="icon"><use xlink:href="/assets/sprites/icons.svg#ico-check"></use></svg></i> En</li>
<li class="lang"><a href="#" title="Language Fr">Fr</a></li>
<li class="lang"><a href="#" title="Language De">De</a></li>
<li class="lang"><a href="#" title="Language 日本語">日本語</a></li>
<li class="lang"><a href="#" title="Language 中文">中文</a></li>
<li class="lang"><a href="#" title="Language Es">Es</a></li>
</ul>
</div>
</nav>
</div>
</div>
</div>
</div>
</header>
<div class="search-page ">
<div class="search-page__header">
<div class="search-page__title">
Search Site
</div>
<div class="search-page__close">
<a class="search-page__link" href="#">
<span>Advanced Search</span>
<svg class="in_page_navigation__icon">
<use xlink:href="/assets/sprites/icons.svg#ico-exit"></use>
</svg>
</a>
<span class="button search-page__close__button">Close X</span>
</div>
<div class="search-page__form">
<form action="#" method="get" accept-charset="UTF-8">
<div>
<input aria-label="Search" class="search-page__form__input" maxlength="128" name="query" placeholder="Search" required="" size="30" type="text" value="" tabindex="0">
</div>
<div class="search-page__submit-wrapper">
<button class="search-page__submit" type="button" name="button">
<svg class="in_page_navigation__icon">
<use xlink:href="/assets/sprites/icons.svg#ico-search"></use>
</svg>
</button>
</div>
</form>
<span class="indicater"></span>
</div>
<span class="calculate-width"></span>
</div>
</div>
<section class="content landing_page">
<div class="hero hero--default ">
<div class="hero__background-image__container">
<div class="hero__background-image" data-rellax-speed="-3" style="background: url() no-repeat scroll center center/cover;"></div>
<div class="hero__background-filter"></div>
</div>
<div class="hero__content__container">
<div class="hero__content text--center">
<h1 class="hero__title">Hero Section - Default Layout (One Column)</h1>
<div class="hero__description">
Nulla vitae elit libero, a pharetra augue. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi at eget metus erat a ante venenatis.
</div>
<div class="hero__cta">
<button class="btn btn--call-to-action">READ MORE</button>
</div>
</div>
</div>
</div>
<section class="main">
<div class="container--inner">
<section class="container main-content col-12 grid">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tristique turpis nec turpis pulvinar, vitae molestie leo feugiat. Donec eu orci urna. Fusce mauris urna, commodo vitae tellus vel, dictum ultrices nisl. Cras tempus magna
felis. Praesent lobortis purus risus, vehicula elementum ipsum auctor ac. Fusce gravida in dolor vel rhoncus. Proin iaculis, orci sit amet tristique blandit, nibh felis vestibulum orci, id consequat magna nisi porta elit. Morbi ultricies
varius ex. Cras egestas egestas odio, sit amet vehicula metus posuere sed. In lacinia, magna in cursus varius, tellus est mollis sapien, eget consectetur justo lorem eget lacus. Aliquam erat volutpat. Vestibulum ante ipsum primis in
faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse vel ipsum tortor.</p>
<p>Aenean vestibulum massa at lectus suscipit, sed ullamcorper mauris iaculis. Quisque tempus dolor mauris, ac tincidunt felis sollicitudin sit amet. Sed et nibh lectus. Suspendisse auctor, lorem id dignissim iaculis, felis tortor faucibus
nibh, eget congue sapien dui a felis. Etiam fermentum dolor erat, id placerat nisi consectetur at. Nunc pulvinar tellus in ipsum ullamcorper dapibus. Nullam urna orci, dignissim eget lacus at, suscipit hendrerit nisi. Integer ut ornare
ipsum, ut volutpat arcu.</p>
</section>
<section class="sections-container col-12 fractal-demo">
<app-section-basic-page-container>
<div class="main-content-section grid default container">
<app-section-basic-page>
<div class="grid-item">
<a class="grid-item__link" href="#">
<div class="grid-item__container">
<div class="grid-item__background-image" style="background: url() no-repeat scroll center center/cover;"></div>
<div class="grid-item__filter"></div>
<div class="grid-item__content">
<h4 class="grid-item__content__title"><span>Item #</span></h4>
<div class="grid-item__content__btn"><span class="btn--transparent">1</span></div>
</div>
</div>
</a>
</div>
</app-section-basic-page>
<app-section-basic-page>
<div class="grid-item">
<a class="grid-item__link" href="#">
<div class="grid-item__container">
<div class="grid-item__background-image" style="background: url() no-repeat scroll center center/cover;"></div>
<div class="grid-item__filter"></div>
<div class="grid-item__content">
<h4 class="grid-item__content__title"><span>Item #</span></h4>
<div class="grid-item__content__btn"><span class="btn--transparent">2</span></div>
</div>
</div>
</a>
</div>
</app-section-basic-page>
<app-section-basic-page>
<div class="grid-item">
<a class="grid-item__link" href="#">
<div class="grid-item__container">
<div class="grid-item__background-image" style="background: url() no-repeat scroll center center/cover;"></div>
<div class="grid-item__filter"></div>
<div class="grid-item__content">
<h4 class="grid-item__content__title"><span>Item #</span></h4>
<div class="grid-item__content__btn"><span class="btn--transparent">3</span></div>
</div>
</div>
</a>
</div>
</app-section-basic-page>
<app-section-basic-page>
<div class="grid-item">
<a class="grid-item__link" href="#">
<div class="grid-item__container">
<div class="grid-item__background-image" style="background: url() no-repeat scroll center center/cover;"></div>
<div class="grid-item__filter"></div>
<div class="grid-item__content">
<h4 class="grid-item__content__title"><span>Item #</span></h4>
<div class="grid-item__content__btn"><span class="btn--transparent">4</span></div>
</div>
</div>
</a>
</div>
</app-section-basic-page>
<app-section-basic-page>
<div class="grid-item">
<a class="grid-item__link" href="#">
<div class="grid-item__container">
<div class="grid-item__background-image" style="background: url() no-repeat scroll center center/cover;"></div>
<div class="grid-item__filter"></div>
<div class="grid-item__content">
<h4 class="grid-item__content__title"><span>Item #</span></h4>
<div class="grid-item__content__btn"><span class="btn--transparent">5</span></div>
</div>
</div>
</a>
</div>
</app-section-basic-page>
<app-section-basic-page>
<div class="grid-item">
<a class="grid-item__link" href="#">
<div class="grid-item__container">
<div class="grid-item__background-image" style="background: url() no-repeat scroll center center/cover;"></div>
<div class="grid-item__filter"></div>
<div class="grid-item__content">
<h4 class="grid-item__content__title"><span>Item #</span></h4>
<div class="grid-item__content__btn"><span class="btn--transparent">6</span></div>
</div>
</div>
</a>
</div>
</app-section-basic-page>
<app-section-basic-page>
<div class="grid-item">
<a class="grid-item__link" href="#">
<div class="grid-item__container">
<div class="grid-item__background-image" style="background: url() no-repeat scroll center center/cover;"></div>
<div class="grid-item__filter"></div>
<div class="grid-item__content">
<h4 class="grid-item__content__title"><span>Item #</span></h4>
<div class="grid-item__content__btn"><span class="btn--transparent">7</span></div>
</div>
</div>
</a>
</div>
</app-section-basic-page>
<app-section-basic-page>
<div class="grid-item">
<a class="grid-item__link" href="#">
<div class="grid-item__container">
<div class="grid-item__background-image" style="background: url() no-repeat scroll center center/cover;"></div>
<div class="grid-item__filter"></div>
<div class="grid-item__content">
<h4 class="grid-item__content__title"><span>Item #</span></h4>
<div class="grid-item__content__btn"><span class="btn--transparent">8</span></div>
</div>
</div>
</a>
</div>
</app-section-basic-page>
<app-section-basic-page>
<div class="grid-item">
<a class="grid-item__link" href="#">
<div class="grid-item__container">
<div class="grid-item__background-image" style="background: url() no-repeat scroll center center/cover;"></div>
<div class="grid-item__filter"></div>
<div class="grid-item__content">
<h4 class="grid-item__content__title"><span>Item #</span></h4>
<div class="grid-item__content__btn"><span class="btn--transparent">9</span></div>
</div>
</div>
</a>
</div>
</app-section-basic-page>
</div>
</app-section-basic-page-container>
</section>
</div>
</section>
</section>
<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>
<div class="ticker">
<div class="indexes-visibility">
<div class="toggle-btn to-hide">Hide</div>
<div class="toggle-btn to-show">Show</div>
</div>
<div class="indexes siema-indexes">
<div>
<div class="index-card--wrapper">
<div class="index-card">
<a href="#">
<div class="index-card--containers">
<div class="index-card--container">
<div class="index-card-code">FTSE4Good Global Benchmark Index</div>
<div class="index-card-indicator up">
<span class="index-card-change up">90.45</span>
<svg class="icon">
<use xlink:href="/assets/sprites/icons.svg#ico-caret"></use>
</svg>
</div>
</div>
<div class="index-card--container">
<div class="index-card-value">24114.34</div>
<div class="index-card-percentage up">
+ 1.43%
</div>
<div class="index-card-timestamp">
<svg class="icon">
<use xlink:href="/assets/sprites/icons.svg#ico-clock"></use>
</svg>
<span>3:15pm</span>
</div>
</div>
</div>
</a>
</div>
</div>
</div>
<div>
<div class="index-card--wrapper">
<div class="index-card">
<a href="#">
<div class="index-card--containers">
<div class="index-card--container">
<div class="index-card-code">Russell 2000</div>
<div class="index-card-indicator down">
<span class="index-card-change down">-32.31</span>
<svg class="icon">
<use xlink:href="/assets/sprites/icons.svg#ico-caret"></use>
</svg>
</div>
</div>
<div class="index-card--container">
<div class="index-card-value">7363.12</div>
<div class="index-card-percentage down">
- 6.45%
</div>
<div class="index-card-timestamp">
<svg class="icon">
<use xlink:href="/assets/sprites/icons.svg#ico-clock"></use>
</svg>
<span>3:15pm</span>
</div>
</div>
</div>
</a>
</div>
</div>
</div>
<div>
<div class="index-card--wrapper">
<div class="index-card">
<a href="#">
<div class="index-card--containers">
<div class="index-card--container">
<div class="index-card-code">FTSE 250</div>
<div class="index-card-indicator up">
<span class="index-card-change up">90.45</span>
<svg class="icon">
<use xlink:href="/assets/sprites/icons.svg#ico-caret"></use>
</svg>
</div>
</div>
<div class="index-card--container">
<div class="index-card-value">24114.34</div>
<div class="index-card-percentage up">
+ 1.43%
</div>
<div class="index-card-timestamp">
<svg class="icon">
<use xlink:href="/assets/sprites/icons.svg#ico-clock"></use>
</svg>
<span>3:15pm</span>
</div>
</div>
</div>
</a>
</div>
</div>
</div>
<div>
<div class="index-card--wrapper">
<div class="index-card">
<a href="#">
<div class="index-card--containers">
<div class="index-card--container">
<div class="index-card-code">FTSE 250</div>
<div class="index-card-indicator down">
<span class="index-card-change down">-32.31</span>
<svg class="icon">
<use xlink:href="/assets/sprites/icons.svg#ico-caret"></use>
</svg>
</div>
</div>
<div class="index-card--container">
<div class="index-card-value">7363.12</div>
<div class="index-card-percentage down">
- 6.45%
</div>
<div class="index-card-timestamp">
<svg class="icon">
<use xlink:href="/assets/sprites/icons.svg#ico-clock"></use>
</svg>
<span>3:15pm</span>
</div>
</div>
</div>
</a>
</div>
</div>
</div>
<div>
<div class="index-card--wrapper">
<div class="index-card">
<a href="#">
<div class="index-card--containers">
<div class="index-card--container">
<div class="index-card-code">FTSE All-World</div>
<div class="index-card-indicator up">
<span class="index-card-change up">90.45</span>
<svg class="icon">
<use xlink:href="/assets/sprites/icons.svg#ico-caret"></use>
</svg>
</div>
</div>
<div class="index-card--container">
<div class="index-card-value">24114.34</div>
<div class="index-card-percentage up">
+ 1.43%
</div>
<div class="index-card-timestamp">
<svg class="icon">
<use xlink:href="/assets/sprites/icons.svg#ico-clock"></use>
</svg>
<span>3:15pm</span>
</div>
</div>
</div>
</a>
</div>
</div>
</div>
<div>
<div class="index-card--wrapper">
<div class="index-card">
<a href="#">
<div class="index-card--containers">
<div class="index-card--container">
<div class="index-card-code">FTSE4Good Developed</div>
<div class="index-card-indicator up">
<span class="index-card-change up">90.45</span>
<svg class="icon">
<use xlink:href="/assets/sprites/icons.svg#ico-caret"></use>
</svg>
</div>
</div>
<div class="index-card--container">
<div class="index-card-value">7363.12</div>
<div class="index-card-percentage up">
- 6.45%
</div>
<div class="index-card-timestamp">
<svg class="icon">
<use xlink:href="/assets/sprites/icons.svg#ico-clock"></use>
</svg>
<span>3:15pm</span>
</div>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
<button class="ticker__prev ticker__arrow prev"><svg class="icon"><use xlink:href="/assets/sprites/icons.svg#ico-chevron-down"></use></svg></button>
<button class="ticker__next ticker__arrow next"><svg class="icon"><use xlink:href="/assets/sprites/icons.svg#ico-chevron-up"></use></svg></button>
</div>
{% render '@header' %}
<section class="content landing_page">
{% render '@hero', hero %}
<section class="main">
<div class="container--inner">
<section class="container main-content col-12 grid">
{{ body }}
</section>
<section class="sections-container col-12 fractal-demo">
<app-section-basic-page-container>
<div class="main-content-section grid {{ class }} {% if class != 'full_width' %}container{% endif %}">
{% for i in range(1, less_than) %}
<app-section-basic-page>
{% render '@grid_item', {background_image: "", title: "Item #", link: {text: i} }, true %}
</app-section-basic-page>
{% endfor %}
</div>
</app-section-basic-page-container>
</section>
</div>
</section>
</section>
{% render '@footer' %}
{% render '@indexes_ticker' %}
/* No context defined for this component. */
-
Content:
.landing_page { .grid { margin: 0 auto; } .node--embed_code { display: block; } .content__block--two_col { .content__piece__headline { @include mq-only($breakpoint-mob) { order: -1; } } } .grid__featured { padding: 0; .grid__item { @include mq($breakpoint-lg) { margin: .625rem; } } } app-section-cta { position: relative; width: 100% !important; } app-section-basic-page-container:last-child app-section-cta:last-child { bottom: -4rem; padding-bottom: 0; } .content__block.full_width { .content__piece { &:nth-child(1) { @include mq($breakpoint-lg) { padding-right: $space-md; } } &:nth-child(2) { text-align: right; @include mq($breakpoint-lg) { padding-left: $space-md; } } @include mq($breakpoint-lg) { flex-basis: calc(50% - 1rem); padding: 0; &__image { height: auto; min-height: 100%; } &__text { padding-bottom: $space-xs; } } } } } .sections-container > * { flex-basis: 100%; } .main-content:nth-child(2), .main-content-section { align-items: center; display: grid; grid-template-columns: 1fr; & > * { -ms-grid-row-align: center; width: 100%; } &.default { display: block; app-section-content-card .grid-item, .grid-item.basic-section { height: auto; } & > * { display: block; height: calc(100% - 1rem); padding: .5rem 0; @include mq($breakpoint-lg) { padding: 1rem .5rem; width: calc(100% - 1rem); } .basic-section .grid-item__content__title span { font-size: $font-size-xl; @include mq($breakpoint-lg) { font-size: $font-size-xxxl; } } } } &.full_width { display: block; margin: 0; padding: 0; & > * { display: block; height: calc(100% - 1rem); padding: .5rem 0; @include mq($breakpoint-lg) { padding: 1rem 0; } .basic-section .grid-item__content__title span { font-size: $font-size-xl; @include mq($breakpoint-lg) { font-size: $font-size-xxxl; } } } } &.first_layout { display: grid; grid-template-columns: 1fr; grid-template-rows: repeat(14, auto); @include mq($breakpoint-lg) { grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(7, auto); } &.fractal-demo > * { border: 1px solid white; } & > * { display: block; height: calc(100% - 1rem); @include mq($breakpoint-lg) { padding: .5rem; width: calc(100% - 1rem); } .basic-section { .grid-item__content__text { @include mq($breakpoint-lg) { font-size: $font-size-lg; } } .grid-item__content__title span { font-size: $font-size-xl; } } &:nth-child(1) { grid-area: 1 / 1 / 3 / 2; @include mq($breakpoint-lg) { grid-area: 1 / 1 / 3 / 5; } .basic-section .grid-item__content__title span { @include mq($breakpoint-lg) { font-size: $font-size-xxxl; } } } &:nth-child(2) { grid-area: 3 / 1 / 4 / 2; @include mq($breakpoint-lg) { grid-area: 1 / 5 / 2 / 7; } .basic-section .grid-item__content__title span { @include mq($breakpoint-lg) { font-size: $font-size-xl; } } } &:nth-child(3) { grid-area: 4 / 1 / 5 / 2; @include mq($breakpoint-lg) { grid-area: 2 / 5 / 3 / 7; } .basic-section .grid-item__content__title span { @include mq($breakpoint-lg) { font-size: $font-size-xl; } } } &:nth-child(4) { grid-area: 5 / 1 / 7 / 2; @include mq($breakpoint-lg) { grid-area: 3 / 1 / 5 / 3; } .basic-section .grid-item__content__title span { @include mq($breakpoint-lg) { font-size: $font-size-xxl; } } } &:nth-child(5) { grid-area: 7 / 1 / 9 / 2; @include mq($breakpoint-lg) { grid-area: 3 / 3 / 5 / 5; } .basic-section .grid-item__content__title span { @include mq($breakpoint-lg) { font-size: $font-size-xxl; } } } &:nth-child(6) { grid-area: 9 / 1 / 11 / 2; @include mq($breakpoint-lg) { grid-area: 3 / 5 / 5 / 7; } .basic-section .grid-item__content__title span { @include mq($breakpoint-lg) { font-size: $font-size-xxl; } } } &:nth-child(7) { grid-area: 11 / 1 / 13 / 2; @include mq($breakpoint-lg) { grid-area: 5 / 1 / 7 / 7; } .basic-section .grid-item__content__title span { @include mq($breakpoint-lg) { font-size: $font-size-xxxl; } } } &:nth-child(8) { grid-area: 13 / 1 / 14 / 2; @include mq($breakpoint-lg) { grid-area: 7 / 1 / 8 / 4; } .basic-section .grid-item__content__title span { @include mq($breakpoint-lg) { font-size: $font-size-xl; } } } &:nth-child(9) { grid-area: 14 / 1 / 15 / 2; @include mq($breakpoint-lg) { grid-area: 7 / 4 / 8 / 7; } .basic-section .grid-item__content__title span { @include mq($breakpoint-lg) { font-size: $font-size-xl; } } } } } &.second_layout { display: grid; grid-template-columns: 1fr; grid-template-rows: repeat(17, auto); @include mq($breakpoint-lg) { grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(7, auto); } &.fractal-demo > * { border: 1px solid white; } & > * { display: block; height: calc(100% - 1rem); @include mq($breakpoint-lg) { padding: .5rem; width: calc(100% - 1rem); } .basic-section { .grid-item__content__text { @include mq($breakpoint-lg) { font-size: $font-size-lg; } } .grid-item__content__title span { font-size: $font-size-xl; } } &:nth-child(1) { grid-area: 1 / 1 / 3 / 2; @include mq($breakpoint-lg) { grid-area: 1 / 1 / 3 / 7; } .basic-section .grid-item__content__title span { @include mq($breakpoint-lg) { font-size: $font-size-xxxl; } } } &:nth-child(2) { grid-area: 3 / 1 / 5 / 2; @include mq($breakpoint-lg) { grid-area: 3 / 1 / 5 / 3; } .basic-section .grid-item__content__title span { @include mq($breakpoint-lg) { font-size: $font-size-xxl; } } } &:nth-child(3) { grid-area: 5 / 1 / 7 / 2; @include mq($breakpoint-lg) { grid-area: 3 / 3 / 5 / 5; } .basic-section .grid-item__content__title span { @include mq($breakpoint-lg) { font-size: $font-size-xxl; } } } &:nth-child(4) { grid-area: 7 / 1 / 9 / 2; @include mq($breakpoint-lg) { grid-area: 3 / 5 / 5 / 7; } .basic-section .grid-item__content__title span { @include mq($breakpoint-lg) { font-size: $font-size-xxl; } } } &:nth-child(5) { grid-area: 9 / 1 / 11 / 2; @include mq($breakpoint-lg) { grid-area: 5 / 1 / 7 / 3; } .basic-section .grid-item__content__title span { @include mq($breakpoint-lg) { font-size: $font-size-xxl; } } } &:nth-child(6) { grid-area: 11 / 1 / 13 / 2; @include mq($breakpoint-lg) { grid-area: 5 / 3 / 7 / 5; } .basic-section .grid-item__content__title span { @include mq($breakpoint-lg) { font-size: $font-size-xxl; } } } &:nth-child(7) { grid-area: 13 / 1 / 15 / 2; @include mq($breakpoint-lg) { grid-area: 5 / 5 / 7 / 7; } .basic-section .grid-item__content__title span { @include mq($breakpoint-lg) { font-size: $font-size-xxl; } } } &:nth-child(8) { grid-area: 15 / 1 / 16 / 2; @include mq($breakpoint-lg) { grid-area: 7 / 1 / 8 / 3; } .basic-section .grid-item__content__title span { @include mq($breakpoint-lg) { font-size: $font-size-xl; } } } &:nth-child(9) { grid-area: 16 / 1 / 17 / 2; @include mq($breakpoint-lg) { grid-area: 7 / 3 / 8 / 5; } .basic-section .grid-item__content__title span { @include mq($breakpoint-lg) { font-size: $font-size-xl; } } } &:nth-child(10) { grid-area: 17 / 1 / 18 / 2; @include mq($breakpoint-lg) { grid-area: 7 / 5 / 8 / 7; } .basic-section .grid-item__content__title span { @include mq($breakpoint-lg) { font-size: $font-size-xl; } } } } } &.third_layout { display: grid; grid-template-columns: 1fr; grid-template-rows: repeat(14, auto); @include mq($breakpoint-lg) { grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(6, auto); } &.fractal-demo > * { border: 1px solid white; } & > * { display: block; height: calc(100% - 1rem); @include mq($breakpoint-lg) { padding: .5rem; width: calc(100% - 1rem); } .basic-section { .grid-item__content__text { @include mq($breakpoint-lg) { font-size: $font-size-lg; } } .grid-item__content__title span { font-size: $font-size-xl; } } &:nth-child(1) { grid-area: 1 / 1 / 3 / 2; @include mq($breakpoint-lg) { grid-area: 1 / 1 / 3 / 5; } .basic-section .grid-item__content__title span { @include mq($breakpoint-lg) { font-size: $font-size-xxxl; } } } &:nth-child(2) { grid-area: 3 / 1 / 4 / 2; @include mq($breakpoint-lg) { grid-area: 1 / 5 / 2 / 7; } .basic-section .grid-item__content__title span { @include mq($breakpoint-lg) { font-size: $font-size-xl; } } } &:nth-child(3) { grid-area: 4 / 1 / 5 / 2; @include mq($breakpoint-lg) { grid-area: 2 / 5 / 3 / 7; } .basic-section .grid-item__content__title span { @include mq($breakpoint-lg) { font-size: $font-size-xl; } } } &:nth-child(4) { grid-area: 5 / 1 / 7 / 2; @include mq($breakpoint-lg) { grid-area: 3 / 1 / 5 / 3; } .basic-section .grid-item__content__title span { @include mq($breakpoint-lg) { font-size: $font-size-xxl; } } } &:nth-child(5) { grid-area: 7 / 1 / 9 / 2; @include mq($breakpoint-lg) { grid-area: 3 / 3 / 5 / 5; } .basic-section .grid-item__content__title span { @include mq($breakpoint-lg) { font-size: $font-size-xxl; } } } &:nth-child(6) { grid-area: 9 / 1 / 13 / 2; @include mq($breakpoint-lg) { grid-area: 3 / 5 / 7 / 7; } .basic-section .grid-item__content__title span { @include mq($breakpoint-lg) { font-size: $font-size-xxxl; } } } &:nth-child(7) { grid-area: 13 / 1 / 15 / 2; @include mq($breakpoint-lg) { grid-area: 5 / 1 / 7 / 5; } .basic-section .grid-item__content__title span { @include mq($breakpoint-lg) { font-size: $font-size-xxxl; } } } } } &.a_layout { display: grid; grid-template-columns: 1fr; grid-template-rows: repeat(7, auto); @include mq($breakpoint-lg) { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, auto); } &.fractal-demo > * { border: 1px solid white; } & > * { display: block; height: calc(100% - 1rem); @include mq($breakpoint-lg) { padding: .5rem; width: calc(100% - 1rem); } .basic-section { .grid-item__content__text { @include mq($breakpoint-lg) { font-size: $font-size-lg; } } .grid-item__content__title span { font-size: $font-size-xl; } } &:nth-child(1) { grid-area: 1 / 1 / 3 / 2; @include mq($breakpoint-lg) { grid-area: 1 / 1 / 3 / 3; } .basic-section .grid-item__content__title span { @include mq($breakpoint-lg) { font-size: $font-size-xxxl; } } } &:nth-child(2) { grid-area: 3 / 1 / 4 / 2; @include mq($breakpoint-lg) { grid-area: 1 / 3 / 2 / 4; } .basic-section .grid-item__content__title span { @include mq($breakpoint-lg) { font-size: $font-size-xl; } } } &:nth-child(3) { grid-area: 4 / 1 / 5 / 2; @include mq($breakpoint-lg) { grid-area: 2 / 3 / 3 / 4; } .basic-section .grid-item__content__title span { @include mq($breakpoint-lg) { font-size: $font-size-xl; } } } &:nth-child(4) { grid-area: 5 / 1 / 6 / 2; @include mq($breakpoint-lg) { grid-area: 3 / 1 / 4 / 2; } .basic-section .grid-item__content__title span { @include mq($breakpoint-lg) { font-size: $font-size-xl; } } } &:nth-child(5) { grid-area: 6 / 1 / 7 / 2; @include mq($breakpoint-lg) { grid-area: 3 / 2 / 4 / 3; } .basic-section .grid-item__content__title span { @include mq($breakpoint-lg) { font-size: $font-size-xl; } } } &:nth-child(6) { grid-area: 7 / 1 / 8 / 2; @include mq($breakpoint-lg) { grid-area: 3 / 3 / 4 / 4; } .basic-section .grid-item__content__title span { @include mq($breakpoint-lg) { font-size: $font-size-xl; } } } } } &.b_layout { display: grid; grid-template-columns: 1fr; grid-template-rows: repeat(6, auto); @include mq($breakpoint-lg) { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, auto); } &.fractal-demo > * { border: 1px solid white; } & > * { display: block; height: calc(100% - 1rem); @include mq($breakpoint-lg) { padding: .5rem; width: calc(100% - 1rem); } .basic-section { .grid-item__content__text { @include mq($breakpoint-lg) { font-size: $font-size-lg; } } .grid-item__content__title span { font-size: $font-size-xl; } } &:nth-child(1) { grid-area: 1 / 1 / 2 / 2; @include mq($breakpoint-lg) { grid-area: 1 / 1 / 2 / 2; } .basic-section .grid-item__content__title span { @include mq($breakpoint-lg) { font-size: $font-size-xxl; } } } &:nth-child(2) { grid-area: 2 / 1 / 3 / 2; @include mq($breakpoint-lg) { grid-area: 1 / 2 / 2 / 3; } .basic-section .grid-item__content__title span { @include mq($breakpoint-lg) { font-size: $font-size-xxl; } } } &:nth-child(3) { grid-area: 3 / 1 / 4 / 2; @include mq($breakpoint-lg) { grid-area: 2 / 1 / 3 / 2; } .basic-section .grid-item__content__title span { @include mq($breakpoint-lg) { font-size: $font-size-xxl; } } } &:nth-child(4) { grid-area: 4 / 1 / 5 / 2; @include mq($breakpoint-lg) { grid-area: 2 / 2 / 3 / 3; } .basic-section .grid-item__content__title span { @include mq($breakpoint-lg) { font-size: $font-size-xxl; } } } &:nth-child(5) { grid-area: 5 / 1 / 6 / 2; @include mq($breakpoint-lg) { grid-area: 3 / 1 / 4 / 2; } .basic-section .grid-item__content__title span { @include mq($breakpoint-lg) { font-size: $font-size-xxl; } } } &:nth-child(6) { grid-area: 6 / 1 / 7 / 2; @include mq($breakpoint-lg) { grid-area: 3 / 2 / 4 / 3; } .basic-section .grid-item__content__title span { @include mq($breakpoint-lg) { font-size: $font-size-xxl; } } } } } &.c_layout { display: grid; grid-template-columns: 1fr; grid-template-rows: repeat(6, auto); @include mq($breakpoint-lg) { grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(3, auto); } &.fractal-demo > * { border: 1px solid white; } & > * { display: block; height: calc(100% - 1rem); @include mq($breakpoint-lg) { padding: .5rem; width: calc(100% - 1rem); } .basic-section { .grid-item__content__text { @include mq($breakpoint-lg) { font-size: $font-size-lg; } } .grid-item__content__title span { font-size: $font-size-xl; } } &:nth-child(1) { grid-area: 1 / 1 / 2 / 2; @include mq($breakpoint-lg) { grid-area: 1 / 1 / 2 / 7; } .basic-section .grid-item__content__title span { @include mq($breakpoint-lg) { font-size: $font-size-xxxl; } } } &:nth-child(2) { grid-area: 2 / 1 / 3 / 2; @include mq($breakpoint-lg) { grid-area: 2 / 1 / 3 / 4; } .basic-section .grid-item__content__title span { @include mq($breakpoint-lg) { font-size: $font-size-xxl; } } } &:nth-child(3) { grid-area: 3 / 1 / 4 / 2; @include mq($breakpoint-lg) { grid-area: 2 / 4 / 3 / 7; } .basic-section .grid-item__content__title span { @include mq($breakpoint-lg) { font-size: $font-size-xxl; } } } &:nth-child(4) { grid-area: 4 / 1 / 5 / 2; @include mq($breakpoint-lg) { grid-area: 3 / 1 / 4 / 3; } .basic-section .grid-item__content__title span { @include mq($breakpoint-lg) { font-size: $font-size-xl; } } } &:nth-child(5) { grid-area: 5 / 1 / 6 / 2; @include mq($breakpoint-lg) { grid-area: 3 / 3 / 4 / 5; } .basic-section .grid-item__content__title span { @include mq($breakpoint-lg) { font-size: $font-size-xl; } } } &:nth-child(6) { grid-area: 6 / 1 / 7 / 2; @include mq($breakpoint-lg) { grid-area: 3 / 5 / 4 / 7; } .basic-section .grid-item__content__title span { @include mq($breakpoint-lg) { font-size: $font-size-xl; } } } } } &.d_layout { display: grid; grid-template-columns: 1fr; grid-template-rows: repeat(4, auto); @include mq($breakpoint-lg) { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, auto); } &.fractal-demo > * { border: 1px solid white; } & > * { display: block; height: calc(100% - 1rem); @include mq($breakpoint-lg) { padding: .5rem; width: calc(100% - 1rem); } .basic-section { .grid-item__content__text { @include mq($breakpoint-lg) { font-size: $font-size-lg; } } .grid-item__content__title span { font-size: $font-size-xl; } } &:nth-child(1) { grid-area: 1 / 1 / 2 / 2; @include mq($breakpoint-lg) { grid-area: 1 / 1 / 2 / 2; } .basic-section .grid-item__content__title span { @include mq($breakpoint-lg) { font-size: $font-size-xxl; } } } &:nth-child(2) { grid-area: 2 / 1 / 4 / 2; @include mq($breakpoint-lg) { grid-area: 1 / 2 / 3 / 3; } .basic-section .grid-item__content__title span { @include mq($breakpoint-lg) { font-size: $font-size-xxxl; } } } &:nth-child(3) { grid-area: 4 / 1 / 5 / 2; @include mq($breakpoint-lg) { grid-area: 2 / 1 / 3 / 2; } .basic-section .grid-item__content__title span { @include mq($breakpoint-lg) { font-size: $font-size-xxl; } } } } } &.e_layout { display: grid; grid-template-columns: 1fr; grid-template-rows: repeat(3, auto); @include mq($breakpoint-lg) { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, auto); } &.fractal-demo > * { border: 1px solid white; } & > * { display: block; height: calc(100% - 1rem); @include mq($breakpoint-lg) { padding: .5rem; width: calc(100% - 1rem); } .basic-section { .grid-item__content__text { @include mq($breakpoint-lg) { font-size: $font-size-lg; } } .grid-item__content__title span { font-size: $font-size-xl; } } &:nth-child(1) { grid-area: 1 / 1 / 2 / 2; @include mq($breakpoint-lg) { grid-area: 1 / 1 / 2 / 2; } .basic-section .grid-item__content__title span { @include mq($breakpoint-lg) { font-size: $font-size-xxl; } } } &:nth-child(2) { grid-area: 2 / 1 / 3 / 2; @include mq($breakpoint-lg) { grid-area: 1 / 2 / 2 / 3; } .basic-section .grid-item__content__title span { @include mq($breakpoint-lg) { font-size: $font-size-xxl; } } } &:nth-child(3) { grid-area: 3 / 1 / 4 / 2; @include mq($breakpoint-lg) { grid-area: 2 / 1 / 3 / 3; } .basic-section .grid-item__content__title span { @include mq($breakpoint-lg) { font-size: $font-size-xxxl; } } } } } &.f_layout { display: grid; grid-template-columns: 1fr; grid-template-rows: repeat(6, auto); @include mq($breakpoint-lg) { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, auto); } &.fractal-demo > * { border: 1px solid white; } & > * { display: block; height: calc(100% - 1rem); @include mq($breakpoint-lg) { padding: .5rem; width: calc(100% - 1rem); } .basic-section { .grid-item__content__text { @include mq($breakpoint-lg) { font-size: $font-size-lg; } } .grid-item__content__title span { font-size: $font-size-xl; } } &:nth-child(1) { grid-area: 1 / 1 / 2 / 2; @include mq($breakpoint-lg) { grid-area: 1 / 1 / 2 / 2; } .basic-section .grid-item__content__title span { @include mq($breakpoint-lg) { font-size: $font-size-xl; } } } &:nth-child(2) { grid-area: 2 / 1 / 3 / 2; @include mq($breakpoint-lg) { grid-area: 1 / 2 / 2 / 3; } .basic-section .grid-item__content__title span { @include mq($breakpoint-lg) { font-size: $font-size-xl; } } } &:nth-child(3) { grid-area: 3 / 1 / 5 / 2; @include mq($breakpoint-lg) { grid-area: 1 / 3 / 3 / 4; } .basic-section .grid-item__content__title span { @include mq($breakpoint-lg) { font-size: $font-size-xxxl; } } } &:nth-child(4) { grid-area: 5 / 1 / 6 / 2; @include mq($breakpoint-lg) { grid-area: 2 / 1 / 3 / 2; } .basic-section .grid-item__content__title span { @include mq($breakpoint-lg) { font-size: $font-size-xl; } } } &:nth-child(5) { grid-area: 6 / 1 / 7 / 2; @include mq($breakpoint-lg) { grid-area: 2 / 2 / 3 / 3; } .basic-section .grid-item__content__title span { @include mq($breakpoint-lg) { font-size: $font-size-xl; } } } } } &.g_layout { display: grid; grid-template-columns: 1fr; grid-template-rows: repeat(5, auto); @include mq($breakpoint-lg) { grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(2, auto); } &.fractal-demo > * { border: 1px solid white; } & > * { display: block; height: calc(100% - 1rem); @include mq($breakpoint-lg) { padding: .5rem; width: calc(100% - 1rem); } .basic-section { .grid-item__content__text { @include mq($breakpoint-lg) { font-size: $font-size-lg; } } .grid-item__content__title span { font-size: $font-size-xl; } } &:nth-child(1) { grid-area: 1 / 1 / 2 / 2; @include mq($breakpoint-lg) { grid-area: 1 / 1 / 2 / 4; } .basic-section .grid-item__content__title span { @include mq($breakpoint-lg) { font-size: $font-size-xxl; } } } &:nth-child(2) { grid-area: 2 / 1 / 3 / 2; @include mq($breakpoint-lg) { grid-area: 1 / 4 / 2 / 7; } .basic-section .grid-item__content__title span { @include mq($breakpoint-lg) { font-size: $font-size-xxl; } } } &:nth-child(3) { grid-area: 3 / 1 / 4 / 2; @include mq($breakpoint-lg) { grid-area: 2 / 1 / 3 / 3; } .basic-section .grid-item__content__title span { @include mq($breakpoint-lg) { font-size: $font-size-xl; } } } &:nth-child(4) { grid-area: 4 / 1 / 5 / 2; @include mq($breakpoint-lg) { grid-area: 2 / 3 / 3 / 5; } .basic-section .grid-item__content__title span { @include mq($breakpoint-lg) { font-size: $font-size-xl; } } } &:nth-child(5) { grid-area: 5 / 1 / 6 / 2; @include mq($breakpoint-lg) { grid-area: 2 / 5 / 3 / 7; } .basic-section .grid-item__content__title span { @include mq($breakpoint-lg) { font-size: $font-size-xl; } } } } } &.h_layout { display: grid; grid-template-columns: 1fr; grid-template-rows: repeat(7, auto); @include mq($breakpoint-lg) { grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(3, auto); } &.fractal-demo > * { border: 1px solid white; } & > * { display: block; height: calc(100% - 1rem); @include mq($breakpoint-lg) { padding: .5rem; width: calc(100% - 1rem); } .basic-section { .grid-item__content__text { @include mq($breakpoint-lg) { font-size: $font-size-lg; } } .grid-item__content__title span { font-size: $font-size-xl; } } &:nth-child(1) { grid-area: 1 / 1 / 2 / 2; @include mq($breakpoint-lg) { grid-area: 1 / 1 / 2 / 4; } .basic-section .grid-item__content__title span { @include mq($breakpoint-lg) { font-size: $font-size-xxl; } } } &:nth-child(2) { grid-area: 2 / 1 / 4 / 2; @include mq($breakpoint-lg) { grid-area: 1 / 4 / 3 / 7; } .basic-section .grid-item__content__title span { @include mq($breakpoint-lg) { font-size: $font-size-xxxl; } } } &:nth-child(3) { grid-area: 4 / 1 / 5 / 2; @include mq($breakpoint-lg) { grid-area: 2 / 1 / 3 / 4; } .basic-section .grid-item__content__title span { @include mq($breakpoint-lg) { font-size: $font-size-xxl; } } } &:nth-child(4) { grid-area: 5 / 1 / 6 / 2; @include mq($breakpoint-lg) { grid-area: 3 / 1 / 4 / 3 } .basic-section .grid-item__content__title span { @include mq($breakpoint-lg) { font-size: $font-size-xl; } } } &:nth-child(5) { grid-area: 6 / 1 / 7 / 2; @include mq($breakpoint-lg) { grid-area: 3 / 3 / 4 / 5; } .basic-section .grid-item__content__title span { @include mq($breakpoint-lg) { font-size: $font-size-xl; } } } &:nth-child(6) { grid-area: 7 / 1 / 8 / 2; @include mq($breakpoint-lg) { grid-area: 3 / 5 / 4 / 7; } .basic-section .grid-item__content__title span { @include mq($breakpoint-lg) { font-size: $font-size-xl; } } } } } } - URL: /components/raw/landing_page_layout/_landing_page_layout.scss
- Filesystem Path: src/components/templates/landing_page_layout/_landing_page_layout.scss
- Size: 30.9 KB
There are no notes for this item.