Page layout - Minimal

v0.0.1-alpha.0

Use the Minimal Page Layout on sites where navigation, search and footer are too complex to implement.

Minimal Page Layout is part of the Page component.

<!-- Page Layout -->
<div class="vi-page-layout vi-page-layout--minimal">
  <a class="vi-page-layout__skip-to-content" href="#vi-content">Skip to main content</a>
  <div class="vi-page-layout__panel vi-page-layout__panel--minimal">
    <!-- Page Branding -->
    <div class="vi-page-branding">
      <div class="vi-page-branding__main">
        <a class="vi-page-branding__link" href="#home-b63a25" rel="home">
          <div class="vi-page-branding__logo">
            <img src="/assets/images/logos/logo_teva.svg" alt="Teva">
          </div>
          <div class="vi-page-branding__extension">
            <em class="vi-page-branding__extension-text">United Kingdom</em>
          </div>
        </a>
      </div>
    </div>
    <div class="vi-page-layout__main" id="vi-content">
      <!-- Container  -->
      <div class="vi-container">
        ...
      </div>
    </div>
  </div>
</div>

Stylesheets #

The following stylesheets are required to display this component.

JavaScript #

The following javascript is required to display this component.

Download Page Layout JavaScript

Usage documentation #

Usage documentation can be found here.

Usage Documentation

Changelog #

Changelog

Fix

  27 Feb 2023 - iOs Safari 16 regression causing horizontal scroll
  30 Nov 2022 - Stack reading time indicator under modal backdrop.
  30 Nov 2022 - Fix top offset troubles on after injected alert close.
  21 Nov 2022 - Reading progress indicator not reaching end of page (!IE11).
  7 Nov 2022 - Reading progress indicator position when alerts are cramped in.
  26 Sept 2022 - Fix top offset parent difference.
  19 Sept 2022 - Fix top offset caching issue
  28 June 2022 - Fix scrollparent detector
  Remove overscroll iOs safari with force.
  Fix vw issue when layout collapsed
  Minimal layout did needs to scroll too.
  Fix vh issue.
  Accessibility: Change tabfocus back to search toggle, when layout expanded. (js)


Changed

  Whatsapp button can be part of page-layout
  Add calculated vw unit to header, needed for browsers from vendors with different opinions.
  Print: css adjustments
  Country Select .vi-page-layout__countries element to show country switch.


Added

  08 Mar 2023 - Sticky mode, by adding data-sticky="true".
  14 Dec 2022 - Landing Layout for Site Split Landing page.
  25 Nov 2022 - Documentation on full width layout.
  Javascript emits event for Country Select Lookup
  Accessibility: Tabindex collapsed state when viewed at 200%;
  Accessibility: Add area-expanded collapsed menu buttons
  Accessibility: Changed text of menu buttons.
  Accessibility: Add visibility hidden / aria-hidden to menu.
  Accessibility: Country select ‘logic navigation sequence’.
  Accessibility: Add aria-expanded and aria-label to search toggle button.
  RTL support
  Accessibility: css/js changes to show outline on links and have a better tab order flow.
  Accessibility: added id #vi-content to .vi-page-layout__main.
  Accessibility: added <a class="vi-page-layout__skip-to-content" href="#vi-content">Skip to main content</a> link.
  Adjustments to support IP lookup version of Country Select Lookup
  Ability to load Page Countries with AJAX.
  Initial draft