I just love the PnP Search web part as it allows us to bring forward the enterprise search solutions. Great work!!

My question is how to best handle conditional formatting. In the code below I have a requirement that site collections should have a green header color and anything else should be red. The code works but I have a hard time mixing content and css. Is there any guideline how this should be handled? Thanks

 {{#each items as |item|}}
                <div class="ms-Grid-col ms-sm12 ms-md6 ms-lg4">
                    {{#> resultTypes}}
                        {{!-- The block below will be used as default item template if no result types matched --}}
                        <div class="singleCard">
                                {{#eq RefinableString01 'STS'}}
                                    <li class="ms-ListItem ms-ListItem--document" style="background-color: green"  tabindex="0">
                                    <li class="ms-ListItem ms-ListItem--document" style="background-color: red"  tabindex="0">
                                <div class="cardInfo">
                                    <span class="HeaderImage" ><img  src="/sites/TestingReactSearchWebPart/ModernDisplaytemplates/classic_logo_large.png" alt=""></span>
                                    <span class="titleArea" style="word-wrap: break-word"> <h3><a  href="{{getUrl item}}">{{Title}}</a><br /></h3> </span>   
                                    <span class="ms-ListItem-secondaryText">Template: {{RefinableString01}}</span>
                                    <span class="ms-ListItem-tertiaryText">{{getDate Created "LL"}}</span> 
                                    <div class="ms-ListItem-selectionTarget"></div>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.