CDN links and release log

Keep updated with our framework updates atom feed.

If you do not have access to the sketch assets and require it please contact Tom Smith, Al Grehan, Toby Haynes, Kapil Sharma or Long Chung directly or by using the contact form.

Release v.4.5.0

Download v.4.5.0 Sketch assets

Added

Updated

  • Card carousel can now be disabled at different breakpoints if required. This was added to be used in conjunction with the checkbox multicard select and radio singlecard select so that at small screens the page would not become excessively long. See card carousel for reference.
  • Data layout modifier introduced to reset data item font to a smaller size. See data layout for reference.
  • Data layout modifier introduced to provide a four column data layout with the first column at double width. See data layout for reference.
  • Lazy loading can now support polyfills for object-fit. See lazy loading for reference.

Fixed

  • Style fix for the checkbox multiselect card (basic variant) with non-JavaScript where when the card is checked and has focus the background is partially green.
  • Code changes to stand-alone global navigation to ensure that it will work independantly.
  • Correction to styling of the full screen modal at mobile where the background behind the close link was not full width.
  • Fix for setting/value update functions not working or not working correctly on the date and data range components.
  • Fix for race condition with use of Modernizr within component JavaScript.

No code changes required to components

This is an update release to v.4.4.0; adding new components, functionality/variants to current components and minor style adjustments. There are no code changes required to components to upgrade to this release from v.4.4.0.

CDN folder path //cdn.aviva.com/static/core/v.4.5.0/

Previous releases

Release v.4.4.1

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.

No code changes required to components

This is an patch release to v.4.4.0; fixing issues found in v4 of the framework. There are no code changes required to components to upgrade to this release from v.4.4.0.

CDN folder path //cdn.aviva.com/static/core/v.4.4.1/

Release v.4.4.0

Download v.4.4.0 Sketch assets

Added

Updated

  • Data layout can now be used on a selection of dark accent colours. See data layout for reference.
  • Primary tabs can now be used with a selection of dark and light accent colours. See primary tabs for reference.
  • H1 + H2 group has been added and widths of the headings are now restricted in accordance to the updated usage rules. See heading group for reference.

No code changes required to components

This is an update release to v.4.3.0; adding new components, functionality/variants to current components and minor style adjustments. There are no code changes required to components to upgrade to this release from v.4.3.0.

CDN folder path //cdn.aviva.com/static/core/v.4.4.0/

Release v.4.3.0

Download v.4.3.0 Sketch assets

Added

  • Lazy loading of images, both inline and background, is now available. This has been tested for compatability with all card types, figures, and hero banners. See lazy loading for reference.
  • Page structure examples, with PDF downloads for visual reference and working examples highlighting element spacing. See page structure for reference.
  • Form introduction addition, including revised form rules and form structure examples, with PDF download for visual reference and working example highlighting element spacing. See form introduction for reference.
  • Local theming documentation added to offer instruction on how to create colour variations of the framework for our clients/customers, but use the same markup and UX. See local theme for reference.

Updated

  • The masthead now has the option to direct link to pages rather than use a mega dropdown. This is for use on microsites that do not require the mega dropdown functionality. See masthead for reference.

No code changes required to components

This is an update release to v.4.2.0; adding new components, functionality/variants to current components and minor style adjustments. There are no code changes required to components to upgrade to this release from v.4.2.0.

CDN folder path //cdn.aviva.com/static/core/v.4.3.0/

Release v.4.2.0

Download v.4.2.0 Sketch assets

Added

  • New radio options for selecting an mutually exclusive option from a small list of 2-8 options. See radio options for reference.
  • New example form template available. See single page form template for reference.
  • New example login / register form templates available, including global login, confirmation page and further information page. See login / register form templates for reference.
  • New partner theme available for the framework offering a light grey and white version of the masthead. See partner theme for reference.

Updated

  • Segmented control usage guidelines have been updated to limit their use from 2-5 to 2-3 options following the addition of radio options. See segmented controls for reference.
  • Payment option images have been updated to clean up some of the logos and also provide SVG versions of all the options. These image updates have also been applied to the payment card field used within the wallet. See payment options for reference.

No code changes required to components

This is an update release to v.4.1.0; adding new components, functionality/variants to current components and minor style adjustments. There are no code changes required to components to upgrade to this release from v.4.1.0.

CDN folder path //cdn.aviva.com/static/core/v.4.2.0/

Release v.4.1.0

