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.