Product roundels

Examples

Standard variant (six items)

The product roundels component should six items; this consists of a user's policies plus however many additional offers are needed to complete the set of six.

Interactive example

Code example

<div class="o-product-roundels u-margin--top-none" data-module="o-product-roundels">
	<!-- Policies -->
	<div class="o-product-roundels-group o-product-roundels-group--policies">
		<p class="o-product-roundels__group-heading a-heading a-heading--2">Your policies</p>
		<!-- Start first policy -->
		<div class="o-product-roundels__tab">
			<div class="o-product-roundels-category u-clear--inner">
				<!-- Optional alert -->
				<div role="alert" class="o-product-roundels-category__alert [ Modifier ]">
					<p>...</p>
				</div>
				<!-- End optional alert -->
				<p class="o-product-roundels-category__link">
					<img src="..." decoding="async" width="..." height="..." alt="" />
					<span class="o-product-roundels-category__group">
						<span class="o-product-roundels-category__link-text">...<span class="u-hidden--visually"> ...</span></span>
						<!-- Optional alert -->
						<span role="alert" class="o-product-roundels-category__alert [ Modifier ] o-product-roundels-category__alert--mobile">
							<span>...</span>
						</span>
						<!-- End optional alert -->
					</span>
				</p>
			</div>
			<div class="o-product-roundels__tab-content">
				<div class="o-product-roundels__tab-content-container">
					...
				</div>
			</div>
		</div>
		<!-- End first policy -->
		<!-- Other policy items here -->
	</div>
	<!-- End policies -->	<!-- Offers -->
	<div class="o-product-roundels-group o-product-roundels-group--offers">
		<p class="o-product-roundels__group-heading a-heading a-heading--2">More from us</p>
		<!-- Start first offer -->
		<div class="o-product-roundels__tab o-product-roundels__tab--offer">
			<div class="o-product-roundels-category u-clear--inner">
				<div class="o-product-roundels-category__offer">
					<span class="o-product-roundels-category__link-text">...<span class="u-hidden--visually">...</span></span>
					<p>... <span class="o-product-roundels-category__offer-price">...</span></p>
				</div>
				<p class="o-product-roundels-category__link">
					<img src="..." decoding="async" width="..." height="..." alt="" />
					<span class="o-product-roundels-category__link-content">
						<span class="o-product-roundels-category__link-text" aria-hidden="true">...<span class="u-hidden--visually"> ...</span></span>
						<span class="o-product-roundels-category__link-price">... <span class="o-product-roundels-category__offer-price">...</span></span>
					</span>
				</p>
			</div>
			<div class="o-product-roundels__tab-content">
				<div class="o-product-roundels__tab-content-container">
					...
				</div>
			</div>
		</div>
		<!-- End first offer -->
		<!-- Other offer items here -->
	</div>
	<!-- End offers -->
</div>

Carousel variant (seven or more policies)

In exceptional circumstances, a user may have more seven or more active policies. In this instance, the component will automatically convert to a carousel to enable the user to access all of their information.

Interactive example

Code example

<div class="o-product-roundels u-margin--top-none" data-module="o-product-roundels">
	<!-- Policies -->
	<div class="o-product-roundels-group o-product-roundels-group--policies">
		<p class="o-product-roundels__group-heading a-heading a-heading--2">Your policies</p>
		<!-- Start first policy -->
		<div class="o-product-roundels__tab">
			<div class="o-product-roundels-category u-clear--inner">
				<!-- Optional alert -->
				<div role="alert" class="o-product-roundels-category__alert [ Modifier ]">
					<p>...</p>
				</div>
				<!-- End optional alert -->
				<p class="o-product-roundels-category__link">
					<img src="..." decoding="async" width="..." height="..." alt="" />
					<span class="o-product-roundels-category__group">
						<span class="o-product-roundels-category__link-text">...<span class="u-hidden--visually"> ...</span></span>
						<!-- Optional alert -->
						<span role="alert" class="o-product-roundels-category__alert [ Modifier ] o-product-roundels-category__alert--mobile">
							<span>...</span>
						</span>
						<!-- End optional alert -->
					</span>
				</p>
			</div>
			<div class="o-product-roundels__tab-content">
				<div class="o-product-roundels__tab-content-container">
					...
				</div>
			</div>
		</div>
		<!-- End first policy -->
		<!-- Other policy items here -->
	</div>
