Bolt Design System

accordion

Using the grid inside trigger and content

12:00 PM

Lunch & Networking

Open Accordion Close Accordion

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at. Lorem ipsum dolor sit, amet consectetur adipisicing elit.

Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at.

Get the presentation

Watch video

12:00 PM

Lunch & Networking

Open Accordion Close Accordion

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at. Lorem ipsum dolor sit, amet consectetur adipisicing elit.

Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at.

Get the presentation

Watch video

12:00 PM

Lunch & Networking

Open Accordion Close Accordion

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at. Lorem ipsum dolor sit, amet consectetur adipisicing elit.

Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at.

Get the presentation

Watch video

Pass various components into the content

Expand this to see an image

Open Accordion Close Accordion

Expand this to see a table

Open Accordion Close Accordion

	Column 1	Column 2	Column 3
Row 1	R1C1	R1C2	R1C3
Row 2	R2C1	R2C2	R2C3
Row 3	R3C1	R3C2	R3C3
Footer	FC1	FC2	FC3

Expand this to see a share tool and a paragraph of text

Open Accordion Close Accordion

This is a headline

This is regular text. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et.

Verify deep linking to an accordion item works when inside a Band. For example: ?selected-accordion-item=item-3.

Accordion item 1

Open Accordion Close Accordion

This is the accordion content.

Accordion item 2

Open Accordion Close Accordion

This is the accordion content.

Accordion item 3

Open Accordion Close Accordion

This is the accordion content.

Deep linking will auto-scroll to your selected accordion item. Here is only one sticky element after page header. See a demo: ?selected-accordion-item=item-2.

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatum fuga fugiat eum omnis, enim corporis voluptas nam quisquam incidunt possimus laudantium ducimus distinctio expedita magnam libero maxime blanditiis ratione porro!

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatum fuga fugiat eum omnis, enim corporis voluptas nam quisquam incidunt possimus laudantium ducimus distinctio expedita magnam libero maxime blanditiis ratione porro!

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatum fuga fugiat eum omnis, enim corporis voluptas nam quisquam incidunt possimus laudantium ducimus distinctio expedita magnam libero maxime blanditiis ratione porro!

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatum fuga fugiat eum omnis, enim corporis voluptas nam quisquam incidunt possimus laudantium ducimus distinctio expedita magnam libero maxime blanditiis ratione porro!

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatum fuga fugiat eum omnis, enim corporis voluptas nam quisquam incidunt possimus laudantium ducimus distinctio expedita magnam libero maxime blanditiis ratione porro!

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatum fuga fugiat eum omnis, enim corporis voluptas nam quisquam incidunt possimus laudantium ducimus distinctio expedita magnam libero maxime blanditiis ratione porro!

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatum fuga fugiat eum omnis, enim corporis voluptas nam quisquam incidunt possimus laudantium ducimus distinctio expedita magnam libero maxime blanditiis ratione porro!

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatum fuga fugiat eum omnis, enim corporis voluptas nam quisquam incidunt possimus laudantium ducimus distinctio expedita magnam libero maxime blanditiis ratione porro!

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatum fuga fugiat eum omnis, enim corporis voluptas nam quisquam incidunt possimus laudantium ducimus distinctio expedita magnam libero maxime blanditiis ratione porro!

Accordion item 1

Open Accordion Close Accordion

This is the accordion content.

Accordion item 2

Open Accordion Close Accordion

This is the accordion content.

Accordion item 3

Open Accordion Close Accordion

This is the accordion content.

Deep linking will auto-scroll to your selected accordion item. Here are few sticky elements with differnt heights. See a demo: ?selected-accordion-item=item-2.

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatum fuga fugiat eum omnis, enim corporis voluptas nam quisquam incidunt possimus laudantium ducimus distinctio expedita magnam libero maxime blanditiis ratione porro!

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatum fuga fugiat eum omnis, enim corporis voluptas nam quisquam incidunt possimus laudantium ducimus distinctio expedita magnam libero maxime blanditiis ratione porro!

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatum fuga fugiat eum omnis, enim corporis voluptas nam quisquam incidunt possimus laudantium ducimus distinctio expedita magnam libero maxime blanditiis ratione porro!

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatum fuga fugiat eum omnis, enim corporis voluptas nam quisquam incidunt possimus laudantium ducimus distinctio expedita magnam libero maxime blanditiis ratione porro!

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatum fuga fugiat eum omnis, enim corporis voluptas nam quisquam incidunt possimus laudantium ducimus distinctio expedita magnam libero maxime blanditiis ratione porro!

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatum fuga fugiat eum omnis, enim corporis voluptas nam quisquam incidunt possimus laudantium ducimus distinctio expedita magnam libero maxime blanditiis ratione porro!

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatum fuga fugiat eum omnis, enim corporis voluptas nam quisquam incidunt possimus laudantium ducimus distinctio expedita magnam libero maxime blanditiis ratione porro!

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatum fuga fugiat eum omnis, enim corporis voluptas nam quisquam incidunt possimus laudantium ducimus distinctio expedita magnam libero maxime blanditiis ratione porro!

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatum fuga fugiat eum omnis, enim corporis voluptas nam quisquam incidunt possimus laudantium ducimus distinctio expedita magnam libero maxime blanditiis ratione porro!

