Need help with HTML/CSS for PnP Search Results Web Part

Brass Contributor

I have a PnP Search Results Web Part and I'm trying to change the style so that it looks like the news web part with the tile or list layout.  

 

This is what I have so far by using the Card layout: 

eahbxecrfash3q_0-1714673827426.png

 

I removed a few fields so that only the news title shows:

eahbxecrfash3q_1-1714673869322.png

 

Is it possible to adjust the HTML/CSS of the results so that it has one of the layouts below. If so, can someone please share the code?

 

Tile layout:

eahbxecrfash3q_2-1714673931243.png

 

 

List layout: 

eahbxecrfash3q_3-1714673950424.png

 

1 Reply

Hello @eahbxecrfash3q 

 

i can not help with the code, but here are more information about to start with custom layouts: https://microsoft-search.github.io/pnp-modern-search/create-custom-layouts/

 

Best, Dave