Login page

A login page allows a user to access an application by entering a username and password, or by authenticating using a social media login.

CSS variables

Expand or collapse column	Selector	Variable	Value
	.pf-v6-c-login	--pf-v6-c-login--PaddingBlockStart	1.5rem
--pf-v6-c-login--PaddingBlockStart --pf-t--global--spacer--lg --pf-t--global--spacer--400 1.5rem
	.pf-v6-c-login	--pf-v6-c-login--PaddingBlockEnd	1.5rem
--pf-v6-c-login--PaddingBlockEnd --pf-t--global--spacer--lg --pf-t--global--spacer--400 1.5rem
	.pf-v6-c-login	--pf-v6-c-login__container--xl--GridColumnGap	4rem
--pf-v6-c-login__container--xl--GridColumnGap --pf-t--global--spacer--3xl --pf-t--global--spacer--700 4rem
	.pf-v6-c-login	--pf-v6-c-login__container--MaxWidth	31.25rem
	.pf-v6-c-login	--pf-v6-c-login__container--xl--MaxWidth	none
	.pf-v6-c-login	--pf-v6-c-login__container--PaddingInlineStart	6.125rem
	.pf-v6-c-login	--pf-v6-c-login__container--PaddingInlineEnd	6.125rem
	.pf-v6-c-login	--pf-v6-c-login__container--xl--GridTemplateColumns	34rem minmax(auto, 34rem)
	.pf-v6-c-login	--pf-v6-c-login__header--MarginBlockEnd	1rem
--pf-v6-c-login__header--MarginBlockEnd --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-login	--pf-v6-c-login__header--PaddingInlineStart	1rem
--pf-v6-c-login__header--PaddingInlineStart --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-login	--pf-v6-c-login__header--PaddingInlineEnd	1rem
--pf-v6-c-login__header--PaddingInlineEnd --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-login	--pf-v6-c-login__header--xl--MarginBlockEnd	3rem
--pf-v6-c-login__header--xl--MarginBlockEnd --pf-t--global--spacer--2xl --pf-t--global--spacer--600 3rem
	.pf-v6-c-login	--pf-v6-c-login__header--xl--MarginBlockStart	4rem
--pf-v6-c-login__header--xl--MarginBlockStart --pf-t--global--spacer--3xl --pf-t--global--spacer--700 4rem
	.pf-v6-c-login	--pf-v6-c-login__header--c-brand--MarginBlockEnd	1.5rem
--pf-v6-c-login__header--c-brand--MarginBlockEnd --pf-t--global--spacer--lg --pf-t--global--spacer--400 1.5rem
	.pf-v6-c-login	--pf-v6-c-login__header--c-brand--xl--MarginBlockEnd	3rem
--pf-v6-c-login__header--c-brand--xl--MarginBlockEnd --pf-t--global--spacer--2xl --pf-t--global--spacer--600 3rem
	.pf-v6-c-login	--pf-v6-c-login__main--BackgroundColor	initial, #ffffff
--pf-v6-c-login__main--BackgroundColor var(--pf-t--global--background--color--glass--primary--default, --pf-t--global--background--color--primary--default) initial, --pf-t--global--background--color--primary--default initial, --pf-t--global--background--color--100 initial, --pf-t--color--white initial, #ffffff
	.pf-v6-c-login	--pf-v6-c-login__main--BackdropFilter	initial
--pf-v6-c-login__main--BackdropFilter --pf-t--global--background--filter--glass--blur--primary initial
	.pf-v6-c-login	--pf-v6-c-login__main--MarginBlockEnd	1.5rem
--pf-v6-c-login__main--MarginBlockEnd --pf-t--global--spacer--lg --pf-t--global--spacer--400 1.5rem
	.pf-v6-c-login	--pf-v6-c-login__main--BorderRadius	24px
--pf-v6-c-login__main--BorderRadius --pf-t--global--border--radius--large --pf-t--global--border--radius--400 24px
	.pf-v6-c-login	--pf-v6-c-login__main--BorderWidth	initial, 0px
--pf-v6-c-login__main--BorderWidth var(--pf-t--global--border--width--glass--default, --pf-t--global--border--width--high-contrast--regular) initial, --pf-t--global--border--width--high-contrast--regular initial, 0px
	.pf-v6-c-login	--pf-v6-c-login__main--BorderColor	initial, rgb(255, 255, 255, 0.0000)