Download v.4.1.0 Sketch assets

Added

  • Additional variants for multi-segment doughnut charts, including right-aligned titles, and left justified titles with fixed indents. See doughnut charts for reference.
  • New customer portal roundels replacing the old customer portal product tabs. See customer portal product roundels for reference.
  • New data replay component to lay out data for ease of scanning. May be used to play information back to user that has already been entered. See Data replay for reference.

Deprecated

No code changes required to components

This is an update release to v.4.0.0; adding new components, functionality/variants to current components and minor style adjustments. There are no code changes required to components to upgrade to this release from v.4.0.0.

CDN folder path //cdn.aviva.com/static/core/v.4.1.0/

Release v.4.0.0 (BHANGBHANGDUC)

Download v.4.0.0 Sketch assets

Added

  • Highcharts, Highstock and Numeral.js vendor libraries are now available for use as required. See how to add/edit JavaScript for more information.
  • Full screen modal windows for form journeys. See full screen modal for reference.
  • Auto-formatting single-field memorable date textboxes. See Memorable date textbox page for reference.

Updated

  • JavaScript vendor libraries, including jQuery, have been updated to the latest versions to ensure latest security fixes are available. See code changes required to update from the previous release (moving from v.3.4.0 to v.4.0.0) for more information.
  • Code changes for tertiary buttons with icons to align them with Aviva Standards. See buttons for reference.
  • Code changes for full bleed cards to align them with Aviva Standards. See editorial cards for reference.
  • Code changes for heading groups to align them with Aviva Standards. See heading groups for reference.
  • Code changes for plus/minus number textbox to align with other JavaScript-enabled components. See plus/minus number textbox for reference.
  • Code changes for segmented controls to allow the use of inline sprite images. See segmented controls for reference.
  • All stylesheets have been moved and some have been renamed in readiness for a selection of Aviva Themes being available for use. Note this also affects the stand-alone global navigation components. See the base template and stand-alone global navigation pages for reference.
  • Some components have been split out from the Framework core into their own extension files to enable teams to load only what is required to help with page optimisation. See component categorisation for reference.
  • The utility classes u-margin--bottom-none and u-margin--top-none have been improved to ensure consistency when applied to any component.
  • Form labels updated to represent a heading 3 with a font of 20px regular and line height of 28px to meet current design standards.
  • Heading 1 at tablet screen size updated with a font size of 36px and line height of 46px so that it meets current design standards and is more visually appealing. See Headings for reference.
  • Corrections to call us panel spacing. See call us panel for reference.
  • Call us panel right aligned heading changed to represent heading 2. See Call us panel for reference.
  • Social link list has been updated to improve usability and accessability by increasing the hit target of each of the links. See social links list for reference.
  • Footer spacing has been updated to improve usability and accessability by increasing the hit target of each of the links. See footer for reference.
  • Masthead markup has been update in readiness for style changes to improve accessability. This change also allows for support for and of the icons available with tertiary buttons to be used within the mega dropdowns. See masthead for reference.
  • Spacing above and below a number of components has been updated to aid in simplifying spacing within templates and maintain consistency. For further details on what has changed see the v.4.0.0 code changes.
  • Spacing changes made to elements within forms. See form for reference.
  • Code changes made to unwrap legend tags from within span tags, resulting in right-floated links to drop below their labels. See code changes for general information and requirements, and Explanatory text for specific details regarding floated links.

Deprecated

  • Contextual help has been replace by the call us panel. See call us panel for reference.

Removed

  • Ability to override card accent colour setting. See accent colours for reference.
  • Cirrus, Delta, Solo and Switch payment options have been removed as the cards are no longer in circulation.
  • FAQ list for use within the contextual help component - FAQs can no longer be placed within the contextual help component, but should be displayed using the FAQ panel.
  • Large font size for ordered lists; former small font size version now default. See lists for reference.
  • Agent profile card and agent call back card, including associated specialism link styles; no direct replacement.
  • Right-aligned information icon for buttons; replaced by the left-aligned version. See buttons for reference.
  • Left-aligned link icon styles; replaced by right-aligned link icon styles, updated icons and/or tertiary buttons. See links for reference.
  • Breadcrumb; replaced by wayfinder.
  • Heading with dividing line; replaced with keyline dividers and tertiary buttons.
  • Divider utility class; replaced by keyline dividers.
  • Promo modal and promo modal with hero; no replacement.

