Accordion

An accordion groups related content into collapsible sections, letting users expand only what they need and keeping the rest of the page tidy.

Collapsed

UOB Personal Banking offers a range of financial services including savings accounts, current accounts, credit cards, loans, and investment products designed for individual customers.

You can open an account through the UOB TMRW app, on the UOB website, or by visiting any UOB branch with your NRIC or passport and proof of address.

Our fees vary depending on the type of account and services you use. Please refer to our fee schedule on the website or visit any UOB branch for details.

Apply online via the UOB website, in the UOB TMRW app, or visit any UOB branch. You will need proof of identity, income, and address to complete your application.

Use the branch locator on the UOB website to find the nearest branch and ATM, including current opening hours.

States
What is UOB Personal Banking?
How do I open an account?
What are the fees involved?
Default Each section is collapsed; only the title row is visible. Users select the header to expand a section and reveal its content.
What is UOB Personal Banking?
How do I open an account?
What are the fees involved?
Hover On hover, the header title and chevron shift to the hover blue, signalling the row is interactive.
What is UOB Personal Banking?

UOB Personal Banking offers a range of financial services including savings accounts, current accounts, credit cards, loans, and investment products designed for individual customers.

How do I open an account?
What are the fees involved?

Our fees vary depending on the type of account and services you use. Please refer to our fee schedule on the website or visit any UOB branch for details.

Multiple expanded When the pattern allows it, more than one section can stay expanded at once. Each expanded section's title and chevron turn UOB Blue, and the chevron rotates 180° to indicate the open state.
Behaviour
Expand and collapse
  • Selecting the header expands the section and reveals its content.
  • Selecting it again collapses the section back to title only.
Multiple sections open
  • Expanding another section does not collapse the one already open — sections expand independently.
What is UOB Personal Banking?

UOB Personal Banking offers a range of financial services including savings accounts, current accounts, credit cards, loans, and investments.

How do I open an account?
What is UOB Personal Banking?

UOB Personal Banking offers a range of financial services including savings accounts, current accounts, credit cards, loans, and investments.

How do I open an account?

Open an account online via the UOB TMRW app, the UOB website, or by visiting any UOB branch.

Content area
  • When expanded, the section can hold body text, form fields, or other components.
Specs
1
Section header
  • Names the section and acts as the toggle that expands or collapses it. Includes a chevron that rotates 180° when expanded.
  • Recommended max length: 80 characters.
2
Content area
  • Holds the section's body text, form fields, or other components and is shown only when the section is expanded.
1
What is UOB Personal Banking?
2

UOB Personal Banking offers a range of financial services including savings, credit cards, loans, and investments.

How do I open an account?
What are the fees involved?
Dos and Don'ts
  1. Use short, descriptive section titles so users know what's inside before they expand a section.
  2. Group related fields or content into the same section to keep the form scannable.
  3. Avoid hiding information the user must see (e.g. errors, fees, terms) inside a collapsed section.
  4. Avoid overloading a single section — split long content across multiple sections so each one stays scannable when expanded.