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.

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

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.

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.

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.

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.

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.

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.

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...