SXA Page List Item Css class field purpose

Question

So when I created a new rendering variant for Page List I noticed there was an Item CSS class field.

I expected this would add a class to my li elements of article-item but it does not. Is a Page List not considered a list rendering?

In the Page List.cshtml, it clearly doesn't add any dynamic classes to the li elements.

What is the purpose of this field?

Dawid Rutkowski · Accepted Answer · 2019-09-20 07:37:55Z

1

This field in the Rendering Variant root item is used as a global class for the whole Page List. Take a look:

If you would like to assign classes to certain Page List items you need to do it on the certain variant item, like this:

answered Sep 20, 2019 at 7:37

Dawid Rutkowski

6,91913 silver badges29 bronze badges

Yeah so what is the point of the Item Css class field? ie. the field under the red square in your first screenshot. Sorry if my question wasn't clear with the misleading highlighting. Familiar with the Css Class field :)
– Jen
Commented Sep 23, 2019 at 0:59
@Jen As you can see on the first screenshot the purpose of that field is to be able to add "global" CSS class to the component. You don't need anything more - that one class is enough. Just use a proper CSS selector to target child il elements.
– Dawid Rutkowski
Commented Sep 23, 2019 at 7:17
Sorry - The "Css Class" is the global one. What is the "Item Css Class field" that is underneath (from the first screenshot). It says its used in list renderings - which I thought would include page lists.
– Jen
Commented Sep 24, 2019 at 4:41
This is a name of the field on an item which stores the CSS class name.
– Dawid Rutkowski
Commented Sep 24, 2019 at 7:06
I'm confused if we're talking about the same thing or not - Css Class stores the name of the css class that gets output at a global level. What does Item Css class field do? Completely separately field.
– Jen
Commented Sep 24, 2019 at 7:08

| Show 2 more comments

1 Answer 1