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. John Ventry

    Is there a list that needs to be created for this to work? I am using a modern communication site and I can add the web part. However, when I do I get a something went wrong with sploadererror:loadcomponenterror. Not sure what I did wrong or if something else needs to be activated or created.


Leave a Reply

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