Accordion item 1

Open Accordion Close Accordion

This is the accordion content.

Accordion item 2

Open Accordion Close Accordion

This is the accordion content.

Accordion item 3

Open Accordion Close Accordion

This is the accordion content.

Deep linking will auto-scroll to your selected accordion item. Here is only the page header. See a demo: ?selected-accordion-item=item-2.

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatum fuga fugiat eum omnis, enim corporis voluptas nam quisquam incidunt possimus laudantium ducimus distinctio expedita magnam libero maxime blanditiis ratione porro!

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatum fuga fugiat eum omnis, enim corporis voluptas nam quisquam incidunt possimus laudantium ducimus distinctio expedita magnam libero maxime blanditiis ratione porro!

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatum fuga fugiat eum omnis, enim corporis voluptas nam quisquam incidunt possimus laudantium ducimus distinctio expedita magnam libero maxime blanditiis ratione porro!

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatum fuga fugiat eum omnis, enim corporis voluptas nam quisquam incidunt possimus laudantium ducimus distinctio expedita magnam libero maxime blanditiis ratione porro!

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatum fuga fugiat eum omnis, enim corporis voluptas nam quisquam incidunt possimus laudantium ducimus distinctio expedita magnam libero maxime blanditiis ratione porro!

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatum fuga fugiat eum omnis, enim corporis voluptas nam quisquam incidunt possimus laudantium ducimus distinctio expedita magnam libero maxime blanditiis ratione porro!

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatum fuga fugiat eum omnis, enim corporis voluptas nam quisquam incidunt possimus laudantium ducimus distinctio expedita magnam libero maxime blanditiis ratione porro!

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatum fuga fugiat eum omnis, enim corporis voluptas nam quisquam incidunt possimus laudantium ducimus distinctio expedita magnam libero maxime blanditiis ratione porro!

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatum fuga fugiat eum omnis, enim corporis voluptas nam quisquam incidunt possimus laudantium ducimus distinctio expedita magnam libero maxime blanditiis ratione porro!

Accordion item 1

Open Accordion Close Accordion

This is the accordion content.

Accordion item 2

Open Accordion Close Accordion

This is the accordion content.

Accordion item 3

Open Accordion Close Accordion

This is the accordion content.

Deep linking will auto-scroll to your selected accordion item. Here are sticky elements not directly after the page header. See a demo: ?selected-accordion-item=item-2.

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatum fuga fugiat eum omnis, enim corporis voluptas nam quisquam incidunt possimus laudantium ducimus distinctio expedita magnam libero maxime blanditiis ratione porro!

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatum fuga fugiat eum omnis, enim corporis voluptas nam quisquam incidunt possimus laudantium ducimus distinctio expedita magnam libero maxime blanditiis ratione porro!

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatum fuga fugiat eum omnis, enim corporis voluptas nam quisquam incidunt possimus laudantium ducimus distinctio expedita magnam libero maxime blanditiis ratione porro!

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatum fuga fugiat eum omnis, enim corporis voluptas nam quisquam incidunt possimus laudantium ducimus distinctio expedita magnam libero maxime blanditiis ratione porro!

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatum fuga fugiat eum omnis, enim corporis voluptas nam quisquam incidunt possimus laudantium ducimus distinctio expedita magnam libero maxime blanditiis ratione porro!

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatum fuga fugiat eum omnis, enim corporis voluptas nam quisquam incidunt possimus laudantium ducimus distinctio expedita magnam libero maxime blanditiis ratione porro!

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatum fuga fugiat eum omnis, enim corporis voluptas nam quisquam incidunt possimus laudantium ducimus distinctio expedita magnam libero maxime blanditiis ratione porro!

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatum fuga fugiat eum omnis, enim corporis voluptas nam quisquam incidunt possimus laudantium ducimus distinctio expedita magnam libero maxime blanditiis ratione porro!

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatum fuga fugiat eum omnis, enim corporis voluptas nam quisquam incidunt possimus laudantium ducimus distinctio expedita magnam libero maxime blanditiis ratione porro!

