if I drop in a flex with two flex items, there is no background colour option for any flex or a flex item, I can enter in the css classes 'bg-blue-400" for each individual flex item, am I missing something
Drop a section into each Flex item, then you can style the bg however you like. If you want to alter all the flex backgrounds together, turn the section into a global, like this…
Dan thanks I did try that before, just an extra step to target the flex item, was hoping just for a control in each for , no issues
I discussed having bg colors in flex today with @bon, but we’re thinking where does it end?! You add background colour, then you want background image… then gradients, then some more options… and suddenly Flex has a lot of options in it that aren’t relevant to most people.
At the moment we’re trying to keep each core component true to themselves.
Having said that we do have some updates coming to the core components, based on everyone’s initial feedback, so look out for those next week 
Dan no issues, I have been using section for these kind of things,
Aloha Dan,
The more I work with Elements the more I’m beginning to think that there should be a core BACKGROUND component (like Foundry). This would provide all of the background option and could then be used in either a container or a flex.
My feeling is that Elements is driving a little close to the underlying CSS/Tailwind, which does not make things that easy for the novice. Some of the properties and components could be broken into more meaningful elements.
Another one that comes to mind is SPACING (also something in Foundry). I found this stack to be incredibly powerful and useful, and Elements could certainly benefit from something like this, especially when viewed from the novice user’s point of view.
I understand a lot of the reasoning behind the Elements visual language. But when viewed through the lens of the novice/non-coder user, it would be far more meaningful to use a more descriptive natural language. The power user will always still be able to perform the mental gymnastics to convert this language into the underlying model.
Just some thoughts.
Great feedback, thank you so much, there’s lots to think about there!
I think the Section Component covers all this and more, what are we missing here? Or maybe you’d just like us to rename it to Background?
This is on purpose, we want to make the core components REALLy powerful, so people can build ANYTHING they want. We don’t want to dumb them down.
Once we have more pre-built sections, we think most new/novice users will mainly use those.
Hmm, most of our components have spacing on them, not sure we need another spacing component. What Components are you missing spacing on?
Let me know your thoughts!
Aloha Dan,
Yes, I realize the Container or Section has this capability built in. My question was whether introducing a BACKGROUND component would simplify it and, in turn, the CONTAINER and SECTION. Currently, this functionality is duplicated in those two components, which makes me think it should be encapsulated in a single component that can then be used in either of those components if needed.
When trying to build something, say where you have a background color and then an image over it. Currently, you would have to put a section within a section, which might be a little heavyweight. I don’t know the size of these components, so it might be a non-issue.
The same is true for the SPACING idea. It is not that components don’t support spacing, but rather that a separate component might be more intuitive and lightweight. When I look at how I use this in Foundry 3, it is incredibly handy for controlling my layouts.
I’m not saying what Elements has is bad or that it cannot do the same thing. However, the question is more about whether it is a lighter-weight and more intuitive solution.
Yes, completely understand. I discussed with @bon today about adding container options to the Section for the next beta. I think the changes we’re making will make you and a lot of other testers happy 
We talked about adding a separate spacing component, but doing so you end up having to add the spacing component to EVERYTHING (much like your issue with having to put a container in a section), and this creates complexity… It also creates a lot of Div soup and we don’t like DIV soup round these parts
Interesting thread.
Whilst going back over the Dev Diaries and then looking at the example projects, I’m still having difficulty understanding the differences and usage between containers and sections.
There seems to be a lot of overlap and I’m wondering if the functionality couldn’t be condensed into one component.
Like @handshaper, I’ve thought having background options in grids and flexes would be good rather than needing to add another element to the stack.
In a practical sense it probably doesn’t matter but when I look at the ‘Jenny from the block’ examples I see:
Section
Container
Grid
Grid Item
Section
Flex
Flex Item
Heading
This seems a lot of items for a fairly simple (looking) layout. And this is only the text section, not the image part.
What’s the correct way to add an infinite space somewhere on a page?
Say I want to add an expanding black space directly above (or below) the footer so no matter how big the window is sized there’s always the appropriate background colour.
I look forward to seeing the changes.
A section contains some things that might be handy in a container, particularly the sizing options.
I have been using this approach as well, but I have found that if I have a heading inside the section, the heading is suddenly centered unless its text is wider than the section width.
Note: this also happens if I use a container.
just a quick one on sections the default rounding, I would prefer the default be zero
1 Like
This will be fixed in the next beta.
Yup, agreed!
Hmm, you could use a section? or a custom component…
Paste the following HTML into the Template area and then change the 100px to whatever size you need.
<div class="pt-[100px]">
</div>
I would say it depends on what other components are places above/below where you’re trying to add the spacing.
You’re either going to use the padding or margin on a component, or wrap a group of components inside a Section and then use the padding/margin on the Section.
But like I say, it depends on how you’ve build/designed your page 
There is a semantic purpose for sections. There is not a semantic purpose for divs.
The <section> HTML element represents a generic standalone section of a document, which doesn’t have a more specific semantic element to represent it. Sections should always have a heading, with very few exceptions.
The <div> HTML element is the generic container for flow content. It has no effect on the content or layout until styled in some way using CSS (e.g. styling is directly applied to it, or some kind of layout model like Flexbox is applied to its parent element).
Please allow Elements to use them correctly.
