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 VariablesExamples
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__header | --pf-global--Color--100 | #fff | ||
| .pf-c-login__header | --pf-global--Color--200 | #f0f0f0 | ||
| .pf-c-login__header | --pf-global--BorderColor--100 | #b8bbbe | ||
| .pf-c-login__header | --pf-global--primary-color--100 | #73bcf7 | ||
| .pf-c-login__header | --pf-global--link--Color | #73bcf7 | ||
| .pf-c-login__header | --pf-global--link--Color--hover | #73bcf7 | ||
| .pf-c-login__header | --pf-global--BackgroundColor--100 | #151515 | ||
| .pf-c-login__header .pf-c-card | --pf-c-card--BackgroundColor | rgba(#030303, .32) | ||
| .pf-c-login__header .pf-c-button | --pf-c-button--m-primary--Color | #06c | ||
| .pf-c-login__header .pf-c-button | --pf-c-button--m-primary--hover--Color | #06c | ||
| .pf-c-login__header .pf-c-button | --pf-c-button--m-primary--focus--Color | #06c | ||
| .pf-c-login__header .pf-c-button | --pf-c-button--m-primary--active--Color | #06c | ||
| .pf-c-login__header .pf-c-button | --pf-c-button--m-primary--BackgroundColor | #fff | ||
| .pf-c-login__header .pf-c-button | --pf-c-button--m-primary--hover--BackgroundColor | #f0f0f0 | ||
| .pf-c-login__header .pf-c-button | --pf-c-button--m-primary--focus--BackgroundColor | #f0f0f0 | ||
| .pf-c-login__header .pf-c-button | --pf-c-button--m-primary--active--BackgroundColor | #f0f0f0 | ||
| .pf-c-login__header .pf-c-button | --pf-c-button--m-secondary--Color | #fff | ||
| .pf-c-login__header .pf-c-button | --pf-c-button--m-secondary--hover--Color | #fff | ||
| .pf-c-login__header .pf-c-button | --pf-c-button--m-secondary--focus--Color | #fff | ||
| .pf-c-login__header .pf-c-button | --pf-c-button--m-secondary--active--Color | #fff | ||
| .pf-c-login__header .pf-c-button | --pf-c-button--m-secondary--BorderColor | #fff | ||
| .pf-c-login__header .pf-c-button | --pf-c-button--m-secondary--hover--BorderColor | #fff | ||
| .pf-c-login__header .pf-c-button | --pf-c-button--m-secondary--focus--BorderColor | #fff | ||
| .pf-c-login__header .pf-c-button | --pf-c-button--m-secondary--active--BorderColor | #fff | ||
| .pf-c-login | --pf-c-login--PaddingTop | 1.5rem | ||
| .pf-c-login | --pf-c-login--PaddingBottom | 1.5rem | ||
| .pf-c-login | --pf-c-login--xl--BackgroundImage | none | ||
| .pf-c-login | --pf-c-login__container--xl--GridColumnGap | 4rem | ||
| .pf-c-login | --pf-c-login__container--MaxWidth | 31.25rem | ||
| .pf-c-login | --pf-c-login__container--xl--MaxWidth | none | ||
| .pf-c-login | --pf-c-login__container--PaddingLeft | 6.125rem | ||
| .pf-c-login | --pf-c-login__container--PaddingRight | 6.125rem | ||
| .pf-c-login | --pf-c-login__container--xl--GridTemplateColumns | 34rem minmax(auto, 34rem) | ||
| .pf-c-login | --pf-c-login__header--MarginBottom | 1rem | ||
| .pf-c-login | --pf-c-login__header--PaddingLeft | 1rem | ||
| .pf-c-login | --pf-c-login__header--PaddingRight | 1rem | ||
| .pf-c-login | --pf-c-login__header--xl--MarginBottom | 3rem | ||
| .pf-c-login | --pf-c-login__header--xl--MarginTop | 4rem | ||
| .pf-c-login | --pf-c-login__header--c-brand--MarginBottom | 1.5rem | ||
| .pf-c-login | --pf-c-login__header--c-brand--xl--MarginBottom | 3rem | ||
| .pf-c-login | --pf-c-login__main--BackgroundColor | #fff | ||
| .pf-c-login | --pf-c-login__main--MarginBottom | 1.5rem | ||
| .pf-c-login | --pf-c-login__main-header--PaddingTop | 3rem | ||
| .pf-c-login | --pf-c-login__main-header--PaddingRight | 2rem | ||
| .pf-c-login | --pf-c-login__main-header--PaddingBottom | 1rem | ||
| .pf-c-login | --pf-c-login__main-header--PaddingLeft | 2rem | ||
| .pf-c-login | --pf-c-login__main-header--md--PaddingRight | 3rem | ||
| .pf-c-login | --pf-c-login__main-header--md--PaddingLeft | 3rem | ||
| .pf-c-login | --pf-c-login__main-header--ColumnGap | 1rem | ||
| .pf-c-login | --pf-c-login__main-header--RowGap | 1rem | ||
| .pf-c-login | --pf-c-login__main-header-desc--MarginBottom | 0.5rem | ||
| .pf-c-login | --pf-c-login__main-header-desc--md--MarginBottom | 0 | ||
| .pf-c-login | --pf-c-login__main-header-desc--FontSize | 0.875rem | ||
| .pf-c-login | --pf-c-login__main-body--PaddingRight | 2rem | ||
| .pf-c-login | --pf-c-login__main-body--PaddingBottom | 2rem | ||
| .pf-c-login | --pf-c-login__main-body--PaddingLeft | 2rem | ||
| .pf-c-login | --pf-c-login__main-body--md--PaddingRight | 3rem | ||
| .pf-c-login | --pf-c-login__main-body--md--PaddingLeft | 3rem | ||
| .pf-c-login | --pf-c-login__main-footer--PaddingBottom | 4rem | ||
| .pf-c-login | --pf-c-login__main-footer--c-title--MarginBottom | 1rem | ||
| .pf-c-login | --pf-c-login__main-footer-links--PaddingTop | 0.5rem | ||
| .pf-c-login | --pf-c-login__main-footer-links--PaddingRight | 4rem | ||
| .pf-c-login | --pf-c-login__main-footer-links--PaddingBottom | 2rem | ||
| .pf-c-login | --pf-c-login__main-footer-links--PaddingLeft | 4rem | ||
| .pf-c-login | --pf-c-login__main-footer-links-item--PaddingRight | 1rem | ||
| .pf-c-login | --pf-c-login__main-footer-links-item--PaddingLeft | 1rem | ||
| .pf-c-login | --pf-c-login__main-footer-links-item--MarginBottom | 0.5rem | ||
| .pf-c-login | --pf-c-login__main-footer-links-item-link-svg--Fill | #6a6e73 | ||
| .pf-c-login | --pf-c-login__main-footer-links-item-link-svg--Width | 1.5rem | ||
| .pf-c-login | --pf-c-login__main-footer-links-item-link-svg--Height | 1.5rem | ||
| .pf-c-login | --pf-c-login__main-footer-links-item-link-svg--hover--Fill | #151515 | ||
| .pf-c-login | --pf-c-login__main-footer-band--PaddingTop | 1.5rem | ||
| .pf-c-login | --pf-c-login__main-footer-band--PaddingRight | 1rem | ||
| .pf-c-login | --pf-c-login__main-footer-band--PaddingBottom | 1.5rem | ||
| .pf-c-login | --pf-c-login__main-footer-band--PaddingLeft | 1rem | ||
| .pf-c-login | --pf-c-login__main-footer-band--BackgroundColor | #f0f0f0 | ||
| .pf-c-login | --pf-c-login__main-footer-band-item--PaddingTop | 1rem | ||
| .pf-c-login | --pf-c-login__footer--PaddingLeft | 1rem | ||
| .pf-c-login | --pf-c-login__footer--PaddingRight | 1rem | ||
| .pf-c-login | --pf-c-login__footer--c-list--PaddingTop | 1rem | ||
| .pf-c-login | --pf-c-login__footer--c-list--xl--PaddingTop | 3rem | ||
