Stacks Image 2827

Ivy 2

Sample accordions

Have a ton of information to present to your visitors but don’t want to overwhelm them with a page chock-full of content? Maybe a FAQ, or a survival guide or something? The Accordion page type is perfect for this sort of thing, allowing each section to be collapsed and opened one at a time by your visitors.

Sample One

This sample shows our Ivy accordion using mostly the default settings. You'll notice the Tesla inspired styling, with thin arrows as indicator icons. By default the Open All toggle is enabled and Multi-view is turned off.
  • Accordion Label
    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.
  • Accordion Label
    Nunc nec magna quis nibh vehicula blandit. Fusce facilisis hendrerit rhoncus. Ut ornare varius ligula, at hendrerit ipsum molestie at. Proin eget vestibulum turpis, vitae tempor turpis. Curabitur nec tristique nisi. Quisque fermentum dignissim sem, eget malesuada est rhoncus eu.

    Pellentesque nisl nisi, faucibus vitae convallis lobortis, consequat non dolor. Donec venenatis efficitur dignissim. Maecenas in nunc sit amet elit ullamcorper ultrices. Curabitur placerat metus quis eros gravida vulputate eu vitae nisl. Etiam auctor ornare mollis.

    Duis scelerisque vitae augue iaculis bibendum. In hac habitasse platea dictumst. Duis sagittis ante eu dolor tincidunt laoreet. Quisque vitae metus eget tortor fermentum consequat. Pellentesque facilisis felis nisl, eget fringilla neque maximus a. Aenean metus nibh, gravida quis lacinia varius, aliquam non urna. Mauris sagittis maximus sapien. Suspendisse scelerisque accumsan diam sed congue. Donec iaculis, odio eget iaculis suscipit, odio eros iaculis justo, eu euismod tellus mi quis ante.
  • Accordion Label
    Donec volutpat scelerisque purus sed ornare. Vivamus lacus metus, consectetur id urna ut, mollis semper mi. Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper.

    Mauris venenatis sodales mi et tincidunt. Pellentesque vitae sem eget dolor semper volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut at porttitor sapien, a consequat nibh. Sed laoreet arcu mollis sapien rhoncus, at egestas lorem maximus.
Open all Close all

Sample Two

In this example we're using our built-in Ghost style. This style has a nice, clean, minimalistic look. We've selected the Thick Arrow icon as our open and close indicator. We've enabled Multi-view for this sample, allowing more than one accordion item to be open at a time. Inside the first accordion item we've used the Structure responsive columns stack. We've also positioned the Open All toggle on the right-hand side.
  • Accordion Label
    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.
  • Accordion Label
    Donec volutpat scelerisque purus sed ornare. Vivamus lacus metus, consectetur id urna ut, mollis semper mi. Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper.

    Mauris venenatis sodales mi et tincidunt. Pellentesque vitae sem eget dolor semper volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut at porttitor sapien, a consequat nibh. Sed laoreet arcu mollis sapien rhoncus, at egestas lorem maximus.
  • Accordion Label
    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.
Open all Close all

Sample Three

In our third example we've opted for our nice dark Blue Grey style. We've also chosen to enable the Start with First Open feature, letting the visitor see the contents of the first accordion item right away. In this example we've included 5 accordion items, and disabled the Open All feature.
  • Accordion Label

    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.

    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.
  • Accordion Label

    An Important Headline

    Vestibulum vel massa commodo, auctor nunc venenatis, suscipit leo. Suspendisse a enim cursus, feugiat lectus ut, laoreet quam. Curabitur non gravida nibh. Nullam tincidunt tincidunt neque a posuere. Quisque convallis velit at vulputate mattis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

    Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
  • Accordion Label

    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.

    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.

    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.
  • Accordion Label

    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.
  • Accordion Label

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

Sample Four

In this example we've created two different accordions, both using our built-in Navigator style, and placed them into the Structure columns stack so that we can have two, responsive accordions side-by-side.
Open all Close all
Open all Close all

Sample Five

In this last example we show off the ability to style one Ivy Item different from the rest. We use our simple and clean Ghost style again, while we customize the look and feel of the second Ivy Item using custom color pickers! We've also placed the Open All toggle at the top right corner of the stack.
Open all Close all
  • Accordion Label
    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.
  • Accordion Label
    Donec volutpat scelerisque purus sed ornare. Vivamus lacus metus, consectetur id urna ut, mollis semper mi. Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper.

    Mauris venenatis sodales mi et tincidunt. Pellentesque vitae sem eget dolor semper volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut at porttitor sapien, a consequat nibh. Sed laoreet arcu mollis sapien rhoncus, at egestas lorem maximus.
  • Accordion Label
    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.
  • Accordion Label
    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.
  • Accordion Label
    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.