CSS Class Reference


We're Moving ... Again

Yes, the Identity Cloud documentation is once more on the move. And this time we're headed to two different locations:

As for the Education Center, well, the Center itself will disappear on July 23rd. We apologize for any inconvenience, but we look forward to becoming a full-fledged member of the Akamai family.
 

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 (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).

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.