IOP Nucleus

Details 

<div>
    <header class="iop-header">
        <div class="container">
            <div class="iop-header__inner">
                <span role="button" tabindex="0" aria-pressed="false" class="iop-header__explore-button" data-toggle="other-sites" data-toggle-scroll="disable" data-toggle-remove="profile">
        Explore
      </span>
                <span role="button" tabindex="0" aria-pressed="false" class="iop-header__menu-button" data-toggle="nav" data-toggle-scroll="disable" data-toggle-remove="other-sites,profile">
        Menu
      </span>
                <span role="button" tabindex="0" aria-pressed="false" class="iop-header__close-button" data-toggle-scroll="enable" data-toggle-remove="nav,other-sites,profile">
        Close
      </span>
                <a class="iop-header__logo" href="#0">
        IOP | Institute of Physics
      </a>
                <div class="iop-header__nav">
                    <nav class="iop-link-list iop-link-list--staggered iop-nav" data-toggle-target="nav" data-expandable-nav>
                        <ul>
                            <li>
                                <a href="#0">About</a>
                                <ul class="iop-link-list__sublist">
                                    <li>
                                        <a href="#0">Publications</a>
                                    </li>
                                    <li>
                                        <a href="#0">Education</a>
                                    </li>
                                    <li>
                                        <a href="#0">Activities</a>
                                    </li>

                            </li>
                            </ul>
                            </li>
                            <li>
                                <a href="#0">Resources</a>
                            </li>
                            <li>
                                <a href="#0">Visit</a>
                            </li>
                            <li>
                                <a href="#0">Contact</a>
                            </li>
                        </ul>
                    </nav>
                </div>
                <div class="iop-header__actions">
                    <a href="#0" class="iop-avatar iop-header__user-button" data-toggle="profile" data-toggle-remove="nav,other-sites" data-toggle-scroll="disable" style="background-image: url(https://ca.slack-edge.com/T0347CC9W-U715K3AKX-10679806659f-48)">
          
          
        </a>
                </div>
            </div>
        </div>

        <div class="iop-tray iop-tray--other-sites" data-toggle-target="other-sites">
            <div class="iop-tray__screen" role="button" tabindex="0" aria-pressed="false" data-toggle="other-sites" data-toggle-scroll="enable"></div>
            <div class="iop-tray__inner context-dark">
                <span role="button" tabindex="0" aria-pressed="false" class="iop-tray__close-button" data-toggle-scroll="enable" data-toggle-remove="other-sites">
        Close
      </span>
                <div class="iop-tray__container">
                    <nav class="iop-other-sites iop-link-list" data-toggle-target="other-sites">
                        <h4 class="iop-other-sites__title iop-text-muted">Explore</h4>
                        <ul>
                            <li>
                                <a href="#0">Website 1</a>
                            </li>
                            <li>
                                <a href="#0">Website 2</a>
                            </li>
                            <li>
                                <a href="#0">Website 3</a>
                            </li>
                            <li>
                                <a href="#0">Website 4</a>
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>

        <div class="iop-tray iop-tray--profile" data-toggle-target="profile">
            <div class="iop-tray__screen" role="button" tabindex="0" aria-pressed="false" data-toggle="profile" data-toggle-scroll="enable"></div>
            <div class="iop-tray__inner context-light">
                <div class="iop-tray__container">
                    <div class="iop-profile-nav">
                        <div class="iop-profile-nav__header">
                            <p class="h3 margin-reset">
                                <span class="iop-text-sm iop-text-accent">Welcome,</span>
                                <br> Robin Ince
                            </p>
                            <span class="iop-avatar iop-profile-nav__avatar" style="background-image: url(https://ca.slack-edge.com/T0347CC9W-U715K3AKX-10679806659f-48)">
              
              
            </span>
                        </div>

                        <nav class="iop-link-list iop-profile-nav__list" data-toggle-target="profile">
                            <ul>
                                <li class="is-active">
                                    <a href="#0">For you</a>
                                </li>
                                <li>
                                    <a href="#0">Account</a>
                                </li>
                            </ul>
                        </nav>

                        <p class="h4 iop-text-accent">
                            <a href="#0">Logout</a>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </header>

    <div class="iop-hero iop-hero--subnav iop-hero--lg context-dark" style="background-image: url('https://images.unsplash.com/photo-1517976487492-5750f3195933?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=5ab4ea4fd87e2144a8662bee0164010d&auto=format&fit=crop&w=1950&q=80')">
        <nav class="iop-subnav">
            <div class="container">
                <ul>
                    <li class="active"><a href=""><span class="iop-icon iop-icon--feed"></span>For you</a></li>
                    <li><a href=""><span class="iop-icon iop-icon--collection"></span>Collections</a></li>
                    <li><a href=""><span class="iop-icon iop-icon--search"></span>Discover</a></li>
                    <li><a href=""><span class="iop-icon iop-icon--profile"></span>Profile</a></li>
                </ul>
            </div>
        </nav>
        <div class="iop-hero__inner iop-hero__inner--nav">
            <div class="container">
                <div class="iop-heading-lockup iop-heading-lockup--hero-nav">
                    <div class="iop-avatar" style="background-image: url(https://ca.slack-edge.com/T0347CC9W-U715K3AKX-10679806659f-48)"></div>
                    <div>
                        <h3>
                            Robin Instrumentation
                        </h3>
                        <p class="iop-text-sm">Member ID: <strong>1138811</strong></p>
                    </div>
                </div>
                <div class="iop-heading-lockup__footer">
                    <p class="iop-text-sm">Settings <span class="iop-icon iop-icon--settings"></span></p>
                </div>
            </div>
        </div>
    </div>
