Section

import {Section} from 'cx/widgets';

Sections are used to divide a larger body into distinct parts. A section optionally may have a header (title) and a footer.

Section 1

Aenean quis ullamcorper dolor. Phasellus ullamcorper sapien elit, ac pharetra nibh mollis sed.

Section 2

Aenean quis ullamcorper dolor. Phasellus ullamcorper sapien elit, ac pharetra nibh mollis sed.

Custom Header

Aenean quis ullamcorper dolor. Phasellus ullamcorper sapien elit, ac pharetra nibh mollis sed.

Index

<Section mod="card" title="Section 1">
    Aenean quis ullamcorper dolor. Phasellus ullamcorper sapien elit, ac pharetra nibh mollis sed.
</Section>

<Section title="Section 2">
    Aenean quis ullamcorper dolor. Phasellus ullamcorper sapien elit, ac pharetra nibh mollis sed.

    <FlexRow putInto="footer">
        <Button mod="hollow" icon="calendar"/>
        <Button mod="hollow" icon="calculator"/>
        <Button mod="hollow" icon="search"/>
    </FlexRow>
</Section>

<Section mod="card">
    <FlexRow align="center" putInto="header">
        <Heading level="4" style="color:lightblue">Custom Header</Heading>
        <Button mod="hollow" icon="close" style="margin-left: auto"/>
    </FlexRow>
    Aenean quis ullamcorper dolor. Phasellus ullamcorper sapien elit, ac pharetra nibh mollis sed.
</Section>

Copied!Cx Fiddle

FlexRow is commonly used to either arrange multiple sections horizontally or to arrange inner contents of a section or a header.

Configuration

Property	Description	Type
bodyClass	Additional CSS class to be applied to the section body.	string/object
bodyStyle	A custom style which will be applied to the body.	string/object
footer	Contents that should go in the footer.	config
footerClass	Additional CSS class to be applied to the footer.	string/object
footerStyle	A custom style which will be applied to the footer.	string/object
header	Contents that should go in the header.	config
headerClass	Additional CSS class to be applied to the header.	string/object
headerStyle	A custom style which will be applied to the header.	string/object
pad	Add default padding to the section body. Default is `true`.	boolean
title	Section's title.	string
baseClass	Base CSS class to be applied to the element. Default is 'section'.	string
class className	Additional CSS classes to be applied to the element. If an object is provided, all keys with a "truthy" value will be added to the CSS class list.	string/object
hLevel	Heading level. Default value is 3.	number
items children	List of child elements.	array
layout	Define an inner layout.	string/object
mod	Appearance modifier. For example, `mod="big"` will add the CSS class `.cxm-big` to the block element.	string/array
outerLayout	Defines the outer layout which wraps the widget.	widget
plainText	Set to `true` to avoid converting inner strings to templates. Default is `false`.	boolean
preserveWhitespace ws	Keep whitespace in text based children. Default is `false`. See also `trimWhitespace`.	boolean
putInto contentFor	Used with outer layouts. Specifies the name of the content placeholder which should render the widget.	string
style	Style object applied to the wrapper div. Used for setting the dimensions of the element.	string/object
trimWhitespace	Remove all whitespace in text based children. Default is `true`. See also `preserveWhitespace`.	boolean
vdomKey	Key that will be used as the key when rendering the React component.	string
visible if	Visibility of the widget. Defaults to `true`.	boolean

Documentation

Section