Header¶

General tab [[]]¶

• Model: The model the Header is connected to, providing fields and context to any merge variables used in the Title and Subtitle properties.

• Allow HTML: Determines HTML rendering behavior for Title and Subtitle contents. When enabled, any HTML syntax will be rendered. When disabled, HTML syntax is displayed as plain text. For example:

  Enabled:

  This text is important

  Disabled:

  <strong>This text is important</strong>

• Title: The text to be displayed as a top-level heading within the component. This property can be a specific string of text, the merge variables of one or more fields chosen with the field picker, or a combination of the two. Can also contain rendered HTML if Allow HTML is enabled.

• Subtitle: The text to be displayed as a second-level heading above the title. This property can be a specific string of text, the merge variables of one or more fields chosen with the field picker, or a combination of the two. Can also contain rendered HTML if Allow HTML is enabled.

• Add border separator: Adds a thin rule at the bottom of the component to visually separate it from the component that follows.
• Heading level: Indicates the hierarchical position for this Header component relative to others on the page, with 1 being the highest level. In effect, this wraps the Header’s title in HTML tags. Heading Level 1 = <h1> tags; Heading Level 2 = <h2> tags, and so on. This helps assistive technologies correctly navigate the page using the Header components as outline levels.

• ARIA role: Determines which type of user interface element the component represents for assistive technology. The available options all refer to standard landmark ARIA roles. For more technical information on each role type, refer to MDN web docs.

  • Banner: Used for defining global site details, such as company name, global search, logos, and similar information.
  • Complementary: Used for content that, while related to the main content area, is not necessary for that main area to stand alone. Typically used for sidebars and other supplementary information.
  • Content Info: Used for footers that appear on each page, which typically contain copyright information, navigation items, or similar content.
  • Form: Used to identify sections that comprise a singular form–even though it may be comprised of multiple components.
  • Main: Used to identify primary focus of the page.
  • Navigation: Used to indicate a section containing links for navigating a site.
  • Region: Used as a more generic landmark in order to indicate an area is relevant, but not categorized under the other available roles.
  • Search: Used to indicate a section contains elements for searching the page or site.

Advanced tab [[]]¶

• Unique ID (optional): Skuid automatically generates an alphanumeric ID for the component; if preferred, give it a practical name.

Styles tab [[]]¶

Global styles for this component are set in the Design System Studio. The following Style properties can be adjusted for an individual page.

• Style variant: The font sizing for Titles and Subtitles is set in the theme using the Design System Studio. To adjust sizes in a specific instance, use the Style Variant. Options are:

  • Default
  • Small
  • Medium
  • Large
  • Extra Large
  • Huge
  • Gigantic

  Note

  These sizes are relative to the baseline determined by the Design System settings.

Note

To refresh available style variant options, click refresh Refresh style variants.

This is useful for when changes to the design system (like style variants or variable options) have been made in another browser window or by another user.

• Margin: Sets a component’s margin (the space around it) relative to other components on the page.

  • To set margins for all sides, click border-all All.
  • To set margins for each side individually, click border-separate Separate.

  Margin values can be set to any configured spacing variable for the page’s design system. Margin cannot be set an arbitrary value; it must use a design system variable.

Display logic tab [[]]¶

Standard display logic options are available to display or hide the component or feature.

Nested elements¶