HTML

Login

ExamplesDocumentationCSS Variables

Examples

Login simple

This Preview can only be accessed in full page mode.
Copied to clipboard

Login invalid

This Preview can only be accessed in full page mode.
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--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))