Cont06 Expandable Container

General Info

Expandable Container

Description 

The component is based on the WCM Core Accordion component. The open/close functionality has been changed to using <details><summary> html tags instead of js.

The Base component version has also some styling options introduced for applying icons or changing labels color and size. 

Configuration Options

Items:

  • Multifield used to add items (components) from the list of available components enabled in the component's policy

Properties:

  • Single item expansion - Forces a single accordion item to be expanded at a time. Expanding one item will collapse all others.
  • Expanded Items - Items that will be expanded by default
  • Icon - Icon used for open/close functionality
  • Display size - Size of the label and icon
  • Label color - Color of the label text and icon

Sample Component Usage

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sit amet massa vitae tortor condimentum lacinia quis vel. Nulla facilisi nullam vehicula ipsum a. Quam vulputate dignissim suspendisse in. Porttitor massa id neque aliquam vestibulum morbi blandit cursus risus. Ullamcorper velit sed ullamcorper morbi tincidunt ornare massa eget egestas. Dui sapien eget mi proin sed libero enim sed faucibus. Montes nascetur ridiculus mus mauris vitae ultricies leo. Suspendisse sed nisi lacus sed viverra. Leo duis ut diam quam nulla porttitor massa id neque. Consectetur adipiscing elit ut aliquam purus sit amet luctus. Tempor orci dapibus ultrices in iaculis nunc. Amet consectetur adipiscing elit duis tristique sollicitudin. Eu volutpat odio facilisis mauris sit amet massa. Venenatis tellus in metus vulputate eu scelerisque felis. Ornare arcu odio ut sem. Sapien et ligula ullamcorper malesuada proin libero nunc consequat interdum. Arcu dictum varius duis at consectetur. Tincidunt arcu non sodales neque.

Test Form

Marketo Form Inside An Expandable Container

This is Marketo Form included inside an Expandable Container component

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sit amet massa vitae tortor condimentum lacinia quis vel. Nulla facilisi nullam vehicula ipsum a. Quam vulputate dignissim suspendisse in. Porttitor massa id neque aliquam vestibulum morbi blandit cursus risus. Ullamcorper velit sed ullamcorper morbi tincidunt ornare massa eget egestas. Dui sapien eget mi proin sed libero enim sed faucibus. Montes nascetur ridiculus mus mauris vitae ultricies leo. Suspendisse sed nisi lacus sed viverra. Leo duis ut diam quam nulla porttitor massa id neque. Consectetur adipiscing elit ut aliquam purus sit amet luctus. Tempor orci dapibus ultrices in iaculis nunc. Amet consectetur adipiscing elit duis tristique sollicitudin. Eu volutpat odio facilisis mauris sit amet massa. Venenatis tellus in metus vulputate eu scelerisque felis. Ornare arcu odio ut sem. Sapien et ligula ullamcorper malesuada proin libero nunc consequat interdum. Arcu dictum varius duis at consectetur. Tincidunt arcu non sodales neque.