Patternfly Logo

Examples

Basic

Props

LoginPage properties
NameTypeRequiredDefaultDescription
backgroundImgAltstringNo''Attribute that specifies the alt text of the background image for the LoginPage.
backgroundImgSrcstring | BackgroundImageSrcMapNo''Attribute that specifies the URL of the background image for the LoginPage
brandImgAltstringNo''Attribute that specifies the alt text of the brand image for the LoginPage.
brandImgSrcstringNo''Attribute that specifies the URL of the brand image for the LoginPage
childrenReact.ReactNodeNonullAnything that can be rendered inside of the LoginPage (e.g. <LoginPageForm>)
classNamestringNo''Additional classes added to the LoginPage.
footerListItemsReact.ReactNodeNonullItems rendered inside of the Footer List Component of the LoginPage
footerListVariantsListVariant.inlineNoAdds list variant styles for the Footer List component of the LoginPage. The only current value is'inline'
forgotCredentialsReact.ReactNodeNonullContent rendered inside of Login Main Footer Band to display a forgot credentials link*
loginSubtitlestringNoSubtitle for the Login Main Body Header of the LoginPage
loginTitlestringYesTitle for the Login Main Body Header of the LoginPage
signUpForAccountMessageReact.ReactNodeNonullContent rendered inside of Login Main Footer Band to display a sign up for account message
socialMediaLoginContentReact.ReactNodeNonullContent rendered inside of Social Media Login footer section .
textContentstringNo''Content rendered inside of the Text Component of the LoginPage
Login properties
NameTypeRequiredDefaultDescription
childrenReact.ReactNodeNonullContent rendered inside the main section of the login layout
classNamestringNo''Additional classes added to the login layout
footerReact.ReactNodeNonullFooter component (e.g. <LoginFooter />)
headerReact.ReactNodeNonullHeader component (e.g. <LoginHeader />)
LoginForm properties
NameTypeRequiredDefaultDescription
classNamestringNo''Additional classes added to the Login Main Body's Form
helperTextReact.ReactNodeNonullContent displayed in the Helper Text component *
helperTextIconReact.ReactNodeNonullIcon displayed to the left in the Helper Text
isLoginButtonDisabledbooleanNofalseFlag indicating if the Login Button is disabled
isRememberMeCheckedbooleanNofalseFlag indicating if the remember me Checkbox is checked.
isValidPasswordbooleanNotrueFlag indicating if the Password is valid
isValidUsernamebooleanNotrueFlag indicating if the Username is valid
loginButtonLabelstringNo'Log In'Label for the Log in Button Input
noAutoFocusbooleanNofalseFlag to indicate if the first dropdown item should not gain initial focus
onChangePassword(value: string, event: React.FormEvent<HTMLInputElement>) => voidNo() => undefined as anyFunction that handles the onChange event for the Password
onChangeRememberMe(checked: boolean, event: React.FormEvent<HTMLInputElement>) => voidNo() => undefined as anyFunction that handles the onChange event for the Remember Me Checkbox
onChangeUsername(value: string, event: React.FormEvent<HTMLInputElement>) => voidNo() => undefined as anyFunction that handles the onChange event for the Username
onLoginButtonClick(event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => voidNo() => undefined as anyFunction that is called when the Login button is clicked
passwordLabelstringNo'Password'Label for the Password Input Field
passwordValuestringNo''Value for the Password
rememberMeLabelstringNo''Label for the Remember Me Checkbox that indicates the user should be kept logged in. If the label is not provided, the checkbox will not show.
showHelperTextbooleanNofalseFlag indicating the Helper Text is visible *
usernameLabelstringNo'Username'Label for the Username Input Field
usernameValuestringNo''Value for the Username
LoginMainBody properties
NameTypeRequiredDefaultDescription
childrenReact.ReactNodeNonullContent rendered inside the Login Main Body
classNamestringNo''Additional classes added to the Login Main Body
LoginMainHeader properties
NameTypeRequiredDefaultDescription
childrenReact.ReactNodeNonullContent rendered inside the Login Main Header
classNamestringNo''Additional classes added to the Login Main Header
subtitlestringNo''Subtitle that contains the Text, URL, and URL Text for the Login Main Header
titlestringNo''Title for the Login Main Header
LoginHeader properties
NameTypeRequiredDefaultDescription
childrenReact.ReactNodeNonullContent rendered inside the header of the login layout
classNamestringNo''Additional classes added to the login header
headerBrandReact.ReactNodeNonullHeader Brand component (e.g. <LoginHeader />)
LoginFooter properties
NameTypeRequiredDefaultDescription
childrenReact.ReactNodeNonullContent rendered inside the footer of the login layout
classNamestringNo''Additional props are spread to the container <footer>
LoginMainFooter properties
NameTypeRequiredDefaultDescription
childrenReact.ReactNodeNonullContent rendered inside the Login Main Footer
classNamestringNo''Additional classes added to the Login Main Footer
forgotCredentialsReact.ReactNodeNonullContent rendered inside of Login Main Footer Band do display a forgot credentials link*
signUpForAccountMessageReact.ReactNodeNonullContent rendered inside of Login Main Footer Band to display a sign up for account message
socialMediaLoginContentReact.ReactNodeNonullContent rendered inside the Login Main Footer as Social Media Links*
LoginFooterItem properties
NameTypeRequiredDefaultDescription
childrenReact.ReactNodeNonullContent rendered inside the footer Link Item
classNamestringNo''Additional classes added to the Footer Link Item
hrefstringNo'#'The URL of the Footer Link Item
targetstringNo'_blank'Specifies where to open the linked document
LoginMainFooterBandItem properties
NameTypeRequiredDefaultDescription
childrenReact.ReactNodeNonullContent rendered inside the footer Link Item
classNamestringNo''Additional classes added to the Footer Link Item
LoginMainFooterLinksItem properties
NameTypeRequiredDefaultDescription
childrenReact.ReactNodeNonullContent rendered inside the footer Link Item
classNamestringNo''Additional classes added to the Footer Link Item
hrefstringNo''HREF for Footer Link Item
linkComponentReact.ReactNodeNo'a'Component used to render the Footer Link Item
linkComponentPropsanyNoProps for the LinkComponent
targetstringNo''Target for Footer Link Item

CSS variables

.pf-c-login__header--pf-global--Color--100
#fff
.pf-c-login__header--pf-global--Color--200
#f0f0f0
.pf-c-login__header--pf-global--BorderColor--100
#b8bbbe
.pf-c-login__header--pf-global--primary-color--100
#73bcf7
.pf-c-login__header--pf-global--link--Color
#73bcf7
.pf-c-login__header--pf-global--link--Color--hover
#73bcf7
.pf-c-login__header--pf-global--BackgroundColor--100
#151515
.pf-c-login__header .pf-c-card--pf-c-card--BackgroundColor
rgba(#030303, .32)
.pf-c-login__header .pf-c-button--pf-c-button--m-primary--Color
#06c
.pf-c-login__header .pf-c-button--pf-c-button--m-primary--hover--Color
#06c
.pf-c-login__header .pf-c-button--pf-c-button--m-primary--focus--Color
#06c
.pf-c-login__header .pf-c-button--pf-c-button--m-primary--active--Color
#06c
.pf-c-login__header .pf-c-button--pf-c-button--m-primary--BackgroundColor
#fff
.pf-c-login__header .pf-c-button--pf-c-button--m-primary--hover--BackgroundColor
#f0f0f0
.pf-c-login__header .pf-c-button--pf-c-button--m-primary--focus--BackgroundColor
#f0f0f0
.pf-c-login__header .pf-c-button--pf-c-button--m-primary--active--BackgroundColor
#f0f0f0
.pf-c-login__header .pf-c-button--pf-c-button--m-secondary--Color
#fff
.pf-c-login__header .pf-c-button--pf-c-button--m-secondary--hover--Color
#fff
.pf-c-login__header .pf-c-button--pf-c-button--m-secondary--focus--Color
#fff
.pf-c-login__header .pf-c-button--pf-c-button--m-secondary--active--Color
#fff
.pf-c-login__header .pf-c-button--pf-c-button--m-secondary--BorderColor
#fff
.pf-c-login__header .pf-c-button--pf-c-button--m-secondary--hover--BorderColor
#fff
.pf-c-login__header .pf-c-button--pf-c-button--m-secondary--focus--BorderColor
#fff
.pf-c-login__header .pf-c-button--pf-c-button--m-secondary--active--BorderColor
#fff
.pf-c-login--pf-c-login--PaddingTop
1.5rem
.pf-c-login--pf-c-login--PaddingBottom
1.5rem
.pf-c-login--pf-c-login--xl--BackgroundImage
none
.pf-c-login--pf-c-login__container--xl--GridColumnGap
4rem
.pf-c-login--pf-c-login__container--MaxWidth
31.25rem
.pf-c-login--pf-c-login__container--xl--MaxWidth
none
.pf-c-login--pf-c-login__container--PaddingLeft
6.125rem
.pf-c-login--pf-c-login__container--PaddingRight
6.125rem
.pf-c-login--pf-c-login__container--xl--GridTemplateColumns
34rem minmax(auto, 34rem)
.pf-c-login--pf-c-login__header--MarginBottom
1rem
.pf-c-login--pf-c-login__header--PaddingLeft
1rem
.pf-c-login--pf-c-login__header--PaddingRight
1rem
.pf-c-login--pf-c-login__header--xl--MarginBottom
3rem
.pf-c-login--pf-c-login__header--xl--MarginTop
4rem
.pf-c-login--pf-c-login__header--c-brand--MarginBottom
1.5rem
.pf-c-login--pf-c-login__header--c-brand--xl--MarginBottom
3rem
.pf-c-login--pf-c-login__main--BackgroundColor
#fff
.pf-c-login--pf-c-login__main--MarginBottom
1.5rem
.pf-c-login--pf-c-login__main-header--PaddingTop
3rem
.pf-c-login--pf-c-login__main-header--PaddingRight
2rem
.pf-c-login--pf-c-login__main-header--PaddingBottom
1rem
.pf-c-login--pf-c-login__main-header--PaddingLeft
2rem
.pf-c-login--pf-c-login__main-header--md--PaddingRight
3rem
.pf-c-login--pf-c-login__main-header--md--PaddingLeft
3rem
.pf-c-login--pf-c-login__main-header--ColumnGap
1rem
.pf-c-login--pf-c-login__main-header--RowGap
1rem
.pf-c-login--pf-c-login__main-header-desc--MarginBottom
0.5rem
.pf-c-login--pf-c-login__main-header-desc--md--MarginBottom
0
.pf-c-login--pf-c-login__main-header-desc--FontSize
0.875rem
.pf-c-login--pf-c-login__main-body--PaddingRight
2rem
.pf-c-login--pf-c-login__main-body--PaddingBottom
2rem
.pf-c-login--pf-c-login__main-body--PaddingLeft
2rem
.pf-c-login--pf-c-login__main-body--md--PaddingRight
3rem
.pf-c-login--pf-c-login__main-body--md--PaddingLeft
3rem
.pf-c-login--pf-c-login__main-footer--PaddingBottom
4rem
.pf-c-login--pf-c-login__main-footer--c-title--MarginBottom
1rem
.pf-c-login--pf-c-login__main-footer-links--PaddingTop
0.5rem
.pf-c-login--pf-c-login__main-footer-links--PaddingRight
4rem
.pf-c-login--pf-c-login__main-footer-links--PaddingBottom
2rem
.pf-c-login--pf-c-login__main-footer-links--PaddingLeft
4rem
.pf-c-login--pf-c-login__main-footer-links-item--PaddingRight
1rem
.pf-c-login--pf-c-login__main-footer-links-item--PaddingLeft
1rem
.pf-c-login--pf-c-login__main-footer-links-item--MarginBottom
0.5rem
.pf-c-login--pf-c-login__main-footer-links-item-link-svg--Fill
#6a6e73
.pf-c-login--pf-c-login__main-footer-links-item-link-svg--Width
1.5rem
.pf-c-login--pf-c-login__main-footer-links-item-link-svg--Height
1.5rem
.pf-c-login--pf-c-login__main-footer-links-item-link-svg--hover--Fill
#151515
.pf-c-login--pf-c-login__main-footer-band--PaddingTop
1.5rem
.pf-c-login--pf-c-login__main-footer-band--PaddingRight
1rem
.pf-c-login--pf-c-login__main-footer-band--PaddingBottom
1.5rem
.pf-c-login--pf-c-login__main-footer-band--PaddingLeft
1rem
.pf-c-login--pf-c-login__main-footer-band--BackgroundColor
#f0f0f0
.pf-c-login--pf-c-login__main-footer-band-item--PaddingTop
1rem
.pf-c-login--pf-c-login__footer--PaddingLeft
1rem
.pf-c-login--pf-c-login__footer--PaddingRight
1rem
.pf-c-login--pf-c-login__footer--c-list--PaddingTop
1rem
.pf-c-login--pf-c-login__footer--c-list--xl--PaddingTop
3rem

View source on GitHub