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 master/child pages. Using the Masthead on a master page automatically ensures that all child pages will have the same branded section at the top of the page. Updates to the Navigation component on the master page ripple through all child pages, so it’s easy to add a navigation link once—and see on all pages in the app.

  • Drag and drop the masthead into 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

Masthead properties

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

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

Spacing properties

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

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

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

Image 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 component.