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.
• 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.
• 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.
• 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.

• Spacing: Sets the spacing of the component relative to other components on the page. Spacing can be managed for Top margin, Bottom margin, Left margin, and Right margin. All margins can be set to one of the following:

  • None
  • Extra Small
  • Small
  • Reduced
  • Regular
  • Increased
  • Large

Display logic tab [[]]¶

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

Nested elements¶