</div>

<section class="iop-page-section">
    <div class="container">
        <div class="row">
            <div class="col-md-3">
                <nav class="iop-side-nav" data-toggle-target="side-nav">
                    <h5 class="iop-side-nav__title">Example</h5>
                    <ul>

                        <li>
                            <a href="#0" class="">
          Link 1
        </a>
                        </li>

                        <li>
                            <a href="#0" class="is-active">
          Link 2
        </a>
                        </li>

                    </ul>

                    <span role="button" tabindex="0" aria-pressed="false" class="iop-side-nav__toggle-button" data-toggle="side-nav">
    Toggle menu
  </span>
                </nav>

            </div>
            <div class="col-md-9">
                <h4>Account Details</h4>
                <form class="flex-form">
                    <div class="fi-4 iop-form-element">
                        <label class="iop-text-sm" for="first-name">First Name</label>
                        <input id="first-name" class="iop-input" type="text" value="Robin" />
                        <span class="iop-form-element__focus"></span>
                    </div>
                    <div class="fi-6 iop-form-element">
                        <label class="iop-text-sm" for="surname">Surname</label>
                        <input id="surname" class="iop-input" type="text" value="Instrumentation" />
                        <span class="iop-form-element__focus"></span>
                    </div>

                    <div class="fi-5 iop-form-element">
                        <label class="iop-text-sm" for="num-only-1">Numbers only</label>
                        <input id="num-only-1" class="iop-input" type="text" value="12" data-format-number/>
                        <span class="iop-form-element__focus"></span>
                    </div>
                    <div class="fi-5 iop-form-element">
                        <label class="iop-text-sm" for="num-only-2">Numbers only</label>
                        <input id="num-only-2" class="iop-input" type="text" value="" data-format-number/>
                        <span class="iop-form-element__focus"></span>
                    </div>

                    <div class="fi-10 iop-form-element">
                        <label class="iop-text-sm" for="email">Email Address</label>
                        <input id="email" value="" data-format-email type="email" class="iop-input" />
                        <span class="iop-form-element__focus"></span>
                    </div>

                    <div class="fi-5 iop-form-element">
                        <label class="iop-text-sm" for="home-phone">Home number</label>
                        <input id="home-phone" type="tel" value="02065617827" class="iop-input" data-format-phone />
                        <span class="iop-form-element__focus"></span>
                    </div>
                    <div class="fi-5 iop-form-element">
                        <label class="iop-text-sm" for="mobile-phone">mobile number</label>
                        <input id="mobile-phone" type="tel" value="02065617827" class="iop-input" data-format-phone />
                        <span class="iop-form-element__focus"></span>
                    </div>

                    <div class="fi-10 iop-form-element iop-form-element--textarea">
                        <label class="iop-text-sm" for="huge-text">Huge Text</label>
                        <textarea class="iop-input" id="huge-text" rows="10"></textarea>
                        <span class="iop-form-element__focus"></span>
                    </div>

                    <h5 class="fi-10">Your Address</h5>
                    <div class="fi-5 iop-form-element">
                        <label class="iop-text-sm" for="address-line-1">Address Line 1</label>
                        <input id="address-line-1" class="iop-input" type="text" value="21 Science Lane" />
                        <span class="iop-form-element__focus"></span>
                    </div>
                    <div class="fi-5 iop-form-element">
                        <label class="iop-text-sm" for="address-line-2">Address Line 2</label>
                        <input id="address-line-2" class="iop-input" type="text" value="Instrumentation" />
                        <span class="iop-form-element__focus"></span>
                    </div>

                    <div class="fi-4 iop-form-element">
                        <label class="iop-text-sm" for="postcode">Post Code</label>
                        <input id="postcode" class="iop-input" type="text" value="SC13 3NC" data-format-ukpostcode />
                        <span class="iop-form-element__focus"></span>
                    </div>
                    <div class="fi-6 iop-form-element">
                        <label class="iop-text-sm" for="city">City / Town</label>
                        <input id="city" class="iop-input" type="text" value="London" />
                        <span class="iop-form-element__focus"></span>
                    </div>

                    <div class="fi-7"></div>
                    <div class="fi-3 text-right">
                        <button type="button" class="iop-button">
      <span>Update Details</span>
    </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</section>

