CSS Reference

This documentation provides information about the Style.css, the default stylesheet used with Hosted Login. In this documentation you’ll find information about, and examples that use, the following CSS classes:

Class Description
body Standard HTML tag that defines the document body.
h1, h2, h3, h4, h5, h6, p, a, span Standard HTML tags for defining heading styles (h1through h6), paragraphs (p), hyperlinks (a), and spans. In Hosted Login, this is primarily used for formatting text.
h1, h2, h3 Standard HTML tags for defining headings (h1through h3).
p Standard HTML tag for defining paragraphs.
a Standard HTML tag for defining hyperlinks.
button Standard HTML tag for defining buttons.
#logo Used to define the logo that appears at the top of the container.
#main-container Defines the background area that surrounds the main container.
#floating-container Defines the main container, and includes the header, content container, and footer.
#header-container Defines the header for the main container. By default, this where the logo appears.
#content-container Essentially, the container that holds all the content except for the header.
.footer-container Container footer. By default, the footer contains the link to the registration page.
.auth-screen, .auth-success-screen Authentication screen.
#social-login-buttons Buttons for the individual social login identity providers.
.form-action-buttons Defines the background area for a form button.
.profile-management-card Individual cards (sections) on the user profile screens.
.profile-management-row Area where the profile management cards are overlaid.
.card-body Text area for the profile management cards.
.card-heading Header for the individual profile management cards.
.profile-header > div Header for the user profile screen.
.screen-heading Description area on the user profile screen.
.manage-screen Delineates the main screen on the user profile.
.auth-success-screen Message screen displayed after a successful operation.
.success-check Icon background color of operation success screens.
.button.danger Buttons that carry out important (and potentially irreversible) actions.
.action-card Individual cards found on the Privacy Settings screen.
button.secondary Secondary (non-default) buttons.