CDN links and release log archive

Fix

• Minor correction to JavaScript file for primary tabs to stop additional quote mark appearing in URLs in static variant. See primary tabs for reference.
• Adjustment to non-linear navigation css to prevent Chrome drawing bug where the underline was not always visible for links on the bottom row of the component.

Fix

• Date input and date range will no longer display the JavaScript date picker when the date input is natively supported by the browser. This is to solve an issue where both the native and the JavaScript datepicker were displaying at the same time in a number of browsers. A replacement for this functionality will be added in a future release. See date and date range for reference.

Added

• Wallet component to handle layouts for credit card payments from existing and new cards. See wallet for reference.
• Tab variants to allow static links to external pages and tabs with lazy-loaded content. See section tabs and primary tabs for reference.
• Additional payment options are now available for use within the payment option list including Discover, RuPay and UnionPay. See payment option list for reference.

Updated

• Card carousel next/previous button hover state has changed from yellow to blue (#004FB6) to match the secondary button hover state. See card carousel for reference.
• Twelve new flag icon images and classes available. See country selection and masthead for reference.

Deprecated

• The Cirrus, Delta, Solo and Switch card icons have been deprecated as the cards are no longer in circulation. See payment option list for reference.

Added

• Combination of inputs to capture international contact details. See international contact for reference.
• Sub bullet style added to unordered lists. See lists for reference.

• Additional ordered list variant with reduced number size. See lists for reference.

  Note: This variant will replace the current default styling in the next major release. Please move to only using this variant for ordered lists.

• Larger range of icons to to be used with links with updated style and usage rules. See links for reference.
• Numerical indicators to highlight positive and negative numbers, amounts and percentages. See numeric indicators and table for reference.
• Wayfinder to improve upon and replace breadcrumbs. See wayfinder for reference.
• Frequently Asked Questions panels designed to display between two and five frequently asked questions within a full width or contained panel with a page for easy reference. See frequently asked questions panel and frequently asked questions panel - right hand side variant for reference.

Updated

• Opening times styling has been updated and instructions on how display additional content included in the documentation. See opening times for reference.
• Media player JavaScript file has been rewritten to conform to Abeille Assurances standards, and support for multiple captions/subtitles on videos has been added. See video for reference.
• All CSS and JavaScript code linted using the latest Abeille Assurances Global linting rules, improving code quality.
• Ordered list styling updated. See lists for reference.
• White cards on light grey background no longer have a 2px grey bottom border.
• Doughnut chart has been redesigned to offer the ability to show between 1 to 5 segments. Note: the styling of the chart has been updated to make the segments more prominant so any fallback images will need to be adjusted accordingly. See doughnut chart for reference.

• Masthead has had the following updates:

  • Navigation marker added to indicate which level one section a page belongs to.
  • On selection of search at tablet or desktop focus is automatically transferred to the search input.
  • Visual updates for small screens to improve accessibility through increase contrast between states.

  See masthead for reference.

• Footer has been updated to be able to include the new wayfinder component. See footer and wayfinder for reference.

Deprecated

• Link icons aligned to the left of the link text. These have now been replaced with icons aligned to the right and/or tertiary buttons with icons.
• Edit link with no onward journey has now been replaced by tertiary buttons. Please see buttons for more details.
• Headings with dividing line and optional link have been replaced with keyline dividers and tertiary buttons. Please see keyline dividers and buttons for more details.
• Breadcrumbs have been replaced by wayfinder. Please see wayfinder for reference.
• Agent profile card and agent call back card. There is no direct replacement.
• The auto-jump functionality for textbox groups should no longer be used as it does not comply with WCAG guidelines. There is currently no replacement for this pattern, but solutions for common usages ie sort-code, date, credit card numbers will be provided in a future release.

Added

• Carousel variant that allows all cards to be shown when JavaScript is not available. See carousel for reference.
• Stand-alone show more component to hide selected content from initial view. See show more for reference.
• Opening times list with show/hide functionality. See opening times for reference.
• Call us panel narrow column variant - left aligned by default at desktop. See call us panel for reference.
• Block quote variant with hidden quotation marks variant. See quote for reference.
• Plus/minus icon variant added to unordered list items. See lists for reference.
• New optional character count to the form textarea box. See textarea for reference.
• New prefix and suffix symbols and acronyms have been added. See textbox with symbol or acronym for reference. These replace the original prefix and suffix symbols shown within the textbox reference.
• Utility class and JavaScript to fade in blocks of content as they scroll into view. See content fade reference.
• Optional descriptive text can now be added below the sub navigation titles within the masthead. See masthead reference.
• Rules for indicating required and optional form fields have now been added. See form row reference.
• Three heading group variants added. Please see Heading groups for reference.
• New suite of button icons. See buttons for reference.

Updated

• Base template updated to include DNS prefetch tags and the async attribute on JavaScript files to help improve page performance. See base template for reference.
• Kerning of close button on modal windows reduced. The usage guidelines for modals has been updated to improve their clarity. See modal for reference.
• Global navigation has been updated to improve accessibility of the component. The content ordering has now been adjusted for when JavaScript is on but CSS is disabled.
• Improved accessibility of the primary and section tabs.
• Margin between form row elements reduced to 30px to match Sketch library. See form row for reference.
• Padding added to standard quotes to match pullout quote indentation. See quote for reference.
• All JavaScript has now been minified for greater page performance.
• Font loading so that only relevant subsets of fonts required for a page are downloaded, reducing page weight and loading times for the majority of pages.
• Style updates to the global navigation in mobile view to improve the look and feel when navigating through the sections.
• Form component documentation updated to include examples for marking fields as required, errored and valid.

Fix

• Issue where content within a hero was spilling out of the hero area on iPad

Deprecated

• Prefix and suffix symbols for textboxes have been deprecated, being replaced by textbox with symbol or acronym. Please move to the new textbox variants as soon as possible.
• Promotional modal has been deprecated in accordance with the updated usage guidelines. Please update any pages using them to conform to the latest guidelines. See modal for reference.
• Deprecated right aligned information icon for buttons, please use the new left aligned version. See buttons for reference.

Added

• In-page navigation that can sit flush below the hero component on a page and will smoothly scroll the user to sections of content within the same page. See in-page navigation for reference.
• Primary tabs for applying tabs to a whole page. See primary tabs for reference
• Sub header and icon styling styling for the primary or section tabs. See section tabs for reference
• Nested tabs styling to extend options available when using tabs. See section tabs for reference

• Stand-alone version of global navigation including, masthead, footer, cookie policy, country selection for use with sites that do not use the Framework or are still using a beta version. Has been tested for compatibility with previous Framework versions including:

  • v2.0.0
  • v1.1.4

  See stand-alone global navigation for reference

• Variant for checkbox multiselect to allow component to overlay other elements on the page (default version pushes content down). See checkbox multiselect for reference
• Tertiary card that is a white card with a grey border for use on a white background. See tertiary card for reference.
• Story deck used to place an image next to a text section with a header to present content in a story like format. See story deck for reference
• Lightest blue and dark grey accent colours available to use. See accent colour for reference.
• Tertiary buttons designed to look like a standard text link but provide a larger than standard hit target. See buttons for reference
• Button variants with icons video, search and message. See buttons for reference
• LiveChat button. See buttons for reference
• Button to be used alongside form elements. See buttons for reference
• Predictive search component for auto completion capability with textbox input. Works using static array of values or AJAX. See predictive search reference
• LinkedIn and Instagram social icons. See social list for reference
• Unequal column layout ( 66% / 33% ) for large screens now available. See columns for reference
• Maximum width containers can now be aligned to the left and have more width options available for use. See maximum width container for reference
• Additional focal options for hero banners are now available. See hero banner for reference
• Call us panel organism to contain telephone numbers, opening times and more. See call us panel for reference
• New standalone checkbox variant now available. Please see checkbox for reference
• Preferred contact textbox with radio button now available. Please see preferred contact for reference
• Additional column options of one and three columns at desktop are now available for the data group. See data group for reference
• Map styles and icons for use with Google maps now available. See map styling for reference
• New option to add short looping video to hero banners. Please see video hero banner for reference

Updated

• Styling of hover and selected states of pagination have been updated. Please see pagination for reference
• Styling of hover state in show/hide has been updated. Please see show/hide for reference
• Checkbox multiselect will now scroll if there are more than 4 options at mobile and more than 6 at other screen sizes and, focus and hover state colours updated to improve accessibility. See checkbox multiselect for reference
• Date component now supports updating the value, minimum and maximum dates after initial load. See date for reference
• Date range component can now be set to not allow the same day to be selected for the start and end dates, automatically set the end date on start date selection and update settings after initial load. See date range for reference
• 1:1 50/50 card padding has been adjusted to match with all other card variants. See 1:1 ratio 50/50 editorial card for reference
• Hero updated so that it now takes up 100% vertical height (minus the masthead) at mobile screen, with any content tethered to the bottom of the hero. See hero banner for reference
• Multi-select drop-down component focus and hover state colours updated. Please see multiselect for reference
• Base template updated to load in additional style-sheets required in order to maintain browser support. See base template for reference
• All style-sheets are minified for greater page performance.

Fixed

• Fix for width of pull out containers being miscalculated in some browsers.
• Fix for segmented controls where the selected option was twitching as the page is scrolled quickly.
• For for the pullout container where bullet points and ordered list items within the main content displayed below pullout content aligned to the left.
• Update to the Abeille Assurances logo link within the masthead to improve accessibility. See masthead for reference

Added

• New global masthead including:

  • Site switcher
  • Country selector
  • Main navigation with mega dropdown; 4 or 5 columns with optional promotional card for large screens, and support bar
  • Search
  • Log in and register
  • Logged in state
  • Small additional content area

  See masthead for reference.

• Cookie policy message for allowing users to accept the companies cookie policy. See cookie policy for reference.
• New footer to match with the latest design standards. See footer for reference.
• New tabs system to match with the latest design standards. See section tabs for reference.
• New 50/50 split 16:9 ratio full width editorial and navigation cards. See 16:9 ratio 50/50 full width editorial card and 16:9 ratio 50/50 full width navigation card references.
• New 50/50 split 1:1 ratio half width editorial and navigation cards. See 1:1 ratio 50/50 editorial card and 1:1 ratio 50/50 navigation card references.
• New 33/67 split 9:16 ratio editorial and navigation cards. See 9:16 ratio 33/67 editorial card and 9:16 ratio 33/67 navigation card references.
• New 50/50 split promo card variant, shows two promo cards side by side. See promo card page for reference.
• New numeric card used to convey the sequential process that needs to be followed. See numeric card page for reference.
• Checkbox multiselects, to convert long groups of checkboxes into a dropdown list. See checkbox multiselect for reference.
• New horizontal key line divider in 3 styles designed to be used with <hr> elements (or other elements as required) to separate content (or define a change) in a block of content. See keyline divider page for reference.
• A new utility class to aid with wrapping long strings which would otherwise flow out of the page layout, ie. long URLs, has been added. See utility classes page for reference.
• Official styling for figure caption. See imagery for reference.
• New lightest grey accent colour available to use. See accent colour reference.

Updated

• The video and audio now support subtitles/closed captions. See the documentation pages for further details.
• Heading styles have been updated to increase flexibility for design. The default heading weight is now regular with light and semi-bold variants available for heading 0 to heading 3. See headings for reference
• The loading indicator has been updated to improve accessibility. See loading indicato for reference

• The following components have been updated to conform with the latest design standards:

  • Audio
  • Video
  • Form row - Dividing line between rows removed
  • Checkboxes - Colours
  • Date range - Colours
  • Dropdown - Colours
  • Segmented controls (v3) - Colours
  • Show/hide - Colours and content area spacing adjusted
  • Slider - Colours
  • Slider range - Colours
• The agent profile card and agent profile call back have been removed from the core styles and are now available as an extension that should to be loaded as required.
• The customer portal tabs and headers have been removed from the core styles and are now available as an extension that should be loaded as required.
• The image urls for the icons used within the payment options list have been updated. See the payment options list reference.
• Base template updated to include improved schema support. See the Base template reference.

Removed

The following deprecated components have been completely removed and can no longer be used with this version of the Framework:

• Constrained container (.l-content-container--constrained) - no longer required to constrain form elements; use maximum width containers to constrain width elsewhere.
• Constrained container (.m-form-row--last) - no longer required to remove dividing border from form rows.
• Old footer (.footer) - use the updated footer instead.
• Old masthead (.masthead) - use updated masthead instead.
• Old form row (.form-row) - use updated form row instead.
• Old form row help (.m-form-row__help) - use updated form row help instead.
• Old checkboxes (.form-option--checkbox) - use updated checkboxes instead.
• Old date input (.form-input--date) - use updated date instead.
• Old date range (.form-start-end-date) - use updated date range instead.
• Old dropdown (.form-dropdown) - use updated dropdown instead.
• Old explanatory text (.form-label__desc or .form-label__link), use updated explanatory text instead.
• Old file upload (.form-file-upload) - use updated file upload instead.
• Old payment options list (.payment-options-list) - use updated progress bar instead.
• Old progress indicator (.list-progress) - use updated payment options list instead.
• Old radios (.form-option--radio) - replaced by segmented controls (v3).
• Slider (range-input) - use updated slider.
• Search form (.form-row--search) - no replacement.
• Static values (.form-row__value) - no replacement.
• Old textarea (.form-input) - use updated textarea.
• Old textbox (.form-input) - use updated textbox.
• Old textbox group (.form-control-group) - use updated textbox group.
• Old all pods (.pod), including notification pods, replaced by all card types
• Old promo card (.promo-card), replaced by editorial cards

Updated

• Following user testing, it was concluded that the "light" form elements performed significantly better than the "dark" form elements which were originally available in v2.0.0. Due to this the dark form elements have been superseded by all light form elements. Please update to version v2.1.0 and see code changes for further details.

Added

• Date range for inputing a pair of dates eg. start and end dates for cover.
• File input allowing users to browse the files on their computer and upload them.
• Slider for entering a number whose exact value is not important.
• Slider range for selecting a range of numbers whose exact value is not important.
• Textbox group for grouping text type inputs inline with either hidden or visible labels eg. sort code, pin.
• Promo card to highlight promotional offers.
• A new list style variant for when line lengths are 3 columns wide or less has been added.

Updated

• The following components have been updated to conform with the latest design standards:

  • Progress bar
  • Checkbox and confirmation checkbox
  • Date
  • Dropdown
  • Form row
  • Form row help
  • Plus/minus number textbox
  • Segmented controls (previously known as switches)
  • Textarea
  • Textbox
  • Blockquotes
  • Lists
• Hero has been updated to add an optional secondary button

Deprecated

The following components have been deprecated, please move to the new versions of these components as soon as possible.

• Radio, replaced by segmented controls
• Search form, there is currently no replacement for this component. Please use standard form components instead.

Added

• Review card to display customer ratings and reviews.

Updated

• Cards have been updated to conform to the current design standards

  • Download
  • Icon
  • Editorial
  • Navigation
• Modal windows have been updated to conform to current design standards

Deprecated

The following components have been deprecated, please move to the new versions of these components as soon as possible.

• Pods, replaced by card variants
• Promo card, replaced by editorial cards
• Reviews, replaced by review cards

Added

• New notifcation card for providing various notifications to a user including: success, information, functional messages/warnings and errors. These also have the option to be able to be closed by the user, if required.

Deprecated

The following components have been deprecated, please move to the new versions of these components as soon as possible.

• Notification pods
• Error pod, replaced by notification cards

Added

• Next button varient added following style updated to all buttons.
• Heading 3 bold variant added.
• Progress bar for use with the latest form input styles.

Updated

• Button style update:

  • Horizontal padding changed to 30px (from 27px)
  • Border radius changed to 4px (from 5px)
  • Chevron and associated transitions removed from standard button classes
  • Icon buttons updated for download, previous, print and top variants; new next variant added
  • 25% darker tint added for active state
  • Transparent button background/border/font colours updated for better appearance on accent colours

• Show/hide style update:

  • Chevron icons used on open/close
  • More spacing around chevron icons
  • Heading retains initial font size on open/close
  • Grey wide border used on open state footer

• Hero banner style update

  • Vertically central hero messages by default, previous message position options available
  • Bottom aligned hero messages for all image focal states on small screens by default, previous message position options available
  • Viewport reduced on small and large screen sizes
  • Spacing alignments
• Table styles updated along with scroll bar when tables become too wide to fit on screen.
• Heading 0 size updated from 92pt with 100pt leading to 70pt with 74pt leading at desktop and heading 3 font weight has been updated from regular to light.
• Breadcrumb style updated to reduce font size from 16pt to 14pt and utilise the updated chevron style.

• Icons updated to match latest icon library. Components with updated icons include:

  • Address, Telephone and email icons for body copy.
  • Breadcrumb
  • Buttons
  • Contextual help
  • Date input and deprecated version of date input
  • Download card
  • File updload
  • Links with icons
  • Lists
  • Modal
  • Progress bar
  • Show/hide
  • Social list
  • Tables
  • Tabs

Deprecated

• All original progress bar has now been deprecated. It is still available to use but please move to using the latest progress bar as soon as possible.

Updated

• The grid used within the Framework has now been updated so that at mobile there is now a 20px margin. The contextual help, footer, hero and modal components have been updated to work with the updated grid layout. No code changes are required for this update. For more information about the grid used within the Framework see the grid style guide.
• The show/hide component now has the option to have a section pre-opened on load. This will be overridden if another section within the show/hide has been linked too. See the developer notes within the show/hide reference for details on how to implement this functionality.

Added

• A video card that can be used to display similar videos to the one that a user is currently watching.

• New form components have been added. These include:

  • Checkbox
  • Date
  • Dropdown
  • Explanatory text
  • Form row
  • Form row help
  • Plus/Minus number textbox
  • Radio
  • Switches
  • Textarea
  • Textbox

Updated

• The Abeille Assurances logo used within the masthead has now been updated to use the new digital Abeille Assurances logo and the spacing has been adjusted appropriately. There are no code changes required

Deprecated

• All original form components have now been deprecated. They are still available to use but please move to using the latest form components as soon as possible.

  • Checkbox
  • Date
  • Date range
  • Dropdown
  • Explanatory text
  • File
  • Form row
  • Form row help
  • Radio
  • Range
  • Static values
  • Textarea
  • Textbox
  • Textbox group

.com specific theme updates

• Styles now completely separated from core. linking to postcss.css and postcss.unmq.css no longer required
• Tab component, so that multiple tabs can be displayed on a web page, each with different content
• Variant of the video card included

Added

• Ability to set the accent colour of all cards within a section at section level, and also override this on individual cards as required.
• Two new section container variants have been created to provided different top and bottom spacings, as required.

Updated

• Support for use of Twitter Summary cards has now been added to the base template and documentation on how to implement along with the Facebook Open Graph tag as well as how to use separately, and/or use the Twitter summary card with large image.
• Buttons have been updated in height in readiness for being placed alongside updated form fields. They also now have a minimum width set to ensure that they can not become too small.

.com specific theme updates

• A border will now automatically be added to the bottom of light blue download cards when placed on a dark blue background
• A border will now automatically be added to the bottom of all white cards on a light grey background
• A border will now automatically be added around all white cards on a white background
• Heading 2 styles at small and medium breakpoints have been updated
• The spacing between the grey markers below the carousel has been adjusted

Updated

• Hero banner component has been updated to allow use of an inline image rather than a background image if required, to aid the CMS authoring process.
• Base template updated to split CSS file. An issue with Internet Explorer versions 9 and below was identified where the browsers were not processing all of the included styles. This was due to the total number of rules within one stylesheet exceeding the maximum number those browsers can process. This fix requires a code change to use as two stylesheets now need to be referenced instead of one, although the original stylesheets are still available. See our code change log

Added

• Editorial content layout with pullout sections.
• Linear and non-linear navigation.
• Country and language selection.
• Report cards for linking to content such as financial reports.
• The ability to close the contextual help section using a link or button on the page.

Added

• Editorial cards allow the presentation of relevant information about our products and services.
• Navigation cards for directing users to an onward stage of a journey that is not editorial content.
• Download cards allow users to download/access relevant product documents.
• Hero banner enables the clear communication of the primary importance of a page and drive key customer behaviours.

Updated

• Update to show/hide component to act as an accordion at mobile. No code changes required.
• The FAQ list has been updated to allow the back link to be more easily customised.

Added

• Accent colour backgrounds to be used on full width stripes, pods, footer etc that automatically change the font and icon colours to work on the particular accent colour.
• Sections added to be used in conjunction with the accent colours to create striped sections on pages.
• New container constraining classes available to restrict full width content to columns on the grid and centre within the page.
• Breadcrumb
• Two new utility classes to remove top and bottom margin when required.
• Example of a review card
• Ability to supress the visited state on edit links that change the page state between non-editable and editable.
• Ability to left align form fields.

Updated

• Footer updated to use the new accent colour system.
• Promotional modals updated to use the new accent colour system.

Added

• Promotional card for use on pages such as loyalty/benefits has been added.
• New Heading 0 style.
• Icons for paragraphs (address, telephone and email).
• Specialties link icon.
• Text divider (Paragraph with grey background).
• Social links list
• Star rating
• Agent profile card
• Agent profile call back for use with the Agent profile card.

Updated

• Font sizes and styles for headings have been adjusted and the class names updated to fit BEM formatting. All usage of the heading class names will need to be updated and any custom modules built for previous versions of the Framework will need to be checked.
• Heading type used within the customer portal product header has been changed to allow for the global typography changes
• Colours within the Framework have been updated to match the finalised colour pallet
• Buttons have been updated to have a 5px border radius to match with the latest style guide

Fix

• Fix link icons causing a horizontal scroll bar to appear when the contain became narrower than the link width. Code changes required for this fix
• Fix for product tab transitions causing whole page to slide up and down on tab change
• Fix for accordion show/hide sections not staying on screen
• Fix for tabs not displaying full height if some wrap and others do not

Added

• Customer portal product tabs for use on pages such as the MyAviva policies page.
• New button group for three buttons that offers a different layout for small screens.
• New highlight style for warning messages.
• Heading with icon centred above.
• White pod with border.

Updated

• Update for the offer header to become a customer portal product header with modifier.
• View link icon replaced with document link icon.

Added

• Addition of a new neutral coloured notification pod.

Updated

• Updates to have centralised locale settings for JavaScript enhanced modules.
  Modules updated:
  • Base template
  • Date input
  • Start and end date inputs
  • FAQ question list
  • File input
  • Form help text
  • Video and audio
  • Modal windows
  • Pod with print button
• Changes to tables so styling is now applied using a surrounding div to aid in using WYSIWYG table editing

Bug fixes

• Fix for modal scrolling to the bottom of the content on first ever load
• Fix for ordered lists where the numbering overlayed the content in some instances
• Fix for links within form errors appearing in blue making them unreadable

Added

• Show/hide modifier for audio and video transcripts
• Maximum width set for audio and video elements their transcripts
• Basic multi column layouts
• Offer header with heading, strap-line and primary CTA

Updated

• Support for extending the Framework with JavaScript enchanced modules added.
• Utility class names updated to match class naming patterns.
• .content-container and its modifiers have been updated to match the class naming pattern to .l-content-container
• JavaScript datepicker updated so locale can be specified if required.

Bug fixes

• Fix for incorrect font being used with heading element and heading class were combined
• Fix for incorrect max and min date being set on JavaScript datepicker
• Fix for fancy scroll bar showing at all times for scrollable tables in IE9 - IE11
• Fix for video and audio not having a restricted maximum width for non-JavaScript

• Preview beta release to enable early development.
• Limited component/module set

• Testing coverage high but some known issues still remain including:

  • Audio player not visible in some mobile browsers
  • Loading indicator display issues in some versions of mobile safari
  • Datepicker can only take dd-mm-yyyy