Lost among the stars Orb found itself pulled into a planet made entirely of cubes. Something pulled him in! He wasn't the only one trapped in what seemed a limitless number of dimensions. Traps abound. Creatures both friendly and threatening heed his progress. But curiously this world is so intriguing for something much more lies below.

F.A.Q.


We get a lot of common questions and have answers at the ready to satisfy the curious and the cautious



Contact us!

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Popup Title

This section uses a container element to ensure the content looks right on every device. It’s centered with the class “Centered Container.”

Convert!

3-column card layout

Use these cards when you want to display content with an image, such as a blog post or product. It’s built with CSS grid to enable the 3-column layout. When you select the grid, you’ll see a red icon on the top right. Click the icon to edit the number of columns, the column gap, and more!

Blog Post 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Blog Post 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Blog Post 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Feature Layout

The feature layout is built with a flex layout, like the hero layout. Don’t like our typesetting? You can update every detail in the typography section of the Style panel.

You can also add spacing between the heading and paragraph, swap a video in for the image, or add a button. Just make sure to drop your button into the div block that contains this content.

F.A.Q.

Accordion style expand and collapse FAQ.

An accordion style F.A.Q. component that is vastly used in a lot of websites. In addition to the standard expand and collapse animations, I have added in a fancy little interaction to focus on each F.A.Q. item. The additional interaction can be easily removed as it's a separate interaction from the expand and collapse.

If you require any assistance in implementation or need any guide, feel free to text me. I'll get back to you as soon as possible.

Have fun cloning. 😉

Creating the structures

So, as usual, I tried to make the clone as easy as possible to be copied . Just copy the element named, 'Cloneable Area' and rename it or you can copy all the elements within that class.

Both question and answer are placed within the same row and container for easier management.

Main Interactions for expand and collapse

The main interaction involved here is 'Mouse Click (Tap)' that create the animation for expand and collapse. It is targeting the main container of each row, so that user can click on anywhere within the row/container to expand or collapse an item.

Interaction for icon

Using the same interaction trigger as above, I created an animation to rotate and resize the icon to shape it from a plus to minus.

A little touch-up animation for the paragraph that reveals on expand

To make things a little livelier, I added a nice little touch up to the paragraph by creating a slide in animation from below. So, instead of being still upon expand, it will slide in from below nicely.

Additional interaction to create focus/highlight on specific item (Optional)

I added a focus/highlight effect to make the item that's on hover stands out from the rest. This helps the user to focus on the item that they are reading.

This is definitely optional. You can remove this animation from the interaction setting. It's a separate interaction from the expand/collapse.