Bolt Design System

Deep linking will auto-scroll to your selected accordion item. Here is only one sticky element after page header. See a demo: #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!

This is the accordion content.

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

Consider the old style link deprecated. See a demo: ?selected-accordion-item=accordion-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!

This is the accordion content.

Deep linking will auto-scroll to your selected accordion item. Here is only the page header. See a demo: #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!

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: #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!

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: #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!

This is the accordion content.

Lorem ipsum dolor sit amet..

accordion

accordion no shadow

Using the grid inside trigger and content

Pass various components into the content

accordion deep linking only one sticky after page header

accordion deep linking different heights sticky elements

accordion deep linking only page header

accordion deep linking sticky element not directly after page header

accordion deep linking sticky element the tallesr after the accordion

accordion list inside

accordion

accordion no shadow Show Code Hide Code

Using the grid inside trigger and content

Pass various components into the content

accordion deep linking only one sticky after page header Show Code Hide Code

accordion deep linking different heights sticky elements Show Code Hide Code

accordion deep linking only page header Show Code Hide Code

accordion deep linking sticky element not directly after page header Show Code Hide Code

accordion deep linking sticky element the tallesr after the accordion Show Code Hide Code

accordion list inside Show Code Hide Code

accordion no shadow

accordion deep linking only one sticky after page header

accordion deep linking different heights sticky elements

accordion deep linking only page header

accordion deep linking sticky element not directly after page header

accordion deep linking sticky element the tallesr after the accordion

accordion list inside