# H1 ## Description: io.H1 It can be used as a header for a whole page (the most common usage), but can also be used as the header for any other piece of on-page content. ### Allowed Parent Components: 1. Card Body 2. Card Table Column 3. Col 4. DIV 5. Thumbnail ### Allowed Child Components: 1. Popover 2. Pulse 3. Trigger Before Render 4. Trigger On Click ### Properties ### ➤ Display Select this to change layout of heading. Allowed Values: 1. block 2. inline 3. Default ### ➤ Small Check this to display heading in small size. Allowed Values: Yes/No ### ➤ Text Enter a static or expression based heading. e.g. Heading, Heading1 etc. Allowed Values: An expression which should return string after evaluation ### ➤ View Attribute Select the view attribute associated to this field. Allowed Values: Select the view attribute associated to this field. ### ➤ Class Name Expression Allowed Values: An expression which should return string after evaluation ### ➤ Format Type Allowed Values: 1. Pattern 2. Custom ### ➤ Format Allowed Values: Free text field ### ➤ Pattern Format If hash format defined, hash string allow number input inplace of hash. ex: #### #### #### #### Allowed Values: Free text field ### ➤ Mask Format If mask defined, component will show non entered placed with masked value. ex: \_ Allowed Values: Free text field ### ➤ Prefix Provide a symbol which is placed before the value. e.g. $50. Allowed Values: Free text field ### ➤ Thousand Separator Add thousand separators on number Allowed Values: Yes/No ### ➤ Decimal Scale If defined it limits to given decimal scale Allowed Values: Any number value ### ➤ Fixed Decimal Scale If true it add 0s to match given decimalScale Allowed Values: Yes/No ### ➤ Pretty Date Allowed Values: Yes/No ### ➤ Tool Tip A message which appears when a cursor is positioned over. Allowed Values: An expression which should return string after evaluation ### ➤ Tool Tip Position Select an option to change the placement of the tooltip when appears. Allowed Values: 1. left 2. right 3. top 4. bottom ### ➤ Min Height Provide a numerical value to specify minimum height. In most cases, you can leave this blank. Allowed Values: Any number value ### ➤ Max Height Provide a numerical value to specify maximum height. In most cases, you can leave this blank. Allowed Values: Any number value ### ➤ Min Width Provide a numerical value to specify minimum width. In most cases, you can leave this blank. Allowed Values: Any number value ### ➤ Max Width Provide a numerical value to specify maximum width. In most cases, you can leave this blank. Allowed Values: Any number value ### ➤ On Click Allowed Values: Controller Function ### ➤ All Caps Select this property for capitalizing the text. Allowed Values: Yes/No ### ➤ Text Color Select a color or enter the custom class to change the color of the text. Allowed Values: Select a color or enter the custom class to change the color of the text. ### ➤ Font Weight This property sets how thick or thin characters in text should be displayed. Allowed Values: 1. Light 2. Normal 3. Semi Bold 4. Bold 5. Default ### ➤ Hint Text Check this property to fade the font color of the text. Allowed Values: Yes/No ### ➤ Italic Check this property to change the font style of the text to italic. Allowed Values: Yes/No ### ➤ Muted Check this property to change the color of the font to light grey. Allowed Values: Yes/No ### ➤ No Decoration Check this property to remove decoration of the text Allowed Values: Yes/No ### ➤ Overflow Ellipsis Check this property to show hidden overflow content as an ellipsis ('…'). Allowed Values: Yes/No ### ➤ Text Size Select an option to change the size of the text. Allowed Values: 1. Small 2. Normal 3. Large 4. Default ### ➤ Text Align Choose an option to change the alignment of the text. Allowed Values: 1. Left 2. Center 3. Right 4. Default ### ➤ Border Top Select this to add a border on top Allowed Values: Yes/No ### ➤ Border Right Select this to add a border on right Allowed Values: Yes/No ### ➤ Border Bottom Select this to add a border on bottom Allowed Values: Yes/No ### ➤ Border Left Select this to add a border on left Allowed Values: Yes/No ### ➤ Border Width Select an option to change the width of a border Allowed Values: 1. default 2. normal 3. thick 4. thicker ### ➤ Border Type Select an option to change the type of a border Allowed Values: 1. solid 2. dashed 3. dotted ### ➤ Border Color Select a color or enter the custom class to set the color on the sides of the element's border. Allowed Values: Select a color or enter the custom class to set the color on the sides of the element's border. ### ➤ Margin Select a value to add margin on all four sides of the component. It is a shorthand for margin-top, margin-right, margin-bottom, and margin-left. Allowed Values: Any number value ### ➤ Margin Bottom Select a value to add margin on the bottom of the component. Allowed Values: Any number value ### ➤ Margin Left Select a value to add margin on the left of the component. Allowed Values: Any number value ### ➤ Margin Right Select a value to add margin on the right of the component. Allowed Values: Any number value ### ➤ Margin Top Select a value to add margin on the top of the component. Allowed Values: Any number value ### ➤ Padding Select a value to add padding on all four sides of the component. It is a shorthand for padding-top, padding-right, padding-bottom, and padding-left. Allowed Values: Any number value ### ➤ Padding Bottom Select a value to add padding in the bottom of the component. Allowed Values: Any number value ### ➤ Padding Left Select a value to add padding in the left of the component. Allowed Values: Any number value ### ➤ Padding Right Select a value to add padding in right of the component. Allowed Values: Any number value ### ➤ Padding Top Select a value to add padding in top of the component. Allowed Values: Any number value ### ➤ Use Server Timezone Check this prop if this date should not be converted to browser's timezone. Also make sure the attribute type is set to 'String Date & Time 2' on the server side DataSource definition. Allowed Values: Yes/No ### ➤ Timezone Attribute Select an attribute to set the timezone to the respective field Allowed Values: Select an attribute to set the timezone to the respective field --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.cloudio.io/ui-components/widgets/h1.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.