Accordion item 1

Open Accordion Close Accordion

This is the accordion content.

Accordion item 2

Open Accordion Close Accordion

This is the accordion content.

Accordion item 3

Open Accordion Close Accordion

This is the accordion content.

Deep linking will auto-scroll to your selected accordion item. Here the tallest sticky element is below the accordion in the DOM tree. This doesn't scroll directly to the selected accordion's item, but above of it. The position of the stopped scroll is related to the tallest sticky element which is below the accordion. See a demo: ?selected-accordion-item=item-2.

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatum fuga fugiat eum omnis, enim corporis voluptas nam quisquam incidunt possimus laudantium ducimus distinctio expedita magnam libero maxime blanditiis ratione porro!

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatum fuga fugiat eum omnis, enim corporis voluptas nam quisquam incidunt possimus laudantium ducimus distinctio expedita magnam libero maxime blanditiis ratione porro!

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatum fuga fugiat eum omnis, enim corporis voluptas nam quisquam incidunt possimus laudantium ducimus distinctio expedita magnam libero maxime blanditiis ratione porro!

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatum fuga fugiat eum omnis, enim corporis voluptas nam quisquam incidunt possimus laudantium ducimus distinctio expedita magnam libero maxime blanditiis ratione porro!

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatum fuga fugiat eum omnis, enim corporis voluptas nam quisquam incidunt possimus laudantium ducimus distinctio expedita magnam libero maxime blanditiis ratione porro!

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatum fuga fugiat eum omnis, enim corporis voluptas nam quisquam incidunt possimus laudantium ducimus distinctio expedita magnam libero maxime blanditiis ratione porro!

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatum fuga fugiat eum omnis, enim corporis voluptas nam quisquam incidunt possimus laudantium ducimus distinctio expedita magnam libero maxime blanditiis ratione porro!

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatum fuga fugiat eum omnis, enim corporis voluptas nam quisquam incidunt possimus laudantium ducimus distinctio expedita magnam libero maxime blanditiis ratione porro!

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatum fuga fugiat eum omnis, enim corporis voluptas nam quisquam incidunt possimus laudantium ducimus distinctio expedita magnam libero maxime blanditiis ratione porro!

Accordion item 1

Open Accordion Close Accordion

This is the accordion content.

Accordion item 2

Open Accordion Close Accordion

This is the accordion content.

Accordion item 3

Open Accordion Close Accordion

This is the accordion content.

Deep linking will auto-scroll to your selected accordion item. Sticky elements without c-bolt-page-header at the top. See a demo: ?selected-accordion-item=item-2.

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatum fuga fugiat eum omnis, enim corporis voluptas nam quisquam incidunt possimus laudantium ducimus distinctio expedita magnam libero maxime blanditiis ratione porro!

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatum fuga fugiat eum omnis, enim corporis voluptas nam quisquam incidunt possimus laudantium ducimus distinctio expedita magnam libero maxime blanditiis ratione porro!

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatum fuga fugiat eum omnis, enim corporis voluptas nam quisquam incidunt possimus laudantium ducimus distinctio expedita magnam libero maxime blanditiis ratione porro!

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatum fuga fugiat eum omnis, enim corporis voluptas nam quisquam incidunt possimus laudantium ducimus distinctio expedita magnam libero maxime blanditiis ratione porro!

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatum fuga fugiat eum omnis, enim corporis voluptas nam quisquam incidunt possimus laudantium ducimus distinctio expedita magnam libero maxime blanditiis ratione porro!

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatum fuga fugiat eum omnis, enim corporis voluptas nam quisquam incidunt possimus laudantium ducimus distinctio expedita magnam libero maxime blanditiis ratione porro!

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatum fuga fugiat eum omnis, enim corporis voluptas nam quisquam incidunt possimus laudantium ducimus distinctio expedita magnam libero maxime blanditiis ratione porro!

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatum fuga fugiat eum omnis, enim corporis voluptas nam quisquam incidunt possimus laudantium ducimus distinctio expedita magnam libero maxime blanditiis ratione porro!

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatum fuga fugiat eum omnis, enim corporis voluptas nam quisquam incidunt possimus laudantium ducimus distinctio expedita magnam libero maxime blanditiis ratione porro!

Accordion item 1

Open Accordion Close Accordion

This is the accordion content.

Accordion item 2

Open Accordion Close Accordion

This is the accordion content.

Accordion item 3

Open Accordion Close Accordion

This is the accordion content.