Masthead account

Core UI component

Masthead account is an optional component of the masthead. It allows users to authenticate and enables an authenticated site experience.

---

Table of contents

• 1. Login CTA
• 2. My IBM CTA
• 3. Profile
  • 3.1 Profile CTA
  • 3.2 Profile dropdown

Dependencies (3)

• Profile service
• Translation
• Carbon icons

Used by (1)

• Masthead L0

Back links (1)

Masthead L0 (1)

• See Masthead account for more

Resources

• r1: Masthead L0

---

States

	name	description
0.1.0	loggedin	User has been authenticated.
0.1.1	loggedout	User is not authenticated.

The Profile service is used to determine a user's logged state.

1. Login CTA

Required CTA

The login CTA allows the user to navigate to the login page and enter their credentials.

Logic

	condition	description
1.0.0	loggedin 0.1.0	Hidden with loggedin 0.1.0 state.
1.0.1	loggedout 0.1.1	Visible with loggedout 0.1.1 state.

Events

	name	description
1.0.2	onClick	Load's the My IBM Login page.

2. My IBM CTA

Required CTA

The My IBM CTA allows users to find their My IBM account page.

Logic

	condition	description
2.0.0	loggedin 0.1.0	Visible
2.0.1	loggedout 0.1.1	Hidden
2.0.2	@sm	Hidden
2.0.3	@md @lg @xlg @max	Visible

Events

	name	description
2.0.4	onClick	Load's the My IBM page.

3. Profile

Required Dropdown

The Profile has various options to manage the user's current profile and status.

Logic

	condition	description
3.0.0	loggedin 0.1.0	Visible
3.0.1	loggedout 0.1.1	Hidden

3.1 Profile CTA

Events

	name	description
3.1.0	onClick	Reveal's a dropdown list of menu options.

3.2 Profile dropdown

Logic

	condition	description
3.2.1	@sm	Visible My IBM CTA 2
3.2.2	@md @lg @xlg @max	Hidden My IBM CTA 2

Events

	name	description
3.2.3	onBlur	Closes profile dropdown.

See Carbon icons for User icon.

See Translation for content.