REMOVED
This component has been removed from the Framework.
- Taxonomic name: PRODUCT-TABS
- Extension: EXTENSION-MYAVIVA
- Added on: v3.0.0 (15/09/17)
- Removed on: v5.0.0 (05/10/20)
Customer portal product tabs
Design and usage
Note: Must not be used on dark accent colours.
Examples
Interactive example
Code example
<div class="o-product-tabs [ Modifier ]" data-module="o-product-tabs">
<!-- First product tab -->
<div class="o-product-tabs__tab">
<p class="o-product-tabs__group-heading a-heading a-heading--4">...</p>
<div class="o-product-tab-category [ Modifier ] u-clear--inner">
<!-- Optional alert -->
<div role="alert" class="o-product-tab-category__alert">
<p>...</p>
</div>
<!-- End optional alert -->
<p class="o-product-tab-category__link"><span class="o-product-tab-category__link-text">...</span></p>
</div>
<div class="o-product-tabs__tab-content">
...
</div>
</div> <!-- Standard product tab -->
<div class="o-product-tabs__tab">
<div class="o-product-tab-category [ Modifier ] u-clear--inner">
<p class="o-product-tab-category__link"><span class="o-product-tab-category__link-text">...</span></p>
</div>
<div class="o-product-tabs__tab-content">
...
</div>
</div> <!-- First product offer tab -->
<div class="o-product-tabs__tab o-product-tabs__tab--offer">
<p class="o-product-tabs__group-heading a-heading a-heading--4">...</p>
<div class="o-product-tab-category [ Modifier ] u-clear--inner">
<h2 class="a-heading a-heading--2 a-heading--light o-product-tab-category__heading">...</h2>
<p class="o-product-tab-category__description">...</p>
<p class="o-product-tab-category__link"><span class="o-product-tab-category__link-text">...</span></p>
<p class="o-product-tab-category__label a-heading a-heading--4">...</p>
</div>
<div class="o-product-tabs__tab-content">
...
</div>
</div> <!-- Standard product offer tab -->
<div class="o-product-tabs__tab o-product-tabs__tab--offer">
<div class="o-product-tab-category [ Modifier ] u-clear--inner">
<h2 class="a-heading a-heading--2 a-heading--light o-product-tab-category__heading">...</h2>
<p class="o-product-tab-category__description">...</p>
<p class="o-product-tab-category__link"><span class="o-product-tab-category__link-text">...</span></p>
<p class="o-product-tab-category__label a-heading a-heading--4">...</p>
</div>
<div class="o-product-tabs__tab-content">
...
</div>
</div>
</div>Development and test
Notes for developers
The text included within the o-product-tab-category__link must be meaningful on its own so that it is fully accessible when it is converted into a link; for example, a motor product tab with just "Motor" visible:
<p class="o-product-tab-category__link"><span class="o-product-tab-category__link-text"><span class="u-hidden--visually">Check your </span>Motor<span class="u-hidden--visually"> policies</span></span></p>...or a travel offer tab with just "View your offer" visible:
<p class="o-product-tab-category__link"><span class="o-product-tab-category__link-text">View your <span class="u-hidden--visually">travel</span> offer</span></p>o-product-tab-category__alert is optional for non offer product tabs but ensure that text place within this element is kept to only a few words.
Extension component
This component forms part of the 'extension-myaviva' extension and so requires an additional stylesheet to be loaded in order to be used; include the following code in the header of your page to attach the relevant additional stylesheet:
<!--[if !IE | gt IE 8]><!-->
<link media="all" href="[ CDN Folder Path ]/css/customer/extension-myaviva.css" rel="stylesheet" />
<!--<![endif]-->
<!--[if lte IE 8]>
<link media="all" href="[ CDN Folder Path ]/css/customer/extension-myaviva-unmq.css" rel="stylesheet" />
<![endif]-->Classes overview
The following table gives you a quick overview of the CSS classes that can be applied.
| Class | Outcome | Required | Applied to | Comments |
|---|---|---|---|---|
.o-product-tabs |
Container for the group of product tabs | Yes | div |
|
.o-product-tabs--four |
Modifier to change the number of product tabs displayed at different screen sizes to a maximum of 4 columns | .o-product-tabs |
||
.o-product-tabs__tab |
Container for one product tab | Yes | .o-product-tabs > div |
|
.o-product-tabs__group-heading |
Style for the tab group heading | Yes | .o-product-tabs__tab > p.a-heading.a-heading--4 |
This is only required for the first tab of its type |
.o-product-tab-category |
Base style for the tab card | Yes | .o-product-tabs__tab > div.u-clear--inner |
|
.o-product-tab-category--health |
Modifier to add the health product icon | .o-product-tab-category |
 |
|
.o-product-tab-category--home |
Modifier to add the home product icon | .o-product-tab-category |
 |
|
.o-product-tab-category--life |
Modifier to add the life product icon | .o-product-tab-category |
 |
|
.o-product-tab-category--motor |
Modifier to add the motor product icon | .o-product-tab-category |
 |
|
.o-product-tab-category--pensions |
Modifier to add the pensions product icon | .o-product-tab-category |
 |
|
.o-product-tab-category--pet |
Modifier to add the pet product icon | .o-product-tab-category |
 |
|
.o-product-tab-category--savings |
Modifier to add the savings product icon | .o-product-tab-category |
 |
|
.o-product-tab-category--travel |
Modifier to add the travel product icon | .o-product-tab-category |
 |
|
.o-product-tab-category__heading |
Base style for offer heading | Yes | .o-product-tabs__tab--offer .o-product-tab-category > h2 |
|
.o-product-tab-category__description |
Base style for offer description | Yes | .o-product-tabs__tab--offer .o-product-tab-category > p |
|
.o-product-tab-category__link |
Base style for the text that will be turned into a link | Yes | .o-product-tabs__tab .o-product-tab-category > p |
|
.o-product-tab-category__label |
Base style for product type text with icon within offer tab | Yes | .o-product-tabs__tab--offer .o-product-tab-category > .a-heading.a-heading--4 |
|
.o-product-tabs__tab-content |
Base style for the tab content holder | Yes | .o-product-tabs__tab .o-product-tab-category + div |