Layout - photodow/wiki-helpers GitHub Wiki
Core
Layout component
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 - Examples
- 3. Nested - Logic - Example
- 4. Border - Logic - Example
- 5. Sticky - Logic - Example
Back links (7)
Content block (4)
- ...| If aside is true and contains children then Layout 5.3](#53-layout)] is used to wrap...
- ...aside is not provided or missing children than Layout 5.3](#53-layout)] is NOT included....
- rendered the Layout component helps lay the main content and the...
- ...See Layout for more
Content section (3)
- *When nesting children use with the Layout component's
8-4and nested option set to... - Content Section uses the Layout core component to position itself and body...
- ...content in the expected column layout. Refer to Layout functional specs for
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>