Skip to content
ibmdotcom-bot edited this page Nov 22, 2021 · 58 revisions

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

Dependencies (1)

Used by (4)

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



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. 4-12
1.2 8-4 Intended to be nested within 12 columns. 8-4


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

layout


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

layout--nested


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

layout--border


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

layout--sticky


Back to top


Website guidelines

Publishing guidelines (6)

Functional specs

Layout component (37)
Service (3)
UI component (34)
Utility (5)

Additional components

Carbon component (19)
Design only (9)
Feature flag (3)
Clone this wiki locally