Skip to Content
Patternfly Logo

Login

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

ExamplesDocumentationCSS Variables

Examples

Documentation

Usage

ClassApplied toOutcome
.pf-c-login<div>Initializes the login component. Required
.pf-c-login__container<div>Positions the login component content. Required
.pf-c-login__header<header>Positions the login header. Required
.pf-c-login__header .pf-c-brand<img>Creates a brand image inside of login header. Required
.pf-c-login__main<main>Positions the login main area. Required
.pf-c-login__main-header<header>Creates the header of the main area. Required
.pf-c-login__main-header .pf-c-title<h1>,<h2>,<h3>,<h4>,<h5>,<h6>Creates a title in the main header area. Required
.pf-c-login__main-header-desc<p>Creates the description in the main area header.
.pf-c-login__main-header .pf-c-dropdown<div>Creates a language selector dropdown in the main header area.
.pf-c-login__main-body<div>Creates the body of the main area. Required
.pf-c-login__main-body .pf-c-form<form>Creates the login form in the main body area. Required
.pf-c-login__main-body .pf-c-form .pf-c-form-helper-text.pf-m-error<form>Creates the error messages shown when the form has errors. When not active, apply .pf-m-hidden. Required
.pf-c-login__main-footer<footer>Creates the footer of the main area. Required
.pf-c-login__main-footer-links<ul>Creates a list of links in the main footer. Required
.pf-c-login__main-footer-links-item<li>Creates proper spacing for links in the main footer. Required
.pf-c-login__main-footer-links-item-link<a>Creates link in links list in footer. Required
.pf-c-login__main-footer-band<div>Styles a band in the footer.
.pf-c-login__main-footer-band-item<p>Adds information to the band in the footer.
.pf-c-login__footer<footer>Positions the login footer. Required
.pf-c-login__footer .pf-c-list<ul>Creates a list of links in the login footer. Required

CSS Variables

