BT.com Design Guidelines
| Introduction | Notifications | Grids | Colours | Typography | Image Sizes | Padding and Spacing | Modals | Icons | Social Norms | Dividers
| Tables | Package Selector | Timelines | Progress Indicator | CTAs and Buttons | Forms | Tooltips | Accordions | Loaders |
Accordion
We try not to hide content from the customer so great thought should be exercised before deciding to use an accordion to contain content.
Interaction
When the section title of the accordion is clicked/tapped the tray slides open and the chevron turns clockwise and points upwards.
Mini or Maxi
The only difference between these two accordions are the font size, with ‘Mini’ using BodyR and ‘Maxi’ using S4R.
Content area
The content area can take most components including Rich Text, Images, Tables and Column Splits.
Care must be taken that on the larger breakpoints text does not run full width. Content can always be contained with a 800px max width container.
Note: See component library for full specification and responsive behaviour.
Accordion - Mini
Accordion – Maxi Follows same principles as the ‘Mini’ but has a larger font size at S4R
Changelog
1.0.1
1.0.0