Layout Lightning Web Component ReadMe (Managed Package)

For the managed package runtime, this page contains a Layout LWC ReadMe for each Vlocity release.

Managed Package app icon This information is for Omnistudio for Managed Packages. For Omnistudio on standard runtime, see Omnistudio Help.

Vlocity Insurance and Health Winter '20 and Vlocity CME Spring '20

The Layout Lightning Web Component is a flexible grid system arranging containers on a page or inside other containers.

Available c-layout Attributes

Attribute	Value	Type	Description
theme	slds, nds (Default: slds)	string	Sets the theme to use for the layout.
extraclass		string	Adds an additional class. To add multiple classes, use a space to separate each class, such as 'classone classtwo'.
horizontal-align	center, space, spread, end	string	Determines how to spread the layout items horizontally in the container.
vertical-align	start, center, end, stretch	string	Determines how to align the layout items vertically in the container.
pull-to-boundary	small, medium, large	string	Pulls layout items to the layout boundaries and corresponds to the padding size on the layout item component. See LayoutItem Lightning Web Componentpadding attribute.
multiple-rows		boolean	If set, layout items wrap to the following line when they exceed the layout width.

Example c-layout Component

<c-layout
  class="custom-slds-grid"
  theme="nds"
  horizontal-align="center"
  vertical-align="stretch"
  pull-to-boundary="medium"
>
  <c-layout-item size="3">
    {item.name}
  </c-layout-item>
  <c-layout-item size="1">
    {item.name}
  </c-layout-item>
  <c-layout-item
    size="1"
    alignment-bump="left"
    padding="around-medium"
    flexibility="auto,no-grow,no-shrink"
  >
    {item.name}
  </c-layout-item>
  <c-layout-item size="1">
    {item.name}
  </c-layout-item>
</c-layout>

Vlocity Insurance and Health Summer '19 and Vlocity CME Fall '19

The Layout Lightning Web Component is a flexible grid system arranging containers on a page or inside other containers.

Available c-layout Attributes

Attribute	Value	Type	Description
theme	slds, nds (Default: slds)	string	Sets the theme to use for the layout.
extraclass		string	Adds an additional class. To add multiple classes, use a space to separate each class, such as `classone classtwo'.
horizontal-align	center, space, spread, end	string	Determines how to spread the layout items horizontally in the container.
vertical-align	start, center, end, stretch	string	Determines how to align the layout items vertically in the container.
pull-to-boundary	small, medium, large	string	Pulls layout items to the layout boundaries and corresponds to the padding size on the layout item component. See LayoutItem Lightning Web Component paddingattribute.
multiple-rows		boolean	If set, layout items wrap to the following line when they exceed the layout width.

Example c-layout Component

<c-layout
  class="custom-slds-grid"
  theme="nds"
  horizontal-align="center"
  vertical-align="stretch"
  pull-to-boundary="medium"
>
  <c-layout-item size="3">
    {item.name}
  </c-layout-item>
  <c-layout-item size="1">
    {item.name}
  </c-layout-item>
  <c-layout-item
    size="1"
    alignment-bump="left"
    padding="around-medium"
    flexibility="auto,no-grow,no-shrink"
  >
    {item.name}
  </c-layout-item>
  <c-layout-item size="1">
    {item.name}
  </c-layout-item>
</c-layout>