Skip to main content

Title Component

1. Introduction​

The Title component is a static text element used to display headings or titles in a fixed format. This component is non-editable by the end-user and supports various heading levels (H1 to H6) for semantic and visual hierarchy. It is ideal for structuring content, providing context, or emphasizing key sections of an application.

Purpose and Use Cases​

  • Purpose: The Title component is used to display static headings or titles that provide structure and context to the application.
  • Primary Use Cases:
    • Displaying section headers or titles.
    • Highlighting important information or content.
    • Structuring content with semantic heading levels (H1 to H6).

Benefits​

  • Clarity: Ensures that headings and titles are displayed consistently across the application.
  • Customizable: Offers extensive styling options to match the application's design.
  • Semantic Structure: Supports heading levels (H1 to H6) for better accessibility and SEO.
  • Responsive Design: Works seamlessly across desktop, tablet, and mobile devices.

2. Properties​

The Title component comes with several configurable properties to suit different use cases. Below is a detailed breakdown:

Code​

  • Description: A unique identifier for the component.
  • Purpose: Used to reference the component programmatically.
  • Required/Optional: Required

Title​

  • Description: The static text to be displayed as the title.
  • Purpose: Provides the content that will be shown to the user.
  • Required/Optional: Required

Level​

  • Description: Specifies the heading level for the title (H1 to H6).
  • Purpose: Determines the semantic and visual hierarchy of the title.
  • Default: Heading 1 (H1)
  • Required/Optional: Optional

Tooltip​

  • Description: A tooltip that appears when the user hovers over the title.
  • Purpose: Provides additional context or information about the title.
  • Required/Optional: Optional

3. Style​

The Title component offers extensive styling options to ensure it aligns with the application's design. Below are the key styling properties:

Size and Position​

  • Reset: Resets size and position settings to default.
  • Size:
    • Width & Height: Define the dimensions of the title.
    • Min Size: Minimum width and height (default: none).
    • Max Size: Maximum width and height (default: none).
  • Position:
    • Alignment: Left, right, top, bottom (default: left, top).
    • X Position: Horizontal offset from the edge.
    • Y Position: Vertical offset from the edge.
  • Z-Index: Specifies the stack order of the title (default: 0).
  • Fixed Position: Locks the title's position on the screen (default: OFF).
  • Hidden: Hides the title from view (default: OFF).

Border​

  • Reset: Resets border settings to default.
  • Options: Normal, On Hover.
    • Edges: Left, right, top, bottom, or all edges.
    • Type: None, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset, initial, inherit (default: none).
    • Color: Hexadecimal color code with a color picker.
    • Width: Border width in pixels.
    • Radius: Corner radius for rounded edges (default: none).

Padding​

  • Reset: Resets padding settings to default.
  • Options: Normal, On Hover.
    • Sides: Left, right, top, bottom, or all edges.
    • Size: Padding size in pixels.

Margin​

  • Reset: Resets margin settings to default.
  • Options: Normal, On Hover, On Focus.
    • Sides: Left, right, top, bottom, or all edges.
    • Size: Margin size in pixels (default: none).

Background​

  • Reset: Resets background settings to default.
  • Normal:
    • Background Color: Hexadecimal color code with a color picker (default: none).
    • Source: Media library or HTTP URL.
    • Attachment: Scroll, fixed, local, initial, inherit.
    • Position: X and Y positions in pixels (default: 0).
    • Repeat: Repeat, repeat-x, repeat-y, no-repeat, initial, inherit.
    • Size: Auto, length, cover, contain, initial, inherit.
    • Origin: Border-box, padding-box, content-box, initial, inherit.
  • On Hover:
    • Same properties as "Normal" but applied when the title is hovered.

Font​

  • Reset: Resets font settings to default.
  • Options: Normal, On Hover, On Focus.
    • Font Size: Pixels (default: 14).
    • Letter Spacing: Number expressed in em, px, or rem units.
    • Word Spacing: Number expressed in em, px, or rem units.
    • Line Height: Number expressed in em, px, or rem units.
    • Weight: Thin, light, extra light, normal, medium, semi-bold, bold, extra bold, black (default: normal).
    • Color: Hexadecimal color code with a color picker (default: none).
    • Text Decoration: Line, style, thickness, and color options.
    • White Space: Normal, no wrap, pre, pre-wrap, pre-line, break spaces, collapse balance.
    • Word Break: Normal, break all, keep all, auto phrase, break word, inherit.

Shadow​

  • Reset: Resets shadow settings to default.
  • Options: Normal, On Hover.
    • Color: Hexadecimal color code with a color picker (default: none).
    • Offset X: Horizontal spacing in pixels.
    • Offset Y: Vertical spacing in pixels.
    • Blur Radius: The amount of blur applied to the shadow.
    • Spread Radius: The size of the shadow spread.
    • Inset: Applies the shadow inside the element (default: OFF).

Cursor​

  • Reset: Resets cursor settings to default.
  • Options: Auto, default, none, context-menu, help, pointer, progress, wait, cell, crosshair, text, vertical-text, alias, copy, move, no-drop, not-allowed, grab, wait, all-scroll, col-resize, row-resize, n-resize, e-resize, s-resize, w-resize, ne-resize, nw-resize, se-resize, sw-resize, ew-resize, ns-resize, neswe-resize, nesw-resize, zoom-in, zoom-out.

4. Actions​

The Title component supports the following action:

  • On Click: Triggers an event when the title is clicked (default: none).

5. Best Practices for UI/UX​

When and Why to Use​

  • Use the Title component to provide structure and context to your application.
  • Ideal for creating a clear visual hierarchy with headings.

Effective Scenarios​

  • Desktop: Use for section headers or titles in forms and dashboards.
  • Tablet/Smartphone: Ensure the title is responsive and legible on smaller screens.

Tips for Optimal Use​

  • Use appropriate heading levels (H1 to H6) for semantic structure and accessibility.
  • Style the title to match the application's overall design.
  • Add tooltips for additional context or information.

6. Security Considerations​

Potential Risks​

  • External Resources: Validate any external resources used for backgrounds or media to ensure they are trustworthy.

Best Practices​

  • Use HTTPS for secure communication when loading external resources.
  • Test the title's responsiveness and behavior across different devices and screen sizes.