Compound Components


How to add space or break line between items

  1. [Component] Add Snippet and set up option as followed
2. Insert the Snippet component between two desired items


How to set up an image

1. [Component] Add image

2. Edit component name

How to upload own image

  1. To upload your own image, select the following option

  1. To upload a URL link, select the following option


How to set up a gallery

Grid format

  1. [Wrapper] Add gallery and set up options as followed 

(*row size indicates the # of images that will be displayed in each row)

2. [Component] Nest up to 6 image components per row inside the gallery wrapper

Swiper format

  1. [Wrapper] Add gallery

2. [Component]  Nest image components you desire inside the gallery wrapper


How to set up an accordion

Final set up

  1. [Wrapper] Add a section and set up accordingly

2. [Wrapper] Nest 1 section and 2 events inside the “Accordion” section and name them accordingly

Title & Border

  1. Set up “Title & Border” section accordingly

1.1. [Wrapper] Nest 1 section inside the “Title & Border” section and name it “Title”

1.2. [Component] Nest Snippet inside the “Title” section and name it “Title Copy”

     

1.3. [Component] Name snippet and type the title text into the Embedded Code area

     

Close button

  1. [Event] Add and nest button inside the Closed” event
           1.1 Set up the option and styles of the “+” button as followed

Open button

  1. [Event] Add and nest 1 button and 1 section inside the Open” event
         1.1. Set up the option and styles of the “-” button as followed

Body

           1.2. Set up the option and styles of the “Body” section as followed

1.3. Nest snippet inside “Body”

      

1.4. Name snippet and type body text into the Embedded Code

    

Bottom border for support accordion

(note: this adds a horizontal line after the last accordion item)
  1. [Wrapper] Add Section, name it “Horizontal Line” and set up accordingly


Reset: accordion

(note: this allows the viewer to see the accordion closed initially with every interaction)

(note: ensure that each accordion is set up with and linked to the action component)

  1. [Wrapper] Add Action and name it “Reset: Accordion”

  2. Set up options as followed

(note: the variable label must match the accordion section name that it is linked to)


How to set up a download button

  1. [Component] Add image and upload the button icon

*refer to our guide on “How to set up an image” for additional help

  2. Upload the downloadable content (JPEG or PDF) to Google drive

  3. Open up the content and follow the steps as shown

3.1. Click on “Get shareable link”

               

3.2. Copy link

            

                3.3. Paste the link into the image component


How to set up a horizontal line

  1. [Wrapper] Add Section, name it “Horizontal Line” and set up accordingly




There is no content with the specified labels