Layout - carbon-design-system/carbon-for-ibm-dotcom-website GitHub Wiki
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.
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-4and - Content Section uses the Layout core component to position
- ...content in the expected column layout. Refer to Layout
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. |  |
required container
The children property allows the adopter to place their content within the correct column to be laid out.
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.
| 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 |
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.
| 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 |
optional boolean
Optionally each column can be set to stick or be fixed to the top of the page.
| 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>