Changing the world, one site at a time…

Stacks Image 611

CAPSULE

SIMPLE SAMPLES. Capsule is great for organizing your pages and streamlining their design. 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 Setup

Below we have two examples of Capsule, side-by-side in a responsive columns stack. We've built them to work independently of one another in this example. Both samples are using icon toggles.
Show Content
Stacks Image 2256

An Important Headline

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
Stacks Image 2258

An Important Headline

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 Stacks Media drop down.
Stacks Image 2265

An Important Headline

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.

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

An Important Headline

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. 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.

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.

Platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.

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.

Multiple Content Areas

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

An Important Headline

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

An Important Headline

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

An Important Headline

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

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.
An Important Headline
Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris.

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

Paired with Bloom

In this example we've paired the Capsule stack up with our Bloom stack to give you another idea of how you might make use of this versatile tool. We're using the info and close icons for this example as well as styled it with padding and a nice inset look.

An Important Headline

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

An Important Headline

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc. 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.

Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullamac 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. Ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper.

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.

An Important Headline

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. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris.

Felis aliquet egestas vitae, nibh ante ullamcorper quis quis dolor sed mauris. Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper.
Stacks Image 2241
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.
Stacks Image 2243
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
An Important Headline
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.

These are just a few of the many things you can do with the Capsule stack. Pair Capsule with your own unique content, and the sky is the limit. You can learn more about the stack on its product page.