Container

Preview

Basic

Container body content goes here.

With footer

Container body content goes here.

Usage

<cs-container header="Section title">
  Container body content goes here.
</cs-container>
<cs-container header="Section title" footer="Footer content">
  Container body content goes here.
</cs-container>

Properties

analytics-metadataContainerProps.AnalyticsMetadata

Specifies additional analytics-related metadata.

instanceIdentifier - A unique string that identifies this component instance in your application.

disable-content-paddingsboolean default: false

Determines whether the container content has padding. If true, removes the default padding from the content area.

disable-footer-paddingsboolean

Determines whether the container footer has padding. If true, removes the default padding from the footer.

disable-header-paddingsboolean default: false

Determines whether the container header has padding. If true, removes the default padding from the header.

fit-heightboolean default: false

Enabling this property will make the container to fit into available height. If content is too short, the container will stretch, if too long, the container will shrink and show vertical scrollbar.

Use this property to align heights of multiple containers displayed in a single row. It is recommended to stretch all containers to the height of the longest one, to avoid extra vertical scroll areas.

mediaContainerProps.Media

Use this slot to render a media element. Supported element types are 'img', 'video', and 'picture'. You can define different positions and sizes for the media element within the container.

content - Use this slot to render your media element. We support img, video, picture, and iframe elements.
position - Defines the media slot's position within the container. Defaults to top.
width - Defines the width of the media slot when positioned on the side. Corresponds to the width CSS-property. When this value is set, media elements larger than the defined width may be cropped, with 'object-fit: cover' centering it. Note: This value is considered only when position is set to side. If no width is provided, the media slot will take a maximum of 66% of the container's width.
height - Defines the height of the media slot when position on the top. Corresponds to the height CSS-property. When this value is set, media elements larger than the defined width may be cropped, with 'object-fit: cover' centering it. * Note: This value is only considered if position is set to top. If no height is provided, the media slot will be displayed at its full height.

variant'default' | 'stacked' default: 'default'

Specify a container variant with one of the following:

default - Use this variant in standalone context.
stacked - Use this variant adjacent to other stacked containers (such as a container, table).

Slots

default: Main content of the container.
footer: Footer of the container.
header: Heading element of the container. Use the header component.