Section container
Section container
Component demo
Interactive example
<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
.
|
|
|
|
|---|---|---|
|
|
The alignment of the container. |
|
|
|
If |
|
|
The alignment of the container. |
|
If |
Variants
Center align
Interactive example
<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><IcSectionContaineraligned="center"className={classes.sectionContainer}><divclassName={classes.contentContainer}><IcChiplabel="Americano"/><IcChiplabel="Cappuccino"/><IcChiplabel="Latte"/></div></IcSectionContainer>Full-width align
Interactive example
<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><IcSectionContaineraligned="full-width"className={classes.sectionContainer}><divclassName={classes.contentContainer}><IcChiplabel="Americano"/><IcChiplabel="Cappuccino"/><IcChiplabel="Latte"/></div></IcSectionContainer>Full height
Interactive example
<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><IcSectionContaineraligned="center"fullHeight><divclassName={classes.contentContainer}><IcChiplabel="Americano"/><IcChiplabel="Cappuccino"/><IcChiplabel="Latte"/></div></IcSectionContainer>