Masthead

The Masthead is a container component that groups other components commonly used at the top of a page into a Responsive Grid, adding a Navigation component, a Search Component, and an Image component that can be used to pull in a company logo.

Using the Masthead Component

While the Masthead can be used on any page, where it really shines is with principal/dependent pages. Using the Masthead on a principal page automatically ensures that all dependent pages will have the same branded section at the top of the page. Updates to the Navigation component on the principal page ripple through all dependent pages, so it’s easy to add a navigation link once—and see on all pages in the app.

  • Add a Masthead component to a page.
  • Click Add Component and choose from the dropdown:
    • Add Logo
    • Add Navigation
    • Add Search
  • Need to space out the three components across the masthead? Use Add Spacing between components.
  • Want to move components to a different location in the Masthead? Just drag and drop.

Once the components are laid out in the Masthead, use their individual properties to configure them.

Properties

Component properties

General tab [[]]

  • Positioning: Determines how the Masthead behaves when the page is scrolled.
    • Scrolls with Page: The Masthead scrolls with all other components.
    • Fixed: The Masthead is fixed to the top of the page and does not scroll (“sticky masthead”).
    • Fixed when at top: If the masthead is not inherently located at the top of the page (for example, it’s beneath a large banner image), it will scroll until it reaches the top, and then become fixed there.
  • 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.
  • Unique ID 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: Style variants are created and set in the Design System Studio. Some components have pre-defined variants for a specific aspect of a component’s style. Also, Skuid builders can style and customize elements to create their own themes within the DSS. These themes will dynamically populate as selectable values in the Style Variant dropdown menu.

    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

Spacing properties
General Tab [[]]
  • Change order: Left and right arrows move the selected spacing item left or right on the masthead.

  • Unique ID Skuid automatically generates an alphanumeric Id for the element; if preferred, give it a practical name.

  • Flex ratio: This sets the size of this spacing division relative to other items in the mastheads. For example, if there are two items in the masthead, and the flex ratio for each is 1, they will each take up ½ of the masthead. If one has a flex ratio of 2, and the other has a flex ratio of 1, the first one occupies ⅔ of the grid, and the second one occupies ⅓ of it.

  • Min width: Sets a minimum width for the spacer. When the minimum width is exceeded, the grid division will stack above or below other masthead items. This can be specified using px, em, rem, %, vh, or vw measurements.

    Note

    • Em, %, vh, or vw are more responsive to screen size.
    • Ensure the division’s minimum width is at least as wide as its contents.
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: Style variants are created and set in the Design System Studio. Some components have pre-defined variants for a specific aspect of a component’s style. Also, Skuid builders can style and customize elements to create their own themes within the DSS. These themes will dynamically populate as selectable values in the Style Variant dropdown menu.

    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.

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.

Logo properties

When you add a logo to the Masthead, the properties are the same as those for the Image component.

Search properties

The properties for Search added to the Mastheads are the same as those for the Search.