Banner with Links (Department site banner)

Banner with Links is an excellent choice to make your Department Sites and Team Sites stand out.

Setting up the web part

On the site where you need to show the web part, create a new SharePoint list with the title [Quick Links]. This list will house the quick links shown underneath the banner.
The list should have the following fields:

  1. Title [default / no need to create]
  2. Icon [single line of text]
  3. URL [Hyperlink or Picture]
  4. Active [Yes/No]
  5. New Window [Yes/No]
  6. Display Order [Number]

Next, add below web part to the page:

Updating banner content

You can update banner heading, description text, and image in web art properties as shown below:

If you’d like to use the currently logged-in user name anywhere in your text, type in {firstname} in your text as shown in the default example.

Hiding or showing links

You can hide or show the quick links based based on what you need.
To enable the links below the banner, switch the toggle as shown below:

If you chose to show the links, you need to point the banner to a list where those links are. By default, the banner will look for the list named [Quick Links] but you can change this.
To change the source list, update the property as shown below:

Updating contents of links

You can update the text, the URL, and the icon for each link similar to how you update Quick Links web part. See the steps in section titled [Adding a new or updating an existing link] under this link: Full-width Quick Links

Updating banner style

Background color
You can choose the banner to have a solid background or a linear gradient.
To set a solid background, you can enter the background HEX color like this:

If you’d like to use a linear background, you can enter the background color like this:

Here is where you can create a custom gradient in seconds:

When done, just copy the code which will look similar to this into the web part property:
linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(238,14,66,1) 0%, rgba(44,14,69,1) 100%)

Text color
You can set any text color based on how it looks best with your background. Simply enter the HEX color as shown beow:

Links color
You can change the color of the links by updating the web part property as shown below: