As my organization is slowly getting used to the look of modern SharePoint sites that go with a Team site, I am getting more and more questions about how to create those “buttons” that some of our pioneers added to their site.
For Classic sites I once made an overview of the options for Summary Links, which is a web part to store lists of links, with styling options. The equivalent in Modern sites is the Quick Links web part.
Now we can have a debate on the “Quick” aspect of Quick Links, but let’s not go into that and let’s focus on the ways you can make them look. (But if you are curious, you may want to read this article by the Nielsen Norman Group)
How did I prepare?
- In one of my SharePoint sites, I created a new page and added a header from the new Stock Images (👍 nice!)
- I added a one-column section
- I added a Quick Links web part to the section
- I added some individual links with either an image (Web search), an image from the new Stock Images option (again: nice!) or an icon (also much-appreciated functionality).
- To some links I added a description.
This is the result:
Now you have a number of options for how those 8 links are shown.
Of course in a real-life situation you would not want to mix images and icons but for demonstration purposes it makes sense.
6 Web part layout options
When your page is in edit mode, and you click the edit icon for the web part, you get 6 options for layout. Each option can have sub-options.
“Compact” is the default option, as shown in the screenshots above. If I uncheck “Show image in layout” the images and icons are removed.
“Filmstrip” gives a large emphasis on the image. You can move from left to right with arrows, and on the bottom you will see an indication that there’s more than these 4.
“Grid” shows the links in tiles with large images, again not displaying default icons.
“Buttons” has a ton of options:
Let’s show a few:
And the option that is very popular in my organization:
So the Buttons option alone has 72 display options!
The “List” layout has 4 options: with or without icon, and with or without description. It looks like the Buttons option with the icon on the left, but it is slightly different when you toggle between the two.
And finally there is the “Tiles” option, which shows your links in squares. There are 5 sizes, and for the smallest 3 you can decide whether you want to show just the icon, or only the image. I am sharing the two most extreme options.
So, all in all you have 88 options to choose from!
But wait, there’s more: 4 section background colours
When you edit the section, you can determine the columns, but also select one of 4 colour options for the section background from left to right: none (as shown in the screenshot), neutral, soft and strong. The exact colours depend on the theme of the site.
So, multiply the 88 options of the web part with the 4 background options and you get…352 options!
These are the options:
This is the default Compact option with images with 3 backgrounds:
When you have selected a Link option with a fill-in colour, such as the Button (fill colour) or the Tiles, and you use the strong background, the colour of the buttons will revert to white, for maximum contrast.
There’s 352 ways to make a nice list of links on your SharePoint page.
It is easy to switch from one style to the other so you can play around until you have found the best style for your purposes.
I would not quickly select one without a title – I have clicked too many image-only buttons that led to something I had not expected or wanted. Tell people what they can expect or do and do not leave them guessing. Nielsen-Norman group have many suggestions for link names with good “information scent”.
What’s your favourite Quick Link style?
Note: I have recently switched to the WordPress’s Block Editor. This has changed the way image captions are being displayed.