The Page Masthead contains secondary navigation elements.
Page Masthead is part of the Page component.
<!-- Page Masthead -->
<div class="vi-page-masthead">
<div class="vi-page-masthead__main">
<ul class="vi-page-masthead__navigation">
<li class="vi-page-masthead__navigation-item">
<a class="vi-page-masthead__navigation-link" data-tabindex-collapsed="12" href="#sample">Brought to you by Teva</a>
</li>
<li class="vi-page-masthead__navigation-item">
<a class="vi-page-masthead__navigation-link" data-tabindex-collapsed="12" href="#sample">Covid 19</a>
</li>
</ul>
<div class="vi-page-masthead__actions">
<ul class="vi-page-masthead__language-switch">
<li class="vi-page-masthead__language-switch-item">
<a aria-label="English" class="vi-page-masthead__language-switch-link is-active" data-tabindex-collapsed="11" href="#sample" hreflang="en" lang="en">
<span class="sr-only">English</span>
</a>
</li>
<li class="vi-page-masthead__language-switch-item">
<a aria-label="Français" class="vi-page-masthead__language-switch-link" data-tabindex-collapsed="11" href="#sample" hreflang="fr" lang="fr">
<span class="sr-only">Français</span>
</a>
</li>
<li class="vi-page-masthead__language-switch-item">
<a aria-label="Deutsch" class="vi-page-masthead__language-switch-link" data-tabindex-collapsed="11" href="#sample" hreflang="de" lang="de">
<span class="sr-only">Deutsch</span>
</a>
</li>
<li class="vi-page-masthead__language-switch-item">
<a aria-label="日本語" class="vi-page-masthead__language-switch-link" data-tabindex-collapsed="11" href="#sample" hreflang="ja" lang="ja">
<span class="sr-only">日本語</span>
</a>
</li>
</ul>
<div class="vi-page-masthead__action vi-page-masthead__action--session">
<!-- Button type: masthead -->
<a data-tabindex-collapsed="10" href="#" class="vi-btn-masthead vi-btn-masthead--icon vi-btn-masthead--session vi-btn"><span class="vi-btn-masthead__label vi-btn-masthead__label--icon vi-btn-masthead__label--session vi-btn__label">Login</span></a>
</div>
<div class="vi-page-masthead__action vi-page-masthead__action--search">
<!-- Button type: masthead -->
<button data-trigger="search" data-tabindex-collapsed="5" aria-label="Toggle search" aria-expanded="false" type="button" class="vi-btn-masthead vi-btn-masthead--icon vi-btn-masthead--search vi-btn"><span class="vi-btn-masthead__label vi-btn-masthead__label--icon vi-btn-masthead__label--search vi-btn__label">Toggle search</span></button>
</div>
</div>
</div>
</div>
<!-- Page Masthead -->
<div class="vi-page-masthead">
<div class="vi-page-masthead__main">
<ul class="vi-page-masthead__navigation">
<li class="vi-page-masthead__navigation-item">
<a class="vi-page-masthead__navigation-link" data-tabindex-collapsed="12" href="#sample">Brought to you by Teva</a>
</li>
<li class="vi-page-masthead__navigation-item">
<a class="vi-page-masthead__navigation-link" data-tabindex-collapsed="12" href="#sample">Covid 19</a>
</li>
</ul>
<div class="vi-page-masthead__actions">
<div class="vi-page-masthead__action vi-page-masthead__action--pharmacy">
<!-- Button type: masthead -->
<a href="#" class="vi-btn-masthead vi-btn-masthead--icon vi-btn-masthead--voucher-balance vi-btn"><span class="vi-btn-masthead__label vi-btn-masthead__label--icon vi-btn-masthead__label--voucher-balance vi-btn__label">Amazon</span></a>
</div>
<div class="vi-page-masthead__action vi-page-masthead__action--cart">
<!-- Button type: masthead -->
<a href="#" class="vi-btn-masthead vi-btn-masthead--icon vi-btn-masthead--cart vi-btn"><span class="vi-btn-masthead__label vi-btn-masthead__label--icon vi-btn-masthead__label--cart vi-btn__label">123</span></a>
</div>
<div class="vi-page-masthead__action vi-page-masthead__action--session">
<!-- Button type: masthead -->
<a data-tabindex-collapsed="10" href="#" class="vi-btn-masthead vi-btn-masthead--icon vi-btn-masthead--session vi-btn"><span class="vi-btn-masthead__label vi-btn-masthead__label--icon vi-btn-masthead__label--session vi-btn__label">Login</span></a>
</div>
<div class="vi-page-masthead__action vi-page-masthead__action--pharmacy">
<!-- Button type: masthead -->
<a href="#" class="vi-btn-masthead vi-btn-masthead--icon vi-btn-masthead--pharmacy vi-btn"><span class="vi-btn-masthead__label vi-btn-masthead__label--icon vi-btn-masthead__label--pharmacy vi-btn__label">Amazon</span></a>
</div>
<div class="vi-page-masthead__action vi-page-masthead__action--search">
<!-- Button type: masthead -->
<button data-trigger="search" data-tabindex-collapsed="5" aria-label="Toggle search" aria-expanded="false" type="button" class="vi-btn-masthead vi-btn-masthead--icon vi-btn-masthead--search vi-btn"><span class="vi-btn-masthead__label vi-btn-masthead__label--icon vi-btn-masthead__label--search vi-btn__label">Toggle search</span></button>
</div>
</div>
</div>
</div>
<div class="modal vi-modal vi-side-panel" id="side-panel-modal-pharmacy" role="dialog" tabindex="-1">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<div class="vi-modal-layout">
<div class="vi-modal-layout__body">
<div class="vi-modal-layout__section vi-modal-layout__section--header-close">
<div class="vi-modal-layout__header vi-typesystem vi-typesystem--collapse-last">
<h4>Your pharmacy</h4>
</div>
<div class="vi-modal-layout__close">
<button aria-label="Message dialog - click to close or navigate to the message content" class="vi-btn-close vi-btn-close--accent-1 vi-btn" data-dismiss="modal" type="button">
<span class="vi-btn-close__label vi-btn__label">Close</span>
</button>
</div>
</div>
<div class="vi-modal-layout__section">
<form action="#form-267e5c" autocomplete="off" class="vi-form vi-typesystem" data-validate="true" novalidate="">
<div class="form-group">
<div class="custom-radio custom-control custom-control--top">
<input aria-required="true" class="custom-control-input" id="control-66404d" name="name-b3e502" required="" type="radio">
<label class="custom-control-label text-dominant" for="control-66404d">
Aston healthcare Ltd
</label>
</div>
<div class="custom-radio custom-control custom-control--top">
<input aria-required="true" class="custom-control-input" id="control-91c64c" name="name-b3e502" required="" type="radio">
<label class="custom-control-label text-dominant" for="control-91c64c">
Bampton healthcare ltd, Landells, OX18 2LJ
</label>
</div>
<div class="custom-radio custom-control custom-control--top">
<input aria-required="true" class="custom-control-input" id="control-9e08d5" name="name-b3e502" required="" type="radio">
<label class="custom-control-label text-dominant" for="control-9e08d5">
Clanfield Health Care Ltd
</label>
</div>
<div class="custom-radio custom-control custom-control--top">
<input aria-required="true" class="custom-control-input" id="control-9e08d6" name="name-b3e502" required="" type="radio">
<label class="custom-control-label text-dominant" for="control-9e08d6">
Standlake Pharmacy, Black Bourton Rd
</label>
</div>
</div>
</form>
</div>
<button class="vi-btn-solid vi-btn-solid--no-pointer vi-btn mt-30" data-target="#sg-20a4e9" data-toggle="modal" type="button">Change pharmacy</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade vi-modal" id="sg-20a4e9" role="dialog" tabindex="-1">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-body">
<div class="vi-modal-layout">
<div class="vi-modal-layout__body">
<div class="vi-modal-layout__section vi-modal-layout__section--header-close">
<div class="vi-modal-layout__header vi-typesystem vi-typesystem--collapse-last">
<h3>
You will switch to a different pharmacy and pharmacy cart
</h3>
</div>
<div class="vi-modal-layout__close">
<button aria-label="Message dialog - click to close or navigate to the message content" class="vi-btn-close vi-btn-close--accent-1 vi-btn" data-dismiss="modal" type="button">
<span class="vi-btn-close__label vi-btn__label">Close</span>
</button>
</div>
</div>
<div class="vi-modal-layout__section">
<div class="vi-typesystem">
<p>
Your cart will still be here if you return to this pharmacy.
Donec sed odio dui. Curabitur blandit tempus porttitor. Cras
justo odio, dapibus ac facilisis in, egestas eget quam.
</p>
</div>
<div class="d-flex justify-content-between">
<button class="vi-btn-outline vi-btn-outline--no-pointer vi-btn" data-dismiss="modal" type="button">Cancel</button>
<button class="vi-btn-solid vi-btn-solid--no-pointer vi-btn" data-dismiss="modal" type="button">Change pharmacy</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
The following stylesheets are required to display this component.
Usage documentation can be found here.
Changelog
Fix
- RTL browser render (another) bug where Firefox unable to outline inline element correctly.
- RTL browser render bug where Chrome (webkit?) unable to outline inline element correctly.
Changed
- 16 Nov 2023 - Removed action buttons on the left of masthead.
- 11 Sep 2023 - Allow masthead buttons on link position.
- 22 May 2023 - Removed voucher bar and impersonation bar.
- 22 May 2023 - For now: text -> 14/24 and fixed padding smaller devices.
- data attribute
data-trigger="countries" added to the ‘Select your country website’ button.
Added
- 17 May 2023 - Add voucher bar.
- 10 May 2023 - Add impersonation bar.
- 21 Apl 2023 - Example of new masthead buttons.
- PBS support
- Accessibility: Tabindex collapsed state when viewed at 200%;
- Accessibility: Add
aria-expanded and aria-label to search toggle button.
- RTL support
- Accessibility: added
hreflang and aria-label to language links.
- Initial draft