Section container - Intelligence Community Design System

Show navigation section

Component demo

Interactive example

Web component

React

Show full code

<ic-section-container>
<divclass="content-container">
<ic-chiplabel="Americano"></ic-chip>
<ic-chiplabel="Cappuccino"></ic-chip>
<ic-chiplabel="Latte"></ic-chip>
</div>
</ic-section-container>

<IcSectionContainerclassName={classes.sectionContainer}>
<divclassName={classes.contentContainer}>
<IcChiplabel="Americano"/>
<IcChiplabel="Cappuccino"/>
<IcChiplabel="Latte"/>
</div>
</IcSectionContainer>

Section container details

Props

All components also accept native properties supported by the DOM, such asclassName and style .

Name	Description	Default
Property aligned Attribute aligned	The alignment of the container. type: IcAlignment - "center" \| "full-width" \| "left" \| undefined	"left"
Property fullHeight Attribute full-height	If`true` , the standard vertical padding from the container will be removed. type: boolean - boolean \| undefined	false

Property

aligned

Attribute

aligned

The alignment of the container.

type: IcAlignment - "center" | "full-width" | "left" | undefined

Default: "left"

Property

fullHeight

Attribute

full-height

Iftrue , the standard vertical padding from the container will be removed.

type: boolean - boolean | undefined

Default: false

Variants

Center align

Interactive example

Web component

React

Show full code

<ic-section-containeraligned="center">
<divclass="content-container">
<ic-chiplabel="Americano"></ic-chip>
<ic-chiplabel="Cappuccino"></ic-chip>
<ic-chiplabel="Latte"></ic-chip>
</div>
</ic-section-container>

<IcSectionContainer
aligned="center"
className={classes.sectionContainer}
>
<divclassName={classes.contentContainer}>
<IcChiplabel="Americano"/>
<IcChiplabel="Cappuccino"/>
<IcChiplabel="Latte"/>
</div>
</IcSectionContainer>

Full-width align

Interactive example

Web component

React

Show full code

<ic-section-containeraligned="full-width">
<divclass="content-container">
<ic-chiplabel="Americano"></ic-chip>
<ic-chiplabel="Cappuccino"></ic-chip>
<ic-chiplabel="Latte"></ic-chip>
</div>
</ic-section-container>

<IcSectionContainer
aligned="full-width"
className={classes.sectionContainer}
>
<divclassName={classes.contentContainer}>
<IcChiplabel="Americano"/>
<IcChiplabel="Cappuccino"/>
<IcChiplabel="Latte"/>
</div>
</IcSectionContainer>

Full height

Interactive example

Web component

React

Show full code

<ic-section-containeraligned="center"full-height="true">
<divclass="content-container">
<ic-chiplabel="Americano"></ic-chip>
<ic-chiplabel="Cappuccino"></ic-chip>
<ic-chiplabel="Latte"></ic-chip>
</div>
</ic-section-container>

<IcSectionContainer
aligned="center"
fullHeight
>
<divclassName={classes.contentContainer}>
<IcChiplabel="Americano"/>
<IcChiplabel="Cappuccino"/>
<IcChiplabel="Latte"/>
</div>
</IcSectionContainer>

Last reviewed 31 May 2024 .