HTML

Login

ExamplesDocumentationCSS variables

Examples

Login simple

Login simple
Copied to clipboard

Login invalid

Login invalid
Copied to clipboard

Documentation

Usage

Class Applied to Outcome
.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--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--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#737679
--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))