Column Component
UI Component
Changed on:
2 Apr 2024
Overview
A simple component that allows you to place other components in a column. Typically used to improve the layout and accessibility of items on a page, see a sample use case and the properties of this component below.| Plugin Name | Core |
|---|
Alias
fc.page.section.column
Detailed technical description
Sample Use Cases
The following sample is used to demonstrate how the Returns user experience can be altered by placing attribute cards containing the customer and fulfillment details into the descendants of the column component to improve the visual layout of the page.The following sample is used to demonstrate how the user experience can be improved by utilizing the`height` property to stretch descendant components to the full height of the column to enhance the visual layout of the page.Properties
| Name | Type | Required | Default | Description |
`width` | `CardWidth ( "quarter" / "third" / "half" / "two-thirds" / "full" / number (1-12))` | `No` | `full` | Define the width of this card on a 12-column grid. Takes either a named width i.e., "third", otherwise a numbered width between 1-12. On mobile devices, all widths will automatically change to 12 for the best responsive experience. |
`height` | `start/stretch` | `No` | `start` | Enables to stretch descendant components to the full height of the column.The `start` height indicates that the initial height of the descendant components is not changed based on the height of the column component.If the `stretch` height is applied, the descendant components inside the column component are stretched to the full column’s height. |
Configuration example
1{
2 "component": "fc.page.section.column",
3 "props": {
4 "width": "4",
5 "height": "stretch"
6 },
7 "descendants": [
8 {
9 // Your components here
10 }
11 ]
12}Version History
Recommended Placement
None