With the release of v.4.0.0 all beta versions (v.2.1.0 and earlier) of the front-end framework are no longer supported. This means there will no longer be any bug fixes applied to these versions. Please move to a production release as soon as possible.

Code changes required

This is a major release; modifying current components as well as adding new components, functionality/variants to current components, a range of style adjustments and security updates.

See detailed breakdown of code changes required to update from the previous release (moving from v.3.4.0 to v.4.0.0).

CDN folder path //cdn.aviva.com/static/core/v.4.0.0/

Release v.3.4.2

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.

No code changes required to components

This is an patch release to v.3.4.1; fixing issues found in v3 of the framework. There are no code changes required to components to upgrade to this release from v.3.4.1.

CDN folder path //cdn.aviva.com/static/core/v.3.4.2/

Release v.3.4.1

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.

No code changes required to components

This is an patch release to v.3.4.0; fixing issues found in v3 of the framework. There are no code changes required to components to upgrade to this release from v.3.4.0.

CDN folder path //cdn.aviva.com/static/core/v.3.4.1/

Release v.3.4.0

Download v.3.4.0 Sketch assets

Added

  • Wallet component to handle layouts for credit card payments from existing and new cards. See wallet (v3) for reference.
  • Tab variants to allow static links to external pages and tabs with lazy-loaded content. See section tabs (v3) and primary tabs (v3) for reference.
  • Additional payment options are now available for use within the payment option list including Discover, RuPay and UnionPay. See payment option list (v3) 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 (v3) for reference.
  • Twelve new flag icon images and classes available. See country selection (v3) and masthead (v3) 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 (v3) for reference.

No code changes required to components

This is an update release to v.3.3.0; adding new components, functionality/variants to current components and minor style adjustments. There are no code changes required to components to upgrade to this release from v.3.3.0.

CDN folder path //cdn.aviva.com/static/core/v.3.4.0/

Release v.3.3.0

Download v.3.3.0 Sketch assets

Added

  • Combination of inputs to capture international contact details. See international contact (v3) for reference.
  • Sub bullet style added to unordered lists. See lists (v3) for reference.
  • Additional ordered list variant with reduced number size. See lists (v3) 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 (v3) for reference.
  • Numerical indicators to highlight positive and negative numbers, amounts and percentages. See numeric indicators (v3) and table (v3) for reference.
  • Wayfinder to improve upon and replace breadcrumbs. See wayfinder (v3) 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 (v3) and frequently asked questions panel - right hand side variant (v3) for reference.

Updated

  • Opening times styling has been updated and instructions on how display additional content included in the documentation. See opening times (v3) for reference.
  • Media player JavaScript file has been rewritten to conform to Aviva standards, and support for multiple captions/subtitles on videos has been added. See video (v3) for reference.
  • All CSS and JavaScript code linted using the latest Aviva Global linting rules, improving code quality.
  • Ordered list styling updated. See lists (v3) 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 (v3) 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 (v3) for reference.

  • Footer has been updated to be able to include the new wayfinder component. See footer (v3) and wayfinder (v3) 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 (v3) for more details.
  • Headings with dividing line and optional link have been replaced with keyline dividers and tertiary buttons. Please see keyline dividers (v3) and buttons (v3) 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.

No code changes required to components

This is an update release to v.3.2.0; adding new components, functionality/variants to current components and minor style adjustments. There are no code changes required to components to upgrade to this release from v.3.2.0.

CDN folder path //cdn.aviva.com/static/core/v.3.3.0/

Release v.3.2.0

Download v.3.2.0 Sketch assets

Added

  • Carousel variant that allows all cards to be shown when JavaScript is not available. See carousel (v3) for reference.
  • Stand-alone show more component to hide selected content from initial view. See show more (v3) for reference.
  • Opening times list with show/hide functionality. See opening times (v3) for reference.
  • Call us panel narrow column variant - left aligned by default at desktop. See call us panel (v3) for reference.
  • Block quote variant with hidden quotation marks variant. See quote (v3) for reference.
  • Plus/minus icon variant added to unordered list items. See lists (v3) for reference.
  • New optional character count to the form textarea box. See textarea (v3) for reference.
  • New prefix and suffix symbols and acronyms have been added. See textbox with symbol or acronym (v3) for reference. These replace the original prefix and suffix symbols shown within the textbox symbols (v3) reference.
  • Utility class and JavaScript to fade in blocks of content as they scroll into view. See content fade (v3) reference.
  • Optional descriptive text can now be added below the sub navigation titles within the masthead. See masthead (v3) reference.
  • Rules for indicating required and optional form fields have now been added. See form row (v3) reference.
  • Three heading group variants added. Please see Heading groups (v3) for reference.
  • New suite of button icons. See buttons (v3) 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 (v3) for reference.
  • Kerning of close button on modal windows reduced. The usage guidelines for modals has been updated to improve their clarity. See modal (v3) 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 (v3) for reference.
  • Padding added to standard quotes to match pullout quote indentation. See quote (v3) 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

