When you use a Container, the Background can be set to one of several things like Card or Accent. This can help clearly define areas or blocks on a page.
However, when you use a Custom Collection, you are only able to define “Card” or “None” on the background, but then it is just assigned to the background of each element in the collection, not the overall Container of that Custom Collection.
Here is what a Container with Card background and a Card Collection inside of it.
Here is the Custom Collection where the overall container (background) isn’t shown, but the background is there for each element inside.
Feel free to vote on your own post!
There are way with CSS to workaround this, but I agree that there must be the options.
1 Like
Thanks @MaximeBaker, that is a valid point as with much of what we can do, but dealing with custom styling just to get it to look like the other built in components seems like a lot of work for basic consistency.
1 Like
This has been a thorn in my side since custom collections were released a few years ago. I hate the lack of design consistency.
2 Likes
Do you custom style it, or just deal with it?
1 Like
I just deal with it. I try to keep CSS to a minimum and only use it when necessary. In my case I ultimately went without a background color everywhere else to keep consistency. I have sections where I use standard collections inside a container and other sections where I need to use a custom collection which can’t be placed in a container. I like using color backgrounds to help draw the eye to the important information. Otherwise there is so much white and grey that everything blends together in my opinion. Switching to a dark theme helps in some cases, but still presents some visual challenges.
Since a custom collection is essentially a repeating container, it only makes sense to me that it should have the same styling options as a container.
2 Likes
