Page Comparison

Layout components are fundamental building blocks of Chameleon that contain, pad, and align content within a given device or viewport.

Section

A section is used to break up your page into meaningful chunks of information by wrapping your content in meaningful semantic HTML. Sections run to the full width of the viewport or device and provide top and bottom padding.

Props

• mode - Sets the background colour of the section and tells its children what “mode” they are in.

  • default - sets the background colour as specified by the --cds-color-background-default token

  • default-alt - sets the background colour as specified by the --cds-color-background-default-alt token

  • inverse - sets the background colour as specified by the --cds-color-background-inverse token

  • inverse-alt - sets the background colour as specified by the --cds-color-background-inverse-alt token

  • transparant - sets no background colour

• element - sets the semantic element in the HTML. See MDN Web Docs for more information on which element to use for your desired used case.

  • "div", "article", "aside", "section", "header", "footer"

• removeDuplicateSpacing
  When two or more sections are stacked all but the first section will have their top-padding set to 0. This avoids the appearance of “double padding“. Set this prop to false to disable this setting and maintain the “double padding“

• removeAllSpacing - Removes all padding from the section

• className - Allows you to specify a custom className to override this component and it’s children’s styles.

Container

The container is used to contain groups of content within a section. The container controls the horizontal width of your content and provides left and right padding and margin.

Props

maxWidth - Specifies the maximum width of the container.

• max-text: Runs to the size specified by the max-text token

  • To override this, change the value of --cds-container-size-width-max-text

• max-grid: Runs to the max grid width (12 cols) as specified by the max grid token

  • To override this, change the value of --cds-container-size-width-max-grid

• full-width: Runs to the edges of the viewport or device

disableGutters - Removes left and right padding if set to true

className - Allows you to specify a custom className to override this component and it’s children’s styles.

Grid

tbdChameleon’s grid system uses containers and grid items to layout and align content across a 12 column grid. Using flexbox, our grid system is is fully responsive and allows you to define layout behaviour across many breakpoints.

The grid component is actually made up of two sub components; gridContainer, and gridItem.

Grid container

<gridContainer /> acts as the outer container for the grid.

Props:

• rowSpacing - Defines the vertical space between <gridItem/> rows. Accepts spacing tokens.

• columnSpacing - Defines the horizontal space between <gridItem/> columns. Accepts spacing tokens.

• wrap - Defines the flex-wrap css property.

• direction - Defines the flex-direction css property.

• tag - Defines the components HTML tag

• alignContent - Defines the align-content css property.

• justifyContent - Defines the justify-content css property.

• alignItems - Defines the align-items css property. It's applied for all screen sizes. works when component - 'container'

• className - Allows you to specify a custom className to override this component and it’s children’s styles.

Grid item

<gridItem /> - wraps each individual column

The grid item has the following props which accept an int representing the number of columns you want to span for that particular breakpoint: xxs, xs, sm, md, lg, xl , xxl.

Item widths are set in percentages, so they're always fluid and sized relative to their parent element.

<GridContainer
  alignContent="start"
  alignItems="start"
  columnSpacing="6"
  direction="row"
  justifyContent="start"
  rowSpacing="2"
  tag="div"
  wrap="wrap"
>
  <GridItem xxs={12} xs={8} sm={6} md={4} lg={2} xl={1} xxl={1}>
    {children}
  </GridItem>
</GridContainer>

Fluid-grid

The fluid grid differs from the standard Grid component because it doesn’t use breakpoints. Instead content is fluid and will grow and shrink based on the preferences passed via the following props:

• tag - Defines the components HTML tag - Choose from ul, ol, or div

• className - Allows you to specify a custom className to override this component and it’s children’s styles.

• cardsPerRow - sets the maximum number of items per row.

• preferredCardSize - sets the preferred item width. This prop influences width differently for "fluid” and fixed-{} variants.

• variant - sets the fluid grid variant.

variant

Choose between "fluid", "fixed-centered", and "fixed-start"

• Items in a fluid grid using the "fluid” variant will grow or shrink to occupy the width of the container divided by the cardsPerRow prop. The preferredCardSize prop sets the minimum width an item should occupy. If the space provided results in an item width less than preferredCardSize then the grid will reduce the number of items per row until the item’s width is ≥ to preferredCardSize.

• The width of items in a fluid grid using the "fixed-centered” or “fixed-start” variant will always equal the size set by the preferredCardSize prop. The grid will attempt to add as many items as will fit in a row up to cardsPerRow - until the space available is less than preferredCardSize, then items will occupy 100% of the container width, stacking vertically.

The only difference between "fixed-centered” and “fixed-start” is the horizontal alignment.

• “fixed-start” will honour the start position of the language set by the site, meaning they will start and flow LTR or RTL.

• "fixed-centered” will centre the fluid grid and items that flow onto new lines will be centred horizontally.

Page Block

You can use the <PageBlock/> component to quickly add a <Section/>, <Container/>, and <HeadingBlock /> to the page to maintain clean code and to ensure correct setup.