Layout

Core Utility

The Layout core component helps us to layout our different components with a more standard approach using Carbon’s 2x grid ^r2 and pre-approved layout types.

---

Table of contents

• 1. Type
• 2. Children
• 3. Nested
• 4. Border
• 5. Sticky

Dependencies (1)

• Carbon 2x grid

Used by (4)

• Content block
• Content group banner
• Content section
• Table of contents

Back links (8)

Callout (1)

• Should there be a dependency added for Layout with new

Content block (4)

• ...| If aside is true and contains children then Layout 5.3 is used to wrap...
• ...aside is not provided or missing children than Layout 5.3 is NOT included.
• rendered, the Layout utility helps lay the main content and the
• See Layout for more

Content section (3)

• _When nesting children use with the Layout utility's 8-4 and
• Content Section uses the Layout core component to position
• ...content in the expected column layout. Refer to Layout

Resources

• r1: Box folder

---

1. Type

required string

The different types allows an adopter to choose an approved layout option. The different types will layout an adopters content in different ways, and responsively behave

	type	description	visual
1.1	4-12	Full 16 column layout: 4 columns left, 12 columns right.
1.2	8-4	Intended to be nested within 12 columns.

Back to top

2. Children

required container

The children property allows the adopter to place their content within the correct column to be laid out.

Examples

Back to top

3. Nested

optional boolean

The nested option allows a given layout to sit comfortably within the Carbon 2x Grid allowing everything to continue to line up properly.

Logic

	condition	description
3.1	nested === true	If nested is true do not include the .bx—grid so it can be nested within Carbon 2x Grid. Everything should still align properly.
3.2	nested === false	If false render it as a normal Carbon 2x Grid including the .bx—grid	default

Example

Back to top

4. Border

optional boolean

The optional border is displayed at the bottom of the Layout providing a visual indicator for a change of topic. Typically used when nesting the component.

Logic

	condition	description
3.1	border === true	If border is true then the component’s border at the bottom should render.
3.2	border === false	If border is false then the component’s border should NOT render.	default

Example

Back to top

5. Sticky

optional boolean

Optionally each column can be set to stick or be fixed to the top of the page.

Logic

	condition	description
3.1	[data-sticky=“true”]	If a child’s data-sticky attribute is set to true then that column becomes sticky. By default it’s false.
3.2	stickyOffset === #	The stickyOffsett number will determine how far from the top of the page in pixels it will begin its sticky journey.

<Layout type="“4-12”">
  <div data-sticky="“true”">{content for column 1}</div>
  <div>{content for column 2}</div>
</Layout>

Example

Back to top