CSS Class 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:



Standard HTML tag that defines the document body. 

h1, h2, h3, h4, h5, h6, p, a, span

Standard 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, h3

Standard HTML tags for defining headings (h1-h3).


Standard HTML tag for defining paragraphs.


Standard HTML tag for defining hyperlinks.


Standard HTML tag for defining buttons.


Used to define the logo that appears at the top of the container. 


Defines the background area that surrounds the main container.


Defines the main container, and includes the header, content container, and footer.


Defines the header for the main container. By default, this where the logo appears.


Essentially, the container that holds all the content except for the header.


Container footer. By default, the footer contains the link to the registration page.

.auth-screen, .auth-success-screen

Authentication screen.


Buttons for the individual social login identity providers. 


Defines the background area for a form button.


Individual cards (sections) on the user profile screens. 


Area where the profile management cards are overlaid. 


Text area for the profile management cards. 


Header for the individual profile management cards.

.profile-header > div

Header for the user profile screen. 


Description area on the user profile screen. 


Delineates the main screen on the user profile. 


Message screen displayed after a successful operation. 


Icon background color of operation success screens.


Buttons that carry out important (and potentially irreversible) actions. 


Individual cards found on the Privacy Settings screen. 


Secondary (non-default) buttons.