No code changes required to components

This is an update release to v.3.1.0; adding new components, functionality/variants to current components and minor style adjustments. There are no code changes required to components to upgrade to this release from v.3.1.0.

There are some additional settings that can be added to the base template to improve page performance. See details of how to update the base template from v.3.1.0.

CDN folder path //cdn.aviva.com/static/core/v.3.2.0/

Release v.3.1.0

Download v.3.1.0 Sketch assets

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 (v3) for reference.
  • Primary tabs for applying tabs to a whole page. See primary tabs (v3) for reference
  • Sub header and icon styling styling for the primary or section tabs. See section tabs (v3) for reference
  • Nested tabs styling to extend options available when using tabs. See section tabs (v3) for reference
  • Stand-alone version of global navigation including, masthead, footer, cookie policy, country selection for use with sites that do not use the front-end 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 (v3) for reference

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

Updated

  • Styling of hover and selected states of pagination have been updated. Please see pagination (v3) for reference
  • Styling of hover state in show/hide has been updated. Please see show/hide (v3) 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 (v3) for reference
  • Date component now supports updating the value, minimum and maximum dates after initial load. See date (v3) 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 (v3) 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 (v3) 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 (v3) for reference
  • Multi-select drop-down component focus and hover state colours updated. Please see multiselect (v3) for reference
  • Base template updated to load in additional style-sheets required in order to maintain browser support. See base template (v3) 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 Aviva logo link within the masthead to improve accessibility. See masthead (v3) for reference

No code changes required to components

This is an update release to v.3.0.0; adding new components, functionality/variants to current components and minor style adjustments. There are no code changes required to components to upgrade to this release from v.3.0.0.

There is a change to the number of style-sheets required in order to maintain browser support for older browsers. See details of how to update the CSS loading from v.3.0.0.

CDN folder path //cdn.aviva.com/static/core/v.3.1.0/

Release v.3.0.0 (ANKH-MORPORK)

Download v.3.0.0 Sketch assets

Added

Updated

  • The video (v3) and audio (v3) 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 (v3) for reference
  • The loading indicator has been updated to improve accessibility. See loading indicato (v3) for reference
  • The following components have been updated to conform with the latest design standards:

  • 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 (v3) reference.
  • Base template updated to include improved schema support. See the Base template (v3) 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 (v3) 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 (v3) instead.
  • Old masthead (.masthead) - use updated masthead (v3) instead.
  • Old form row (.form-row) - use updated form row (v3) instead.
  • Old form row help (.m-form-row__help) - use updated form row help (v3) instead.
  • Old checkboxes (.form-option--checkbox) - use updated checkboxes (v3) instead.
  • Old date input (.form-input--date) - use updated date (v3) instead.
  • Old date range (.form-start-end-date) - use updated date range (v3) instead.
  • Old dropdown (.form-dropdown) - use updated dropdown (v3) instead.
  • Old explanatory text (.form-label__desc or .form-label__link), use updated explanatory text (v3) instead.
  • Old file upload (.form-file-upload) - use updated file upload (v3) instead.
  • Old payment options list (.payment-options-list) - use updated progress bar (v3) instead.
  • Old progress indicator (.list-progress) - use updated payment options list (v3) instead.
  • Old radios (.form-option--radio) - replaced by segmented controls (v3).
  • Slider (range-input) - use updated slider (v3).
  • Search form (.form-row--search) - no replacement.
  • Static values (.form-row__value) - no replacement.
  • Old textarea (.form-input) - use updated textarea (v3).
  • Old textbox (.form-input) - use updated textbox (v3).
  • Old textbox group (.form-control-group) - use updated textbox group (v3).
  • Old all pods (.pod), including notification pods, replaced by all card types
  • Old promo card (.promo-card), replaced by editorial cards (v3)
CDN folder path //cdn.aviva.com/static/core/v.3.0.0/

View logs for earlier releases