React

Login page

The login page allows a user to gain access to an application by entering their username and password or by authenticating using a social media login. Related design guideline: Login

ExamplesPropsCSS Variables

Examples

Simple login page

Popout Example
Copied to clipboard

Props

Login Props

The Login component accepts the following props.

NameTypeRequiredDefaultDescription
childrennodenullContent rendered inside the main section of the login layout
classNamestring''Additional classes added to the login layout
footernodenullFooter component (e.g. <LoginFooter />)
headernodenullHeader component (e.g. <LoginHeader />)
anyAdditional props are spread to the container <div>

LoginPage Props

The LoginPage component accepts the following props.

NameTypeRequiredDefaultDescription
childrennodenullAnything that can be rendered inside of the LoginPage (e.g. <LoginPageForm>)
classNamestring''Additional classes added to the LoginPage.
brandImgSrcstring''Attribute that specifies the URL of the brand image for the LoginPage
brandImgAltstring''Attribute that specifies the alt text of the brand image for the LoginPage.
backgroundImgSrcunion''Attribute that specifies the URL of the background image for the LoginPage
backgroundImgAltstring''Attribute that specifies the alt text of the background image for the LoginPage.
textContentstring''Content rendered inside of the Text Component of the LoginPage
footerListItemsnodenullItems rendered inside of the Footer List Component of the LoginPage
footerListVariantsenumnullAdds list variant styles for the Footer List component of the LoginPage. Values are 'grid' or 'inline'
loginTitlestringTitle for the Login Main Body Header of the LoginPage
loginSubtitlestringSubtitle for the Login Main Body Header of the LoginPage
signUpForAccountMessagenodenullContent rendered inside of Login Main Footer Band to display a sign up for account message
forgotCredentialsnodenullContent rendered inside of Login Main Footer Band do display a forgot credentials link*
socialMediaLoginContentnodenullContent rendered inside of Social Media Login footer section .
anyAdditional props are spread to the Login component

CSS Variables

