HTML

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__container--MaxWidthc_login__container_MaxWidth
31.25rem
--pf-c-login__container--PaddingLeftc_login__container_PaddingLeft
6.125rem
--pf-c-login__container--PaddingRightc_login__container_PaddingRight
6.125rem
--pf-c-login__container--xl--GridColumnGapc_login__container_xl_GridColumnGap
4rem
--pf-c-login__container--xl--GridTemplateColumnsc_login__container_xl_GridTemplateColumns
34rem minmax(auto,34rem)
--pf-c-login__container--xl--MaxWidthc_login__container_xl_MaxWidth
none
--pf-c-login__footer--c-list--PaddingTopc_login__footer_c_list_PaddingTop
1rem
--pf-c-login__footer--c-list--xl--PaddingTopc_login__footer_c_list_xl_PaddingTop
3rem
--pf-c-login__footer--sm--PaddingLeftc_login__footer_sm_PaddingLeft
1rem
--pf-c-login__footer--sm--PaddingRightc_login__footer_sm_PaddingRight
1rem
--pf-c-login__header--c-brand--MarginBottomc_login__header_c_brand_MarginBottom
1.5rem
--pf-c-login__header--c-brand--xl--MarginBottomc_login__header_c_brand_xl_MarginBottom
3rem
--pf-c-login__header--MarginBottomc_login__header_MarginBottom
1rem
--pf-c-login__header--sm--PaddingLeftc_login__header_sm_PaddingLeft
1rem
--pf-c-login__header--sm--PaddingRightc_login__header_sm_PaddingRight
1rem
--pf-c-login__header--xl--MarginBottomc_login__header_xl_MarginBottom
3rem
--pf-c-login__header--xl--MarginTopc_login__header_xl_MarginTop
4rem
--pf-c-login__main--BackgroundColorc_login__main_BackgroundColor
#fff
--pf-c-login__main-body--c-form__helper-text-icon--FontSizec_login__main_body_c_form__helper_text_icon_FontSize
1.125rem
--pf-c-login__main-body--c-form__helper-text-icon--MarginRightc_login__main_body_c_form__helper_text_icon_MarginRight
0.5rem
--pf-c-login__main-body--md--PaddingLeftc_login__main_body_md_PaddingLeft
3rem
--pf-c-login__main-body--md--PaddingRightc_login__main_body_md_PaddingRight
3rem
--pf-c-login__main-body--PaddingBottomc_login__main_body_PaddingBottom
2rem
--pf-c-login__main-body--PaddingLeftc_login__main_body_PaddingLeft
2rem
--pf-c-login__main-body--PaddingRightc_login__main_body_PaddingRight
2rem
--pf-c-login__main-footer-band--BackgroundColorc_login__main_footer_band_BackgroundColor
#ededed
--pf-c-login__main-footer-band-item--PaddingTopc_login__main_footer_band_item_PaddingTop
1rem
--pf-c-login__main-footer-band--PaddingBottomc_login__main_footer_band_PaddingBottom
1.5rem
--pf-c-login__main-footer-band--PaddingLeftc_login__main_footer_band_PaddingLeft
1rem
--pf-c-login__main-footer-band--PaddingRightc_login__main_footer_band_PaddingRight
1rem
--pf-c-login__main-footer-band--PaddingTopc_login__main_footer_band_PaddingTop
1.5rem
--pf-c-login__main-footer--c-title--MarginBottomc_login__main_footer_c_title_MarginBottom
1rem
--pf-c-login__main-footer-links-item-link-svg--Fillc_login__main_footer_links_item_link_svg_Fill
#737679
--pf-c-login__main-footer-links-item-link-svg--Heightc_login__main_footer_links_item_link_svg_Height
1.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-footer-links-item-link-svg--Widthc_login__main_footer_links_item_link_svg_Width
1.5rem
--pf-c-login__main-footer-links-item--MarginBottomc_login__main_footer_links_item_MarginBottom
0.5rem
--pf-c-login__main-footer-links-item--PaddingLeftc_login__main_footer_links_item_PaddingLeft
1rem
--pf-c-login__main-footer-links-item--PaddingRightc_login__main_footer_links_item_PaddingRight
1rem
--pf-c-login__main-footer-links--PaddingBottomc_login__main_footer_links_PaddingBottom
2rem
--pf-c-login__main-footer-links--PaddingLeftc_login__main_footer_links_PaddingLeft
4rem
--pf-c-login__main-footer-links--PaddingRightc_login__main_footer_links_PaddingRight
4rem
--pf-c-login__main-footer-links--PaddingTopc_login__main_footer_links_PaddingTop
0.5rem
--pf-c-login__main-footer--PaddingBottomc_login__main_footer_PaddingBottom
4rem
--pf-c-login__main-header--ColumnGapc_login__main_header_ColumnGap
1rem
--pf-c-login__main-header-desc--FontSizec_login__main_header_desc_FontSize
0.875rem
--pf-c-login__main-header-desc--MarginBottomc_login__main_header_desc_MarginBottom
0.5rem
--pf-c-login__main-header-desc--md--MarginBottomc_login__main_header_desc_md_MarginBottom
0
--pf-c-login__main-header--md--PaddingLeftc_login__main_header_md_PaddingLeft
3rem
--pf-c-login__main-header--md--PaddingRightc_login__main_header_md_PaddingRight
3rem
--pf-c-login__main-header--PaddingBottomc_login__main_header_PaddingBottom
1rem
--pf-c-login__main-header--PaddingLeftc_login__main_header_PaddingLeft
2rem
--pf-c-login__main-header--PaddingRightc_login__main_header_PaddingRight
2rem
--pf-c-login__main-header--PaddingTopc_login__main_header_PaddingTop
3rem
--pf-c-login__main-header--RowGapc_login__main_header_RowGap
1rem
--pf-c-login__main--xl--MarginBottomc_login__main_xl_MarginBottom
1.5rem
--pf-c-login--PaddingBottomc_login_PaddingBottom
1.5rem
--pf-c-login--PaddingTopc_login_PaddingTop
1.5rem
--pf-c-login--xl--BackgroundImagec_login_xl_BackgroundImage
linear-gradient(90deg,rgba(3,3,3,0.32),rgba(3,3,3,0.32) calc(98px - 4rem + 4rem + 272px),transparent calc(98px - 4rem + 4rem + 272px))