Group

The group block is designed to organize and structure content effectively. It supports both constrained and full-width layouts, with built-in spacing to ensure content is neatly arranged within. The group block also scales responsively, maintaining side gutters for a clean and consistent look across devices. Additionally, you can enhance your design with a gradient graphic in the top right corner, adding a stylish accent while keeping your content visually cohesive and well-structured.

Default

bt1d-group

bt1d-group--layout-constrained

<div class="bt1d-group bt1d-group--layout-constrained">
  <h2>This is a group</h2>
</div>

By default, the max width of group blocks is set to 1280px on desktop and 100% on mobile with 16px on either side.

Full-width

bt1d-group--full

<div class="bt1d-group bt1d-group--full bt1d-group--layout-constrained">
  <h2>This is a fullwidth group</h2>
</div>

With the bt1d-group--full class applied, the group will span to the full width of the viewport or 100% of the container it is placed inside.

With Gradient

bt1d-group--has-gradient

<div class="bt1d-group bt1d-group--full bt1d-group--layout-constrained bt1d-group--has-gradient">
  <h2>This is a fullwidth group with gradient</h2>
</div>

With the bt1d-group--has-gradient class applied, the group will display a gradient graphic in the top right corner. (See the section of this page above, just below the page header.)