Page for tests
This is a sample heading text
Lorem ipsum dolor sit amet, consectetur elit, sed do eiusmod tempor. incididunt ut labore et dolore magna aliqua. Nisl tincidunt eget nullam non. Quis hendrerit dolor magna eget est lorem ipsum dolor sit. Volutpat odio facilisis mauris sit amet massa.
Section - Flexbox - 100%
- Section has default Flex > Column > 100% width
- Inside of it is default Bricks Container
.brxe-section {
display: flex;
align-items: center;
flex-direction: column;
width: 100%;
margin-left: auto;
margin-right: auto;
}
.brxe-section {
padding-top: var(--section-space-m);/*64px*/
padding-bottom: var(--section-space-m);
}
Container - Flexbox - 1280px
The Container has a default width of 1280px (.page-width), is centered, and uses the flexbox.
.brxe-container{
display: flex;
flex-direction: column;
width: var(--page-width);
align-items: flex-start
padding-right: var(--section-space-x);/*42-24px*/
padding-left: var(--section-space-x);
margin-left: auto;
margin-right: auto;
}
Bricks Block - Flexbox with 100% width
- The Block uses a default width of 100% instead of a page width 1280px width like the Container.
- Use the Block element to create equal column/row layouts inside a Section or Container.
.brxe-block {
display: flex;
align-items: flex-start;
flex-direction: column;
width: 100%;
}
Bricks Div - Block
- The Div element in Bricks is a plain, unstyled div. It’s the most generic element to group and lay out your content.
I am a heading
Here goes your text ... Select any part of your text to access the formatting toolbar.
