Header¶

The Header component displays a title or subtitle, allowing you to provide context for the page, or for individual sections on the page. You can also add buttons that use the Action Framework to the header.

Note

While it’s possible to create buttons using the Header component, for maximum flexibility, Skuid recommends using Ink’s Button Set component.

Using the Header Component¶

Note

The content below assumes you have a Skuid page and at least one working model.

To use the Header component, add a one to the page. Next, set properties:

Set Title and Subtitle properties by adding a specific string of text, by using the field picker to select and add merge variables for specific fields, or via a combination of the two. You may also leave either of these properties blank.

Note

To ensure the desired field is available for Titles and Subtitles, include that field in the model.

In the Header properties pane, decide whether you want a border separating the header from the next component, and adjust the component margins in the Styles tab.

Note

By default, margins are set to None, so title content will sit immediately adjacent to the left margin. Adjust this in the Styles tab, using the Left margin property.

If desired, add buttons to trigger actions on the model.

Note

Skuid recommends using Ink’s Button Set component.

Skuid on Salesforce¶

Warning

You can add a custom Salesforce button type to the Button Set component. However, if you deploy a Skuid page with that Button Set within the Salesforce Support Service Cloud, unexpected functionality may result.

Properties¶

(Just need to look up a property? Try going directly to the Property Library.)

Component properties¶

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.

Note

Changing this property does not change the visual appearance of the component. Visual styles are set in the Design System.

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.

Spacing: Sets the spacing of the Header relative to other components on the page. Spacing can be managed for Top margin, Bottom margin, Left margin, Right margin. All margins can be set to one of the following:
- None
- Extra Small
- Small
- Reduced
- Regular
- Increased
- Large
- Extra Large
- Huge
Note

These sizes are relative to one another; the baseline is determined by Design System settings.

Display logic tab [[]]¶

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

Nested elements¶

Button properties [[]]¶

When you add buttons to the Header component, these buttons have their own properties. All Header button properties are the same as those for Ink Button Set buttons.