Layout components are fundamental building blocks of Chameleon that contain, pad, and align content within a given device or viewport.
| Table of Contents | ||||||
|---|---|---|---|---|---|---|
|
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-defaulttokendefault-alt- sets the background colour as specified by the--cds-color-background-default-alttokeninverse- sets the background colour as specified by the--cds-color-background-inversetokeninverse-alt- sets the background colour as specified by the--cds-color-background-inverse-alttokentransparant- 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 sectionclassName- 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 content within.
max-text: Runs to the size specified by the max-text tokenTo 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 tokenTo 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
tbd
Page Block
| Info |
|---|
It is recommended that your sections always start with a heading. |
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.
Using the exposed components:
| Code Block | ||
|---|---|---|
| ||
<Section element="section" mode="default">
<Container maxWidth="max-text">
<HeadingBlock
align="start"
description="Lorem ipsum description"
descriptionVariant="bodyM"
headline="Title"
headlineTag="h2"
headlineVariant="headlineXL"
/>
{children}
</Container>
</Section> |
Using <PageBlock>
| Code Block |
|---|
<PageBlock
heading={{
align: "start",
description: "Lorem ipsum dolor",
descriptionVariant: "bodyM",
headline: "Title",
headlineTag: "h2",
headlineVariant: "headlineL",
}}
maxWidth="max-grid"
mode="default"
>
{children}
</PageBlock> |
Internal notes
Section controls the background and paddings. It defaults to div now, but it can be section, aside, article, header, footer
Container controls the max-width and the values are S = 47.5 rem(760px). M = 72 rem (1152px), L = 90 rem (1440px), Fluid width = 100%. No defaults here for now.
Grid component can be configured with breakpoints only. No presets here, they should be done on a backend level. Library just provides the tool here.
Fluid Grid component is the one where we control items per row and preferred size and the rest is done by browsers without breakpoints involved. Two modes here – centered and standard. No default for now.