.pf-c-login__header--pf-global--Color--100global_Color_100
#fff
.pf-c-login__header--pf-global--Color--200global_Color_200
#f0f0f0
.pf-c-login__header--pf-global--BorderColor--100global_BorderColor_100
#b8bbbe
.pf-c-login__header--pf-global--primary-color--100global_primary_color_100
#73bcf7
.pf-c-login__header--pf-global--link--Colorglobal_link_Color
#73bcf7
.pf-c-login__header--pf-global--link--Color--hoverglobal_link_Color_hover
#73bcf7
.pf-c-login__header--pf-global--BackgroundColor--100global_BackgroundColor_100
#151515
.pf-c-login__header .pf-c-card--pf-c-card--BackgroundColorc_card_BackgroundColor
rgba(#030303, .32)
.pf-c-login__header .pf-c-button--pf-c-button--m-primary--Colorc_button_m_primary_Color
#06c
.pf-c-login__header .pf-c-button--pf-c-button--m-primary--hover--Colorc_button_m_primary_hover_Color
#06c
.pf-c-login__header .pf-c-button--pf-c-button--m-primary--focus--Colorc_button_m_primary_focus_Color
#06c
.pf-c-login__header .pf-c-button--pf-c-button--m-primary--active--Colorc_button_m_primary_active_Color
#06c
.pf-c-login__header .pf-c-button--pf-c-button--m-primary--BackgroundColorc_button_m_primary_BackgroundColor
#fff
.pf-c-login__header .pf-c-button--pf-c-button--m-primary--hover--BackgroundColorc_button_m_primary_hover_BackgroundColor
#f0f0f0
.pf-c-login__header .pf-c-button--pf-c-button--m-primary--focus--BackgroundColorc_button_m_primary_focus_BackgroundColor
#f0f0f0
.pf-c-login__header .pf-c-button--pf-c-button--m-primary--active--BackgroundColorc_button_m_primary_active_BackgroundColor
#f0f0f0
.pf-c-login__header .pf-c-button--pf-c-button--m-secondary--Colorc_button_m_secondary_Color
#fff
.pf-c-login__header .pf-c-button--pf-c-button--m-secondary--hover--Colorc_button_m_secondary_hover_Color
#fff
.pf-c-login__header .pf-c-button--pf-c-button--m-secondary--focus--Colorc_button_m_secondary_focus_Color
#fff
.pf-c-login__header .pf-c-button--pf-c-button--m-secondary--active--Colorc_button_m_secondary_active_Color
#fff
.pf-c-login__header .pf-c-button--pf-c-button--m-secondary--BorderColorc_button_m_secondary_BorderColor
#fff
.pf-c-login__header .pf-c-button--pf-c-button--m-secondary--hover--BorderColorc_button_m_secondary_hover_BorderColor
#fff
.pf-c-login__header .pf-c-button--pf-c-button--m-secondary--focus--BorderColorc_button_m_secondary_focus_BorderColor
#fff
.pf-c-login__header .pf-c-button--pf-c-button--m-secondary--active--BorderColorc_button_m_secondary_active_BorderColor
#fff
.pf-c-login--pf-c-login--PaddingTopc_login_PaddingTop
1.5rem
.pf-c-login--pf-c-login--PaddingBottomc_login_PaddingBottom
1.5rem
.pf-c-login--pf-c-login--xl--BackgroundImagec_login_xl_BackgroundImage
none
.pf-c-login--pf-c-login__container--xl--GridColumnGapc_login__container_xl_GridColumnGap
4rem
.pf-c-login--pf-c-login__container--MaxWidthc_login__container_MaxWidth
31.25rem
.pf-c-login--pf-c-login__container--xl--MaxWidthc_login__container_xl_MaxWidth
none
.pf-c-login--pf-c-login__container--PaddingLeftc_login__container_PaddingLeft
6.125rem
.pf-c-login--pf-c-login__container--PaddingRightc_login__container_PaddingRight
6.125rem
.pf-c-login--pf-c-login__container--xl--GridTemplateColumnsc_login__container_xl_GridTemplateColumns
34rem minmax(auto, 34rem)
.pf-c-login--pf-c-login__header--MarginBottomc_login__header_MarginBottom
1rem
.pf-c-login--pf-c-login__header--PaddingLeftc_login__header_PaddingLeft
1rem
.pf-c-login--pf-c-login__header--PaddingRightc_login__header_PaddingRight
1rem
.pf-c-login--pf-c-login__header--xl--MarginBottomc_login__header_xl_MarginBottom
3rem
.pf-c-login--pf-c-login__header--xl--MarginTopc_login__header_xl_MarginTop
4rem
.pf-c-login--pf-c-login__header--c-brand--MarginBottomc_login__header_c_brand_MarginBottom
1.5rem
.pf-c-login--pf-c-login__header--c-brand--xl--MarginBottomc_login__header_c_brand_xl_MarginBottom
3rem
.pf-c-login--pf-c-login__main--BackgroundColorc_login__main_BackgroundColor
#fff
.pf-c-login--pf-c-login__main--MarginBottomc_login__main_MarginBottom
1.5rem
.pf-c-login--pf-c-login__main-header--PaddingTopc_login__main_header_PaddingTop
3rem
.pf-c-login--pf-c-login__main-header--PaddingRightc_login__main_header_PaddingRight
2rem
.pf-c-login--pf-c-login__main-header--PaddingBottomc_login__main_header_PaddingBottom
1rem
.pf-c-login--pf-c-login__main-header--PaddingLeftc_login__main_header_PaddingLeft
2rem
.pf-c-login--pf-c-login__main-header--md--PaddingRightc_login__main_header_md_PaddingRight
3rem
.pf-c-login--pf-c-login__main-header--md--PaddingLeftc_login__main_header_md_PaddingLeft
3rem
.pf-c-login--pf-c-login__main-header--ColumnGapc_login__main_header_ColumnGap
1rem
.pf-c-login--pf-c-login__main-header--RowGapc_login__main_header_RowGap
1rem
.pf-c-login--pf-c-login__main-header-desc--MarginBottomc_login__main_header_desc_MarginBottom
0.5rem
.pf-c-login--pf-c-login__main-header-desc--md--MarginBottomc_login__main_header_desc_md_MarginBottom
0
.pf-c-login--pf-c-login__main-header-desc--FontSizec_login__main_header_desc_FontSize
0.875rem
.pf-c-login--pf-c-login__main-body--PaddingRightc_login__main_body_PaddingRight
2rem
.pf-c-login--pf-c-login__main-body--PaddingBottomc_login__main_body_PaddingBottom
2rem
.pf-c-login--pf-c-login__main-body--PaddingLeftc_login__main_body_PaddingLeft
2rem
.pf-c-login--pf-c-login__main-body--md--PaddingRightc_login__main_body_md_PaddingRight
3rem
.pf-c-login--pf-c-login__main-body--md--PaddingLeftc_login__main_body_md_PaddingLeft
3rem
.pf-c-login--pf-c-login__main-footer--PaddingBottomc_login__main_footer_PaddingBottom
4rem
.pf-c-login--pf-c-login__main-footer--c-title--MarginBottomc_login__main_footer_c_title_MarginBottom
1rem
.pf-c-login--pf-c-login__main-footer-links--PaddingTopc_login__main_footer_links_PaddingTop
0.5rem
.pf-c-login--pf-c-login__main-footer-links--PaddingRightc_login__main_footer_links_PaddingRight
4rem
.pf-c-login--pf-c-login__main-footer-links--PaddingBottomc_login__main_footer_links_PaddingBottom
2rem
.pf-c-login--pf-c-login__main-footer-links--PaddingLeftc_login__main_footer_links_PaddingLeft
4rem
.pf-c-login--pf-c-login__main-footer-links-item--PaddingRightc_login__main_footer_links_item_PaddingRight
1rem
.pf-c-login--pf-c-login__main-footer-links-item--PaddingLeftc_login__main_footer_links_item_PaddingLeft
1rem
.pf-c-login--pf-c-login__main-footer-links-item--MarginBottomc_login__main_footer_links_item_MarginBottom
0.5rem
.pf-c-login--pf-c-login__main-footer-links-item-link-svg--Fillc_login__main_footer_links_item_link_svg_Fill
#6a6e73
.pf-c-login--pf-c-login__main-footer-links-item-link-svg--Widthc_login__main_footer_links_item_link_svg_Width
1.5rem
.pf-c-login--pf-c-login__main-footer-links-item-link-svg--Heightc_login__main_footer_links_item_link_svg_Height
1.5rem
.pf-c-login--pf-c-login__main-footer-links-item-link-svg--hover--Fillc_login__main_footer_links_item_link_svg_hover_Fill
#151515
.pf-c-login--pf-c-login__main-footer-band--PaddingTopc_login__main_footer_band_PaddingTop
1.5rem
.pf-c-login--pf-c-login__main-footer-band--PaddingRightc_login__main_footer_band_PaddingRight
1rem
.pf-c-login--pf-c-login__main-footer-band--PaddingBottomc_login__main_footer_band_PaddingBottom
1.5rem
.pf-c-login--pf-c-login__main-footer-band--PaddingLeftc_login__main_footer_band_PaddingLeft
1rem
.pf-c-login--pf-c-login__main-footer-band--BackgroundColorc_login__main_footer_band_BackgroundColor
#f0f0f0
.pf-c-login--pf-c-login__main-footer-band-item--PaddingTopc_login__main_footer_band_item_PaddingTop
1rem
.pf-c-login--pf-c-login__footer--PaddingLeftc_login__footer_PaddingLeft
1rem
.pf-c-login--pf-c-login__footer--PaddingRightc_login__footer_PaddingRight
1rem
.pf-c-login--pf-c-login__footer--c-list--PaddingTopc_login__footer_c_list_PaddingTop
1rem
.pf-c-login--pf-c-login__footer--c-list--xl--PaddingTopc_login__footer_c_list_xl_PaddingTop
3rem