Hosted Login v1 CSS legacy classes

Reference information for the CSS classes used in Hosted Login v1.

ClassDescription
bodyStandard HTML tag that defines the document body.
h1, h2, h3, h4, h5, h6, p, a, spanStandard HTML tags for defining heading styles (h1-h6), paragraphs (p), hyperlinks (a), and spans. In Hosted Login, this is primarily used for formatting text.
h1, h2, h3Standard HTML tags for defining headings (h1-h3).
pStandard HTML tag for defining paragraphs.
aStandard HTML tag for defining hyperlinks.
buttonStandard HTML tag for defining buttons.
#logo classUsed to define the logo that appears at the top of the container.
#main-containerDefines the background area that surrounds the main container.
#floating-containerDefines the main container, and includes the header, content container, and footer.
#header-containerDefines the header for the main container. By default, this where the logo appears.
#content-containerEssentially, the container that holds all the content except for the header.
.footer-containerContainer footer. By default, the footer contains the link to the registration page.
.auth-screen, .auth-success-screenAuthentication screen.
#social-login-buttonsButtons for the individual social login identity providers.
.form-action-buttonsDefines the background area for a form button.
.profile-management-cardIndividual cards (sections) on the user profile screens.
.profile-management-rowArea where the profile management cards are overlaid.
.card-bodyText area for the profile management cards.
.card-headingHeader for the individual profile management cards.
.profile-header > div class (legacy Hosted Login CSS)Header for the user profile screen.
.screen-headingDescription area on the user profile screen.
.manage-screenDelineates the main screen on the user profile.
.auth-success-screenMessage screen displayed after a successful operation.
.success-checkIcon background color of operation success screens.
.button-danger Buttons that carry out important (and potentially irreversible) actions.
.action-cardIndividual cards found on the Privacy Settings screen.
.button-secondarySecondary (non-default) buttons.

Did this page help you?