Aviva Front-end Framework

Aviva's UX, design and front-end atomic element library

Continue to read more about the framework

Global experience principles

Find out all about how it should work, UX and Design principles to apply to experiences using the front-end framework

Check out the principles

Element library

Our atomic design element libraries: currently available templates, organism, molecules, atoms… Guidelines and examples: they're all here

Use the elements

How to guides

Building a website with the front-end framework? Here's how to use it and how to add / edit elements

Find out how

Latest updates



To improve upon and replace breadcrumbs.


International contact

Combination of inputs to capture international contact details.



  • 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.

View the full release log

Stay up-to-date

Sign up to our email alerts about new releases to the front-end framework and CDN