</div>

Development and test

Notes for developers

Extension component

This component forms part of the 'portal' extension and so requires additional stylesheets to be loaded in order to be used; include the following code in the header of your page to attach the relevant additional stylesheets:

<!--[if !IE | gt IE 8]><!-->
	<link media="all" href="[ CDN Folder Path ]/css/customer/portal.css" rel="stylesheet" />
<!--<![endif]-->
<!--[if lte IE 8]>
	<link media="all" href="[ CDN Folder Path ]/css/customer/portal-unmq.css" rel="stylesheet" />
<![endif]-->
<!--[if IE 9]>
	<link media="all" href="[ CDN Folder Path ]/css/customer/portal-ie9.css" rel="stylesheet" />
<![endif]-->

The text included within the o-product-roundels-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-roundels-category__link"><span class="o-product-roundels-category__link-text">Motor<span class="u-hidden--visually"> - check your policies</span></span></p>

...or a travel offer with just "View your offer" visible:

<p class="o-product-roundels-category__link"><span class="o-product-roundels-category__link-text">View your offer <span class="u-hidden--visually">- travel</span></span></p>

o-product-roundels-category__alert is optional for non-offer product roundels, but ensure that text placed within this element is kept to only a few words.

Note: Must not be used on dark accent colours.

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-roundels`	Container for the group of product roundels	Yes	`div`
`.o-product-roundels__group`	Container for one the policies/offers groups	Yes	`.o-product-roundels > div`
`.o-product-roundels__group--policies`	Modifier for the policies group	Yes	`.o-product-roundels > div`
`.o-product-roundels__group--offers`	Modifier for the offers group		`.o-product-roundels > div`	Required for standard variant, but not if there are seven or more policies
`.o-product-roundels__group-heading`	Heading style for the policies/offers groups	Yes	`.o-product-roundels__group > p`
`.o-product-roundels__tab`	Container for one product item	Yes	`.o-product-roundels__group > div`
`.o-product-roundels__tab--offer`	Mofidier for offer item		`.o-product-roundels__group--offers > div`	Required for standard variant, but not if there are seven or more policies
`.o-product-roundels-category`	Base style for the item card	Yes	`.o-product-roundels__tab > div.u-clear--inner`
`.o-product-roundels-category__alert`	Base style for optional alert message		`.o-product-roundels-category > div`
`.o-product-roundels-category__alert--reminder`	Modifier for green reminder alert message		`.o-product-roundels-category > div`
`.o-product-roundels-category__alert--warning`	Modifier for orang warning alert message		`.o-product-roundels-category > div`
`.o-product-roundels-category__alert--error`	Modifier for red error alert message		`.o-product-roundels-category > div`
`.o-product-roundels-category__link`	Base style for the text that will be turned into a link	Yes	`.o-product-tab-category > p`
`.o-product-roundels__tab-content`	Base style for the tab content holder	Yes	`.o-product-roundels-category + div`
`.o-product-roundels__tab-content-container`	Base style for the tab content holder inner wrapper	Yes	`.o-product-roundels__tab-content > div`

Component releases

Added on: v3.0.0 (15/09/17)
Removed on: v5.0.0 (05/10/20)

Latest update:

Both 'Customer portal product roundels' and 'Customer portal product tabs' removed to make way for a more modular design and allow the MyAviva project to build, maintain and evolve the design as required.

Full version history

A full history of changes and enhancements detailing all minor and major updates to the component.

View full version history

Want something new in Framework, or to chat about an issue you're having with it?

Contact the team