<footer class="iop-footer">
    <div class="container-fluid">
        <div class="iop-footer__inner">
            <div class="iop-footer__nav">
                <ul>
                    <li>
                        <a href="#0">Institute History</a>
                    </li>
                    <li>
                        <a href="#0">Environmental statement</a>
                    </li>
                    <li>
                        <a href="#0">Modern Slavery Act</a>
                    </li>
                    <li>
                        <a href="#0">Copyright</a>
                    </li>
                    <li>
                        <a href="#0">Privacy</a>
                    </li>
                    <li>
                        <a href="#0">Cookie directory</a>
                    </li>
                    <li>
                        <a href="#0">Disclaimer</a>
                    </li>
                    <li>
                        <a href="#0">Terms and conditions</a>
                    </li>
                    <li>
                        <a href="#0">Accessibility</a>
                    </li>
                </ul>
            </div>

            <div class="flex-container">
                <div class="flex-item--2 iop-footer__nav iop-footer__nav--social">
                    <nav>
                        <ul>
                            <li><a href=""><span class="iop-icon iop-icon--facebook"></span></a></li>
                            <li><a href=""><span class="iop-icon iop-icon--twitter"></span></a></li>
                            <li><a href=""><span class="iop-icon iop-icon--youtube"></span></a></li>
                            <li><a href=""><span class="iop-icon iop-icon--instagram"></span></a></li>
                        </ul>
                    </nav>
                </div>
                <div class="flex-item--6 iop-footer__copyright">
                    <p class="iop-text-muted iop-text-sm">&copy; 2018 IOP All rights reserved. The Institute is a charity registered in England and Wales (no. 293851) and Scotland (no. SC040092)</p>
                </div>
                <div class="flex-item--2 iop-footer__catch">
                    <a href="https://www.catchdigital.com" class="iop-footer__attribution">
            Site by <span class="hidden">Catch</span>
          </a>
                </div>
            </div>
        </div>
    </div>
    <span class="iop-privacy-button" role="button" tabindex="0" aria-pressed="false">
    Manage privacy and cookies
  </span>
</footer>
 
{# Hero #}
<div>
  {% render '@header-default' %}
  <div class="iop-hero iop-hero--subnav iop-hero--lg context-dark" style="background-image: url('{{ backgroundImageUrl }}')">
    {% render '@subnav' %}
    <div class="iop-hero__inner iop-hero__inner--nav">
      <div class="container">
        <div class="iop-heading-lockup iop-heading-lockup--hero-nav">
          <div
            class="iop-avatar"
            style="background-image: url({{ avatarUrl }})"
          ></div>
          <div>
            <h3>
              {{ memberName }}
            </h3>
            <p class="iop-text-sm">Member ID: <strong>{{ memberID }}</strong></p>
          </div>
        </div>
        <div class="iop-heading-lockup__footer">
          <p class="iop-text-sm">Settings <span class="iop-icon iop-icon--settings"></span></p>
        </div>
      </div>
    </div>
  </div>
</div>

<section class="iop-page-section">
  <div class="container">
    <div class="row">
      <div class="col-md-3">
        {% render '@side-nav-default', {
          title: 'Example',
          links: [
            {
              url: '#0',
              label: 'Link 1'
            },
            {
              url: '#0',
              label: 'Link 2',
              active: true
            }
          ]
        } %}
      </div>
      <div class="col-md-9">
        {% render '@form-account' %}
      </div>
    </div>
  </div>
</section>

{% render '@footer' %}
 
{
  "backgroundImageUrl": "https://images.unsplash.com/photo-1517976487492-5750f3195933?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=5ab4ea4fd87e2144a8662bee0164010d&auto=format&fit=crop&w=1950&q=80",
  "placeholderImageUrl": "https://images.unsplash.com/photo-1517976487492-5750f3195933?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=5ab4ea4fd87e2144a8662bee0164010d&auto=format&fit=crop&w=5&q=80",
  "avatarUrl": "https://ca.slack-edge.com/T0347CC9W-U715K3AKX-10679806659f-48",
  "memberName": "Robin Instrumentation",
  "memberID": 1138811
}

There are no notes for this item.