Support Titan > Titan Web > Elements > Button > Button Style > Verification Styling

Verification Styling

The Verification Box is the screen with the authentication code field that can hold at least six digits, allowing users to confirm who they are. You can design the look and feel of your Verification screen using your brand colors to complement your business needs. Visit the SmartV Authentication page for more information on configuring the verification screen. This element can be edited on both the Project Style Level and Element Style Level.

#	Option	Function
1	Verification Box	You can design the look and feel of your verification screen using brand colors to complement your business needs.
2	Title	Title properties allow you to style the name of the element. For example, its font type, font size, and color.
3	Description	The description properties allow you to control the style of the descriptive text or a short instruction. For example, its font type, font size, and color.
4	Button	This option allows you to style the navigation button. You can set different styles to display by Default, upon Hovering or Clicking on an element. The options are the same under Default, Hover, and Clicked.
5	Resend Link	The Resend Link allows you to style the link the user clicks on when they do not receive a code.
6	Progress	Style the progress error or success line upon form completion or when the user has entered an identifying parameter and clicked the button.
7	Page	Use the page properties to style the page background behind the Log In Box.
8	Input Fields	This option allows you to choose the general look of the input from the five existing variants: Standard, Filled, Outlined, Fixed, and Classic. Set a specific height and width and change the element’s main/key color.

1. Verification Box

This option allows you to style the rectangle container that holds all the content on the verification page. Set a back color or image, add padding or margin, change the border, etc.

#	Option	Function
1	Fill	The fill option allows you to add color to the element’s content or shape. Select a color fill from the color palette.
2	Padding	You can style the padding of an element by controlling the text’s distance from the borders of the element.
3	Margin	Margin allows you to set the size of the outer space of an element. It also allows you to add space between the label and the adjacent element parts.
4	Border	Use the border properties to create an outline of an element. You can change the entire border or each side separately.
5	Shadow	You can style the shadow of an element to complement your brand.
6	User CSS	Cascading Style Sheets (CSS) are a simple mechanism used to add style to elements. You can easily change the element background, font color, or font type using syntax.

2. Title

Title properties allow you to style the main title of the verification box.

#	Option	Function
1	Font	The fill option allows you to add color to the element’s content or shape. Select a color fill from the color palette.
2	Fill	The fill option allows you to add color to the content or the shape of the element. Select a color fill from the color palette.
3	Padding	You can style the padding of an element by controlling the text’s distance from the borders of the element.
4	Border	You can style the padding of an element by controlling the text’s distance from the borders of the element.
5	Shadow	You can style the shadow of an element to complement your brand.
6	User CSS	Cascading Style Sheets (CSS) are a simple mechanism used to add style to elements. You can easily change the element background, font color, or font type using syntax.

3. Description

The description properties allow you to control the style of the descriptive text or a short instruction. For example, its font type, font size, and color.

#	Option	Function
1	Font	The font allows you to change the style of the typography, for instance, font family, weight, color, and size.
2	Fill	The fill option allows you to add color to the element’s content or shape. Select a color fill from the color palette.
3	Padding	You can style the padding of an element by controlling the text’s distance from the borders of the element.
4	Margin	Margin allows you to set the size of the outer space of an element. It also allows you to add space between the label and the adjacent element parts.
5	Border	Use the border properties to create an outline of an element. You can change the entire border or each side separately.
6	Shadow	You can style the shadow of an element to complement your brand.
7	User CSS	Cascading Style Sheets (CSS) are a simple mechanism used to add style to elements. You can easily change the element background, font color, or font type using syntax.

4. Button

The input allows you to style the Log In button. You can set different styles for the different button states: Default, Hover and Clicked. Learn more about the tree button states here.

#	Option	Function
1	Font	The font allows you to change the style of the typography, for instance, font family, weight, color, and size.
2	Fill	The fill option allows you to add color to the element’s content or shape. Select a color fill from the color palette.
3	Size	This option allows you to change the width and height of the button.
4	Padding	You can style the padding of an element by controlling the text’s distance from the borders of the element.
5	Margin	Margin allows you to set the size of the outer space of an element. It also allows you to add space between the label and the adjacent element parts.
6	Border	Use the border properties to create an outline of an element. You can change the entire border or each side separately.
7	Shadow	You can style the shadow of an element to complement your brand.
8	User CSS	Cascading Style Sheets (CSS) are a simple mechanism used to add style to elements. You can easily change the element background, font color, or font type using syntax.

5. Resend Link

The Resend Link allows you to style the link the user clicks on when they do not receive a code.

#	Option	Function
1	Font	The font allows you to change the style of the typography, for instance, font family, weight, color, and size.
2	Fill	The fill option allows you to add color to the element’s content or shape. Select a color fill from the color palette.
3	Padding	You can style the padding of an element by controlling the text’s distance from the borders of the element.
4	Margin	Margin allows you to set the size of the outer space of an element. It also allows you to add space between the label and the adjacent element parts.
5	Border	Use the border properties to create an outline of an element. You can change the entire border or each side separately.
6	Shadow	You can style the shadow of an element to complement your brand.
7	User CSS	Cascading Style Sheets (CSS) are a simple mechanism used to add style to elements. You can easily change the element background, font color, or font type using syntax.

6. Progress

Style the progress error or success line upon form completion.

#	Option	Function
1	Color	You can change the progress color.
2	Line	You can adjust the line size.
3	User CSS	Cascading Style Sheets (CSS) are a simple mechanism used to add style to elements. You can easily change the element background, font color, or font type using syntax.

7. Page

This refers to the entire browser real estate that resides under the verification box. It allows you to set a background, padding, border, etc.

#	Option	Function
1	Fill	The fill option allows you to add color to the element’s content or shape. Select a color fill from the color palette.
2	Padding	You can style the padding of an element by controlling the text’s distance from the borders of the element.
3	Border	Use the border properties to create an outline of an element. You can change the entire border or each side separately.
4	Shadow	You can style the shadow of an element to complement your brand.
5	User CSS	Cascading Style Sheets (CSS) are a simple mechanism used to add style to elements. You can easily change the element background, font color, or font type using syntax.

8. Input Variant

When you select the input field on the login box, it enables you to set the style for the various inputs’ primary color, labels, etc. It also enables you to set styles for the Date field modal when used in the login box. Use the Input Variant to choose the general look of the input from the five existing variants.