Section Header

The Section Header Component is part of the Rich Text Component Set. This Section Header is designed to be used at the top of a page acting as a header for that specific page. 

Ideas for Using Section Header

• Make sure your app users know where they are at all times. Add titles or section headings at the top of key Pages. Use your brand colors to create a bold header that stands out. Set the background color and text color to contrast.
• Create a pop of color with any headers by adding the Line Component at the top and/or bottom of the Section Header. Set the Placement properties to 0 to allow the Line Component to appear as a border.
• Use the Section Header to title images or videos, such as above an Image, Carousel, or Swiper Image Carousel.

Section Header Properties

The Section Header component has the following properties:

• Component Id - Sets the name of the Section Header component in the app. The Component Id can be referenced using JavaScript to add more functionality to the app as needed.
  
  
  Pro Tip: It is a best practice to use only letters without spaces for the Component Id. Symbols, spaces, and numbers are not recommended.
• Minimum Height (px) - Set the minimum height of the component. 
• Background Color - Select the color of the background. There are two ways to set the Background Color: Click the Color Swatch to choose from the app’s Color Palette or enter the hex code in the text field.
• Text - Enter the text as it should appear in the header. 
• Text Color - Select the color of the text. There are two ways to set the Text Color: Click the Color Swatch to choose from the app’s Color Palette or enter the hex code in the text field.
• Font Size (px) -  Enter the size in pixels for the font. 
• Bold Text -  Toggle on or off for the text to appear bold. 
• Text Alignment - Sets the alignment for all text. Choose from the dropdown list: Left, Right, or Center.
• Left Padding (px) - Sets the amount of space that will appear to the left of the component in pixels.
• Right Padding (px) - Sets the amount of space that will appear to the right of the component in pixels. 
• Top Padding (px) - Sets the amount of space that will appear on top of the component in pixels. 
• Bottom Padding (px) - Sets the amount of space that will appear below the component in pixels.  

Section Header Placement Settings

The Placement Settings for the Component sets which column(s) the Component will appear. Each Page of the app can have a different number of columns that are set in the Layout section of the Page Settings. The following Placement settings are available for this Component:

• Column Start - Sets the column where the Component will start. 
• Column Span - Sets how many columns the Component will span. 
• Padding - Sets how much space will appear on the top, bottom, left, and right of the Component. When building a Page with multiple Components, the Padding will determine the overall spacing between Components.
• Display Mode - Sets how the Component is displayed. If Both is selected, the Component will always show. Both are the default option. If Optimal is selected, the Component will only show if the browser supports the app. The main supported browsers are Chrome and Safari. If Degraded is selected, the Component will only show if the browser does not support the app. The main unsupported browser is Internet Explorer.