Build clean, streamlined pages

Capsule takes the idea of Accordions to the next level, allowing you to choose where to place the content and trigger independent of one another. This opens up a whole a plethora of new possibilities when constructing and styling your pages.

Achieve complex page designs, with drag-and-drop ease

Capsule makes it easy to build impressive, complex content areas that can be revealed by your visitors with the click of their mouse. It also makes streamlining your page's content super simple, which is a win-win-win for you, your content and your visitors.

Toggles

You can place toggles on your page, for opening and closing content, separate from your content. This allows you the freedom to design your pages as you see fit. It also allows for you to take things further than an accordion style stack would normally.


Icons & Images

We provide a few built-in icons for use as your toggle. This allows you to get up and running quickly. But we've also built-in drop zones for your own custom images, allowing a great deal of design flexibility.

Styling

We've included settings for padding in the Capsule stack. This lets you change the look and feel of the stack's content a bit. We've also included an inset shadow toggle which can give the content a nice inset look.

Versatile

You can use multiple toggles for one Capsule content area on your page. You can also setup multiple content areas to be opened by a single toggle. This allows for unique, complex designs.

Start Open

You can choose to have the content area of the Capsule stack start open by default when the page loads.

Close All

Capsule allows you to tell a toggle that when it is opened it should close all other Capsule stacks on the page.

Alignment

Your toggle can be set to a left, right or canter alignment to help in styling your page.

Label

In addition to a toggle you may also add a text label next to the toggle.

Animation

Capsule allows you to adjust the animation style and speed for each Capsule toggle.

Samples

Open, close, open, close, open, close, open...

Below we've built several different samples of the Capsule stack at work. For more information be sure to visit the Capsule product page.

Basic Usage

Below we have two examples of Capsule, side-by-side in a Foundry columns stack. We've built them to work independently of one another in this example. Both samples are using icon toggles as their method of allowing the visitor to open the Capsule's content.

Show Content
Image
Header

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.

Show Content
Image
Header

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.


Image Toggles

Here we have a very similar Capsule stack setup as the ones above, but this time, we're using an image toggle instead of the built-in icon choices. This image, and many others, come as a part of the stack in the Images section of the Stacks Library.

Image

Header

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris.

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.


Multiple Toggles

In this sample we use two toggles that both target the same Capsule content. We have one toggle outside of the content and the other inside, at the bottom of our content. This allows the content to be closed from the bottom of the container in this case. We've also styled this content with padding, a background color and an inset shadow using some of Capsule's built-in settings.

Your Label
Image

Header

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris.

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.

Image

This is a short little note.


Multiple Content Areas

Here we've paired multiple content areas with one, single toggle. Switching on that toggle will open all three Capsules, which we've placed side-by-side in a Foundry columns stack.

Open Close
Image
Capsule One

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.

Image
Capsule Two

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.

Image
Capsule Three

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.


Start Open

In this example we've placed our toggle below the content, as well as started our toggle in the "Start Open" position so that our Capsule's content is showing when the page loads.

Capsule Content

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris.

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.

  • Item Name $20
  • Item Name $20
  • Item Name $20
  • Item Name $20
  • Item Name $20
  • Item Name $20

Read More Buttons

Often times you'll want to keep pages tidy, giving your visitors just a small bit of information to start with and providing them a Read More button to take them to a page with further information. With Capsule you can simply hide that extra content and allow them to access it with a Capsule toggle, as seen here in this example.

Here's our content...

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris.

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet...

Image

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet. Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.

Capsule Content

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet. Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.

Capsule Content

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet. Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.

Read More Close

Scratching the surface

The Capsule stack is truly unique. These are just a few of the many things you can do and build with this stack. Pair Capsule with your own unique content, and the sky is the limit.

Documentation

What does this setting do?

In addition to the tutorial walk through video above we also offer detailed documentation for each setting within this stack.

You can find the full documentation and tutorials for Capsule, as well as all of our other products in the Elixir Support Hub.

Requirements

What will you need?

Capsule relies on the Stacks API to load icons and other tools needed for features in this stack. Let's look at the required software as well as the browser support for this stack.

What you need

As mentioned, we use the latest Stacks API for the Capsule stack to help facilitate its functionality. You'll need the following tools to make use of Capsule for your site:

  • RapidWeaver v8 or newer
  • Stacks v4 or newer
Browser support

This stack is designed with modern browsers in mind to give your visitors the best experience possible. Capsule will work nicely in the most recent versions of these browsers:

  • Safari
  • Firefox
  • Chrome
  • Edge
elixir

THE FORGE. Stay up to date on future versions of Elixir products, as well as important news, updates and more through our newsletter.

Re-Download Purchases

Use your email address to look up your previous orders and retrieve download links.


© 2006-2021 Elixir Graphics

RapidWeaver is a Registered Trademark of
Realmac Software Limited