Promoted Links Web Part for Modern Pages

Promoted Links Web Part for Modern SharePoint Pages

This web part replicates the classic Promoted Links Web Part but with added features such as web part properties to change the background colour, size of background image and to select which promoted link list to use. You can download it here.

For more information on the full Cloud Design Box learning platform for modern SharePoint or custom workflows and design, Contact us via the website.

If you are interested in developing web parts using the new SharePoint Framework, this web part is a good example of:

  • loading jQuery from CDN
  • adding third party modules
  • making REST calls
  • configuring web part properties

You can find the complete source code in my GitHub repository at

As soon as I get chance, I will create some additional blog posts on how this web part was created, breaking down the different task lists.

While I work on that, please feel free to download the code and have a play yourselves!

5 thoughts on “Promoted Links Web Part for Modern Pages

  1. Carl Uttley

    Hi Tony, your webpart looks great. But how did you even get a Promoted Links list into a modern team site? Whenever I add a new app, promoted links is not an option. I’ve tried saving an existing promoted links list as a template so I can re-use it on a modern team site and link it to your web part, but again I don’t see my template within the apps list of my modern team site. Any info on how you created your list in the screenshot would be greatly appreciated.

      1. Tony Phillips Post author

        Hi Carl,

        Sorry your comment got lost in the spam so I’ve only just seen it. Glad you got it sorted. Yes, to get the promoted list template available in a team site would be to activate the collaboration lists feature.


  2. Tamas Purman


    How can I rename the solution. I want to display “Modern tiles” in site contents.

    Thank you

    1. Tony Phillips Post author

      Hi Tamas,

      You can rename the web part in the web part properties when adding it to the page. If you want to rename the solution in the web part picker, you will need to edit and recompile the code.



Leave a Reply

Your email address will not be published. Required fields are marked *