--pf-v6-c-login__main--BorderColor var(--pf-t--global--border--color--glass--default, --pf-t--global--border--color--high-contrast) initial, --pf-t--global--border--color--high-contrast initial, rgb(255, 255, 255, 0.0000)
	.pf-v6-c-login	--pf-v6-c-login__main--BoxShadow	0px 4px 10px 0px rgb(41, 41, 41, 0.1500)
--pf-v6-c-login__main--BoxShadow --pf-t--global--box-shadow--glass--default --pf-t--global--box-shadow--md --pf-t--global--box-shadow--X--md--default --pf-t--global--box-shadow--Y--md--default --pf-t--global--box-shadow--blur--md --pf-t--global--box-shadow--spread--md--default --pf-t--global--box-shadow--color--md--default --pf-t--global--box-shadow--X--400 --pf-t--global--box-shadow--Y--600 --pf-t--global--box-shadow--blur--200 --pf-t--global--box-shadow--spread--100 --pf-t--global--box-shadow--color--100 0px 4px 10px 0px rgb(41, 41, 41, 0.1500)
	.pf-v6-c-login	--pf-v6-c-login__main-header--PaddingBlockStart	3rem
--pf-v6-c-login__main-header--PaddingBlockStart --pf-t--global--spacer--2xl --pf-t--global--spacer--600 3rem
	.pf-v6-c-login	--pf-v6-c-login__main-header--PaddingInlineEnd	2rem
--pf-v6-c-login__main-header--PaddingInlineEnd --pf-t--global--spacer--xl --pf-t--global--spacer--500 2rem
	.pf-v6-c-login	--pf-v6-c-login__main-header--PaddingBlockEnd	1rem
--pf-v6-c-login__main-header--PaddingBlockEnd --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-login	--pf-v6-c-login__main-header--PaddingInlineStart	2rem
--pf-v6-c-login__main-header--PaddingInlineStart --pf-t--global--spacer--xl --pf-t--global--spacer--500 2rem
	.pf-v6-c-login	--pf-v6-c-login__main-header--md--PaddingInlineEnd	3rem
--pf-v6-c-login__main-header--md--PaddingInlineEnd --pf-t--global--spacer--2xl --pf-t--global--spacer--600 3rem
	.pf-v6-c-login	--pf-v6-c-login__main-header--md--PaddingInlineStart	3rem
--pf-v6-c-login__main-header--md--PaddingInlineStart --pf-t--global--spacer--2xl --pf-t--global--spacer--600 3rem
	.pf-v6-c-login	--pf-v6-c-login__main-header--ColumnGap	1rem
--pf-v6-c-login__main-header--ColumnGap --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-login	--pf-v6-c-login__main-header--RowGap	1rem
--pf-v6-c-login__main-header--RowGap --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-login	--pf-v6-c-login__main-header-desc--MarginBlockEnd	0.5rem
--pf-v6-c-login__main-header-desc--MarginBlockEnd --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-login	--pf-v6-c-login__main-header-desc--md--MarginBlockEnd	0
	.pf-v6-c-login	--pf-v6-c-login__main-header-desc--FontSize	0.875rem
--pf-v6-c-login__main-header-desc--FontSize --pf-t--global--font--size--body--default --pf-t--global--font--size--sm --pf-t--global--font--size--200 0.875rem
	.pf-v6-c-login	--pf-v6-c-login__main-body--PaddingInlineEnd	2rem
--pf-v6-c-login__main-body--PaddingInlineEnd --pf-t--global--spacer--xl --pf-t--global--spacer--500 2rem
	.pf-v6-c-login	--pf-v6-c-login__main-body--PaddingBlockEnd	2rem
--pf-v6-c-login__main-body--PaddingBlockEnd --pf-t--global--spacer--xl --pf-t--global--spacer--500 2rem
	.pf-v6-c-login	--pf-v6-c-login__main-body--PaddingInlineStart	2rem
--pf-v6-c-login__main-body--PaddingInlineStart --pf-t--global--spacer--xl --pf-t--global--spacer--500 2rem
	.pf-v6-c-login	--pf-v6-c-login__main-body--md--PaddingInlineEnd	3rem
--pf-v6-c-login__main-body--md--PaddingInlineEnd --pf-t--global--spacer--2xl --pf-t--global--spacer--600 3rem
	.pf-v6-c-login	--pf-v6-c-login__main-body--md--PaddingInlineStart	3rem
--pf-v6-c-login__main-body--md--PaddingInlineStart --pf-t--global--spacer--2xl --pf-t--global--spacer--600 3rem
	.pf-v6-c-login	--pf-v6-c-login__main-footer--PaddingBlockEnd	4rem
--pf-v6-c-login__main-footer--PaddingBlockEnd --pf-t--global--spacer--3xl --pf-t--global--spacer--700 4rem
	.pf-v6-c-login	--pf-v6-c-login__main-footer--c-title--MarginBlockEnd	1rem
--pf-v6-c-login__main-footer--c-title--MarginBlockEnd --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-login	--pf-v6-c-login__main-footer-links--PaddingBlockStart	0.5rem
--pf-v6-c-login__main-footer-links--PaddingBlockStart --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-login	--pf-v6-c-login__main-footer-links--PaddingInlineEnd	4rem
--pf-v6-c-login__main-footer-links--PaddingInlineEnd --pf-t--global--spacer--3xl --pf-t--global--spacer--700 4rem
	.pf-v6-c-login	--pf-v6-c-login__main-footer-links--PaddingBlockEnd	2rem
--pf-v6-c-login__main-footer-links--PaddingBlockEnd --pf-t--global--spacer--xl --pf-t--global--spacer--500 2rem
	.pf-v6-c-login	--pf-v6-c-login__main-footer-links--PaddingInlineStart	4rem
--pf-v6-c-login__main-footer-links--PaddingInlineStart --pf-t--global--spacer--3xl --pf-t--global--spacer--700 4rem
	.pf-v6-c-login	--pf-v6-c-login__main-footer-links--Gap	1rem
--pf-v6-c-login__main-footer-links--Gap --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-login	--pf-v6-c-login__main-footer-links-item--c-button--FontSize	1.5rem
--pf-v6-c-login__main-footer-links-item--c-button--FontSize --pf-t--global--icon--size--xl --pf-t--global--icon--size--300 1.5rem
	.pf-v6-c-login	--pf-v6-c-login__main-footer-band--PaddingBlockStart	1.5rem
--pf-v6-c-login__main-footer-band--PaddingBlockStart --pf-t--global--spacer--lg --pf-t--global--spacer--400 1.5rem
	.pf-v6-c-login	--pf-v6-c-login__main-footer-band--PaddingInlineEnd	1rem
--pf-v6-c-login__main-footer-band--PaddingInlineEnd --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-login	--pf-v6-c-login__main-footer-band--PaddingBlockEnd	1.5rem
--pf-v6-c-login__main-footer-band--PaddingBlockEnd --pf-t--global--spacer--lg --pf-t--global--spacer--400 1.5rem
	.pf-v6-c-login	--pf-v6-c-login__main-footer-band--PaddingInlineStart	1rem
--pf-v6-c-login__main-footer-band--PaddingInlineStart --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-login	--pf-v6-c-login__main-footer-band--BorderBlockStartColor	(In light theme) #e0e0e0
--pf-v6-c-login__main-footer-band--BorderBlockStartColor --pf-t--global--border--color--default --pf-t--global--border--color--50 --pf-t--color--gray--20 #e0e0e0
	.pf-v6-c-login	--pf-v6-c-login__main-footer-band--BorderBlockStartWidth	1px
--pf-v6-c-login__main-footer-band--BorderBlockStartWidth --pf-t--global--border--width--divider--default --pf-t--global--border--width--100 1px
	.pf-v6-c-login	--pf-v6-c-login__main-footer-band-item--PaddingBlockStart	1rem
--pf-v6-c-login__main-footer-band-item--PaddingBlockStart --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-login	--pf-v6-c-login__footer--PaddingInlineStart	1rem
--pf-v6-c-login__footer--PaddingInlineStart --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-login	--pf-v6-c-login__footer--PaddingInlineEnd	1rem
--pf-v6-c-login__footer--PaddingInlineEnd --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-login	--pf-v6-c-login__footer--c-list--PaddingBlockStart	1rem
--pf-v6-c-login__footer--c-list--PaddingBlockStart --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-login	--pf-v6-c-login__footer--c-list--xl--PaddingBlockStart	3rem
--pf-v6-c-login__footer--c-list--xl--PaddingBlockStart --pf-t--global--spacer--2xl --pf-t--global--spacer--600 3rem
	.pf-v6-c-login__main-footer-links-item .pf-v6-c-button	--pf-v6-c-button--FontSize	1.5rem
--pf-v6-c-button--FontSize --pf-v6-c-login__main-footer-links-item--c-button--FontSize --pf-t--global--icon--size--xl --pf-t--global--icon--size--300 1.5rem