Using a calculator as its own page
A consistent calculator webpage template could include a calculator header and a description section to explain what the calculator does/how it works, prior to a distinct section for the actual calculator.
Requirements
- The Calculator container sits full-width within a page template.
- 6px rounded corners on the Calculator container.
- When using the tab component use the version where a keyline separates the tabs from the content below.
- The Info icon and Calculator Help should open when clicked, not on hover.
- The background of the container should be Dow White and the Form Fields use Web Light Grey.
- The function buttons (‘Calculate’ and ‘Clear’) sit together and towards the bottom right of the input fields.
- On the calculator webpage, you may also include a carousel for linking to relevant resources or webpages (enabling onward user journey).
Using a calculator in an existing page
Create a title for the calculator to separate it from the main content (in this case ‘PSA Calculator’). You can add a short description of how to use the calculator. There is also an option to use an icon to identify the calculator.
