TitleOnBorder

Reference

• The TitleOnBorder component is a styled <div>.
• It is designed to display a title or content with customizable styles, often used in layouts where the title appears on a border or background.

Props

1. marginTop

   • Type: string
   • Description: Sets the top margin of the component.

2. marginLeft

   • Type: string
   • Description: Sets the left margin of the component.

3. backgroundColor

   • Type: string
   • Description: Sets the background color using the theme's colorPalette.

4. width

   • Type: string
   • Default: 'fit-content'
   • Description: Sets the width of the component.

5. padding

   • Type: string
   • Description: Sets the padding inside the component.

6. height

   • Type: string
   • Description: Sets the height of the component.

7. lineHeight

   • Type: string
   • Description: Sets the line height of the content.

8. display

   • Type: string
   • Description: Sets the CSS display property (e.g., flex, block).

9. alignItems

   • Type: string
   • Description: Sets the alignment of items if display is flex.

Usage Example

function Example(pageContext) {
  const { protrakComponents } = React.useContext(customWidgetContext);
  const { TitleOnBorder } = protrakComponents;
  return(
    <TitleOnBorder 
        marginTop="10px" 
        backgroundColor="PRIMARY" 
        padding="5px 10px" 
        lineHeight="1.5"
    >
        Section Title
    </TitleOnBorder>
);
}

• This renders a title with a background color, padding, and custom margins, styled according to the theme.