--pf-c-login--PaddingBottomc_login_PaddingBottom1.5rem
--pf-c-login--PaddingTopc_login_PaddingTop1.5rem
--pf-c-login__container--MaxWidthc_login__container_MaxWidth31.25rem
--pf-c-login__container--PaddingLeftc_login__container_PaddingLeft6.125rem
--pf-c-login__container--PaddingRightc_login__container_PaddingRight6.125rem
--pf-c-login__container--xl--GridColumnGapc_login__container_xl_GridColumnGap4rem
--pf-c-login__container--xl--GridTemplateColumnsc_login__container_xl_GridTemplateColumns34rem minmax(auto,34rem)
--pf-c-login__container--xl--MaxWidthc_login__container_xl_MaxWidthnone
--pf-c-login__footer--c-list--PaddingTopc_login__footer_c_list_PaddingTop1rem
--pf-c-login__footer--c-list--xl--PaddingTopc_login__footer_c_list_xl_PaddingTop3rem
--pf-c-login__footer--sm--PaddingLeftc_login__footer_sm_PaddingLeft1rem
--pf-c-login__footer--sm--PaddingRightc_login__footer_sm_PaddingRight1rem
--pf-c-login__header--MarginBottomc_login__header_MarginBottom1rem
--pf-c-login__header--c-brand--MarginBottomc_login__header_c_brand_MarginBottom1.5rem
--pf-c-login__header--c-brand--xl--MarginBottomc_login__header_c_brand_xl_MarginBottom3rem
--pf-c-login__header--sm--PaddingLeftc_login__header_sm_PaddingLeft1rem
--pf-c-login__header--sm--PaddingRightc_login__header_sm_PaddingRight1rem
--pf-c-login__header--xl--MarginBottomc_login__header_xl_MarginBottom3rem
--pf-c-login__header--xl--MarginTopc_login__header_xl_MarginTop4rem
--pf-c-login__main--BackgroundColorc_login__main_BackgroundColor#fff
--pf-c-login__main-body--PaddingBottomc_login__main_body_PaddingBottom2rem
--pf-c-login__main-body--PaddingLeftc_login__main_body_PaddingLeft2rem
--pf-c-login__main-body--PaddingRightc_login__main_body_PaddingRight2rem
--pf-c-login__main-body--c-form__helper-text-icon--FontSizec_login__main_body_c_form__helper_text_icon_FontSize1.125rem
--pf-c-login__main-body--c-form__helper-text-icon--MarginRightc_login__main_body_c_form__helper_text_icon_MarginRight0.5rem
--pf-c-login__main-body--md--PaddingLeftc_login__main_body_md_PaddingLeft3rem
--pf-c-login__main-body--md--PaddingRightc_login__main_body_md_PaddingRight3rem
--pf-c-login__main-footer--PaddingBottomc_login__main_footer_PaddingBottom4rem
--pf-c-login__main-footer-band--BackgroundColorc_login__main_footer_band_BackgroundColor#ededed
--pf-c-login__main-footer-band--PaddingBottomc_login__main_footer_band_PaddingBottom1.5rem
--pf-c-login__main-footer-band--PaddingLeftc_login__main_footer_band_PaddingLeft1rem
--pf-c-login__main-footer-band--PaddingRightc_login__main_footer_band_PaddingRight1rem
--pf-c-login__main-footer-band--PaddingTopc_login__main_footer_band_PaddingTop1.5rem
--pf-c-login__main-footer-band-item--PaddingTopc_login__main_footer_band_item_PaddingTop1rem
--pf-c-login__main-footer--c-title--MarginBottomc_login__main_footer_c_title_MarginBottom1rem
--pf-c-login__main-footer-links--MarginBottomc_login__main_footer_links_MarginBottomcalc(calc(calc(calc(var(--pf-c-login__main-footer-links--MarginBottom) * -1) * -1) * -1) * -1)
--pf-c-login__main-footer-links--PaddingBottomc_login__main_footer_links_PaddingBottom2rem
--pf-c-login__main-footer-links--PaddingLeftc_login__main_footer_links_PaddingLeft4rem
--pf-c-login__main-footer-links--PaddingRightc_login__main_footer_links_PaddingRight4rem
--pf-c-login__main-footer-links--PaddingTopc_login__main_footer_links_PaddingTop0.5rem
--pf-c-login__main-footer-links-item--MarginBottomc_login__main_footer_links_item_MarginBottom0.5rem
--pf-c-login__main-footer-links-item--PaddingLeftc_login__main_footer_links_item_PaddingLeft1rem
--pf-c-login__main-footer-links-item--PaddingRightc_login__main_footer_links_item_PaddingRight1rem
--pf-c-login__main-footer-links-item-link-svg--Fillc_login__main_footer_links_item_link_svg_Fill#72767b
--pf-c-login__main-footer-links-item-link-svg--Heightc_login__main_footer_links_item_link_svg_Height1.5rem
--pf-c-login__main-footer-links-item-link-svg--Widthc_login__main_footer_links_item_link_svg_Width1.5rem
--pf-c-login__main-footer-links-item-link-svg--hover--Fillc_login__main_footer_links_item_link_svg_hover_Fill#151515
--pf-c-login__main-header--ColumnGapc_login__main_header_ColumnGap1rem
--pf-c-login__main-header--PaddingBottomc_login__main_header_PaddingBottom1rem
--pf-c-login__main-header--PaddingLeftc_login__main_header_PaddingLeft2rem
--pf-c-login__main-header--PaddingRightc_login__main_header_PaddingRight2rem
--pf-c-login__main-header--PaddingTopc_login__main_header_PaddingTop3rem
--pf-c-login__main-header--RowGapc_login__main_header_RowGap1rem
--pf-c-login__main-header-desc--FontSizec_login__main_header_desc_FontSize0.875rem
--pf-c-login__main-header-desc--MarginBottomc_login__main_header_desc_MarginBottom0.5rem
--pf-c-login__main-header-desc--md--MarginBottomc_login__main_header_desc_md_MarginBottom0
--pf-c-login__main-header--md--PaddingLeftc_login__main_header_md_PaddingLeft3rem
--pf-c-login__main-header--md--PaddingRightc_login__main_header_md_PaddingRight3rem
--pf-c-login__main--xl--MarginBottomc_login__main_xl_MarginBottom1.5rem
--pf-c-login--xl--BackgroundImagec_login_xl_BackgroundImagelinear-gradient(90deg,rgba(3,3,3,.32),rgba(3,3,3,.32) calc((98px - 4rem) + 4rem + 272px),transparent calc((98px - 4rem) + 4rem + 272px))