--- schema_version: "1" id: 0f99e9638cd21ae4ccb8ce1e6849e5f485dd7331be5637cc3ea4d1915de855e3 title: LayoutItem Lightning Web Component ReadMe (Managed Package) collection: admin version: current locale: en-us portal_url: https://docs.salesforce.com/admin/current/en-us/xcloud/264-0-0/os_layoutitem_lightning_web_component_readme.md canonical_url: https://help.salesforce.com/s/articleView?id=xcloud.os_layoutitem_lightning_web_component_readme.htm&release=264.0.0&type=5 source_site: help.salesforce.com content_type: documentation content_hash: dc11a935bc5c215d4b1242e4756f83e5c8d851f03688166ad55bd224c464d959 description: For the managed package runtime, this page contains a LayoutItem LWC ReadMe for each Vlocity release. products: - Omnistudio release: "264" --- # LayoutItem Lightning Web Component ReadMe (Managed Package) For the managed package runtime, this page contains a LayoutItem LWC ReadMe for each Vlocity release. ![Managed Package app icon](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio_for_managed_packages-264-0-0-production-enus/aa2554ec-624a-4ee6-8da4-6435670e6e62/resources-global/_corporate/images/managedpackageicon.png) This information is for Omnistudio for Managed Packages. For Omnistudio on standard runtime, see [Omnistudio Help](https://help.salesforce.com/s/articleView?id=xcloud.os_omnistudio_standard.htm&language=en_US). ## Vlocity Insurance and Health Winter '20 and Vlocity CME Spring '20 The _LayoutItem Lightning Web Component_ is the basic element inside the parent _Layout Lightning Web Component_ container, grouping content together to create sections inside the parent container. You can add one or more `c-layout-item` components inside the `c-layout` component. ## Available c-layout-item Attributes

Attribute

Value

Type

Required

Description

size

1 through 12

number

  

Sets the relative space the layout item occupies. Applies to all device-types.

smallDeviceSize

1 through 12

number

  

Sets the relative space the layout item occupies on device-types larger than mobile. Defaults to same as size attribute if no value provided.

mediumDeviceSize

1 through 12

number

  

Sets the relative space the layout item occupies on device-types larger than tablet. Defaults to same as size attribute if no value provided.

largeDeviceSize

1 through 12

number

  

Sets the relative space the layout item occupies on device-types larger than desktop. Defaults to same as size attribute if no value provided.

flexibility

auto (columns grow or shrink equally as space allows), shrink (columns shrink equally as space decreases), no-shrink (columns don't shrink as space reduces), grow (columns grow equally as space increases), no-grow (columns don't grow as space increases), no-flex (columns don't grow or shrink as space changes)

string

  

Determines if the grid item is fluid so that it absorbs any extra space in its container or if it shrinks when there is less space. For multiple options, use a comma to separate each option, such as 'auto, no-shrink'.

alignment-bump

left, top, right, bottom

string

  

Specifies a direction to bump the alignment of adjacent layout items.

padding

horizontal-small, horizontal-medium, horizontal-large, around-small, around-medium, around-large

string

  

Adds padding to either the right or left side of the layout item, or to all sides of the layout item.
## Example c-layout-item Component ``` {item.name} {item.name} {item.name} {item.name} ``` ## Vlocity Insurance and Health Summer '19 and Vlocity CME Fall '19 The _LayoutItem Lightning Web Component_ is the basic element inside the parent _Layout Lightning Web Component_ container, grouping content together to create sections inside the parent container. You can add one or more `c-layout-item` components inside the `c-layout` component. ## Available c-layout-item Attributes

Attribute

Value

Type

Required

Description

size

1 through 12

number

  

Sets the relative space the layout item occupies. Applies to all device-types.

smallDeviceSize

1 through 12

number

  

Sets the relative space the layout item occupies on device-types larger than mobile. Defaults to same as size attribute if no value provided.

mediumDeviceSize

1 through 12

number

  

Sets the relative space the layout item occupies on device-types larger than tablet. Defaults to same as size attribute if no value provided.

largeDeviceSize

1 through 12

number

  

Sets the relative space the layout item occupies on device-types larger than desktop. Defaults to same as size attribute if no value provided.

flexibility

auto (columns grow or shrink equally as space allows), shrink (columns shrink equally as space decreases), no-shrink (columns don’t shrink as space reduces), grow (columns grow equally as space increases), no-grow (columns don’t grow as space increases), no-flex (columns don’t grow or shrink as space changes)

string

  

Determines if the grid item is fluid so that it absorbs any extra space in its container or if it shrinks when there is less space. For multiple options, use a comma to separate each option, such as `auto, no-shrink'.

alignment-bump

left, top, right, bottom

string

  

Specifies a direction to bump the alignment of adjacent layout items.

padding

horizontal-small, horizontal-medium, horizontal-large, around-small, around-medium, around-large

string

  

Adds padding to either the right or left side of the layout item, or to all sides of the layout item.
## Example c-layout-item Component ``` {item.name} {item.name} {item.name} {item.name} ```