Explore Templates
Accordions
Build vertically collapsing accordions in combination with the Collapse component.
Basic Example
Click the accordions below to expand/collapse the accordion content.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis dignissimos sint voluptates, laborum perspiciatis laudantium quam, dolor, consequatur a est maxime optio quidem doloribus autem! Facilis maiores ratione aliquid, ex veniam nobis est accusantium harum sequi, accusamus libero optio sint.
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aliquam asperiores ea saepe velit perspiciatis impedit beatae! Eos, sint corrupti. A amet saepe tempora laboriosam, repudiandae ipsa, quos facere vitae reiciendis earum quibusdam impedit dolore adipisci quidem voluptate assumenda fuga vel temporibus eligendi. Similique, at doloribus?
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eveniet quia iure dolor dicta officiis! Voluptatibus dicta velit, alias expedita cupiditate consequuntur eveniet inventore, corporis maiores est, optio natus corrupti quo quibusdam? Voluptates error libero rerum voluptate molestias ea doloribus quis ipsa eveniet necessitatibus? Ad molestias dolores harum mollitia itaque error!
Flush
Add flush to remove the default background-color, some borders, and some rounded corners to render accordions edge-to-edge with their parent container.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum delectus temporibus consequuntur doloremque ut beatae? Quos ex, repellendus sit sint dolores adipisci vitae quisquam minima in explicabo obcaecati eius facere veniam totam blanditiis unde. Culpa, hic! Voluptates, nobis fugit magnam omnis culpa repellat ratione quisquam laborum, sed vel optio porro.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum rem numquam beatae molestiae est animi reiciendis, quos tempora fugiat vitae ipsam, nesciunt quia dolores? Necessitatibus velit nam mollitia magni quos iste, qui itaque perspiciatis non veritatis assumenda odit neque? Iste recusandae dolore voluptatem aperiam harum autem quos adipisci? Nulla, iure!
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quasi eveniet ad voluptate repellat. Ipsa a, similique deserunt debitis nulla distinctio aperiam id vitae porro ab quibusdam praesentium facilis repellendus animi nemo, nostrum numquam blanditiis reprehenderit explicabo ad. Expedita pariatur accusantium autem alias commodi dolorum dicta modi placeat. Excepturi, commodi itaque?
Card
Use .accordion-card
Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis dignissimos sint voluptates, laborum perspiciatis laudantium quam, dolor, consequatur a est maxime optio quidem doloribus autem! Facilis maiores ratione aliquid, ex veniam nobis est accusantium harum sequi, accusamus libero optio sint.
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aliquam asperiores ea saepe velit perspiciatis impedit beatae! Eos, sint corrupti. A amet saepe tempora laboriosam, repudiandae ipsa, quos facere vitae reiciendis earum quibusdam impedit dolore adipisci quidem voluptate assumenda fuga vel temporibus eligendi. Similique, at doloribus?
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eveniet quia iure dolor dicta officiis! Voluptatibus dicta velit, alias expedita cupiditate consequuntur eveniet inventore, corporis maiores est, optio natus corrupti quo quibusdam? Voluptates error libero rerum voluptate molestias ea doloribus quis ipsa eveniet necessitatibus? Ad molestias dolores harum mollitia itaque error!
Accordion card shadow
Use .accordion-card-shadow
Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis dignissimos sint voluptates, laborum perspiciatis laudantium quam, dolor, consequatur a est maxime optio quidem doloribus autem! Facilis maiores ratione aliquid, ex veniam nobis est accusantium harum sequi, accusamus libero optio sint.
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aliquam asperiores ea saepe velit perspiciatis impedit beatae! Eos, sint corrupti. A amet saepe tempora laboriosam, repudiandae ipsa, quos facere vitae reiciendis earum quibusdam impedit dolore adipisci quidem voluptate assumenda fuga vel temporibus eligendi. Similique, at doloribus?
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eveniet quia iure dolor dicta officiis! Voluptatibus dicta velit, alias expedita cupiditate consequuntur eveniet inventore, corporis maiores est, optio natus corrupti quo quibusdam? Voluptates error libero rerum voluptate molestias ea doloribus quis ipsa eveniet necessitatibus? Ad molestias dolores harum mollitia itaque error!
Card bold
Use .accordion-card-bold
Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis dignissimos sint voluptates, laborum perspiciatis laudantium quam, dolor, consequatur a est maxime optio quidem doloribus autem! Facilis maiores ratione aliquid, ex veniam nobis est accusantium harum sequi, accusamus libero optio sint.
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aliquam asperiores ea saepe velit perspiciatis impedit beatae! Eos, sint corrupti. A amet saepe tempora laboriosam, repudiandae ipsa, quos facere vitae reiciendis earum quibusdam impedit dolore adipisci quidem voluptate assumenda fuga vel temporibus eligendi. Similique, at doloribus?
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eveniet quia iure dolor dicta officiis! Voluptatibus dicta velit, alias expedita cupiditate consequuntur eveniet inventore, corporis maiores est, optio natus corrupti quo quibusdam? Voluptates error libero rerum voluptate molestias ea doloribus quis ipsa eveniet necessitatibus? Ad molestias dolores harum mollitia itaque error!
Card bold shadow
Use .accordion-card-bold
Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis dignissimos sint voluptates, laborum perspiciatis laudantium quam, dolor, consequatur a est maxime optio quidem doloribus autem! Facilis maiores ratione aliquid, ex veniam nobis est accusantium harum sequi, accusamus libero optio sint.
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aliquam asperiores ea saepe velit perspiciatis impedit beatae! Eos, sint corrupti. A amet saepe tempora laboriosam, repudiandae ipsa, quos facere vitae reiciendis earum quibusdam impedit dolore adipisci quidem voluptate assumenda fuga vel temporibus eligendi. Similique, at doloribus?
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eveniet quia iure dolor dicta officiis! Voluptatibus dicta velit, alias expedita cupiditate consequuntur eveniet inventore, corporis maiores est, optio natus corrupti quo quibusdam? Voluptates error libero rerum voluptate molestias ea doloribus quis ipsa eveniet necessitatibus? Ad molestias dolores harum mollitia itaque error!
Soft
Use .accordion-soft
Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis dignissimos sint voluptates, laborum perspiciatis laudantium quam, dolor, consequatur a est maxime optio quidem doloribus autem! Facilis maiores ratione aliquid, ex veniam nobis est accusantium harum sequi, accusamus libero optio sint.
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aliquam asperiores ea saepe velit perspiciatis impedit beatae! Eos, sint corrupti. A amet saepe tempora laboriosam, repudiandae ipsa, quos facere vitae reiciendis earum quibusdam impedit dolore adipisci quidem voluptate assumenda fuga vel temporibus eligendi. Similique, at doloribus?
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eveniet quia iure dolor dicta officiis! Voluptatibus dicta velit, alias expedita cupiditate consequuntur eveniet inventore, corporis maiores est, optio natus corrupti quo quibusdam? Voluptates error libero rerum voluptate molestias ea doloribus quis ipsa eveniet necessitatibus? Ad molestias dolores harum mollitia itaque error!
Soft card
Use .accordion-soft
Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis dignissimos sint voluptates, laborum perspiciatis laudantium quam, dolor, consequatur a est maxime optio quidem doloribus autem! Facilis maiores ratione aliquid, ex veniam nobis est accusantium harum sequi, accusamus libero optio sint.
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aliquam asperiores ea saepe velit perspiciatis impedit beatae! Eos, sint corrupti. A amet saepe tempora laboriosam, repudiandae ipsa, quos facere vitae reiciendis earum quibusdam impedit dolore adipisci quidem voluptate assumenda fuga vel temporibus eligendi. Similique, at doloribus?
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eveniet quia iure dolor dicta officiis! Voluptatibus dicta velit, alias expedita cupiditate consequuntur eveniet inventore, corporis maiores est, optio natus corrupti quo quibusdam? Voluptates error libero rerum voluptate molestias ea doloribus quis ipsa eveniet necessitatibus? Ad molestias dolores harum mollitia itaque error!
Soft card shadow
Use .accordion-card .accordion-card-shadow .accordion-soft
Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis dignissimos sint voluptates, laborum perspiciatis laudantium quam, dolor, consequatur a est maxime optio quidem doloribus autem! Facilis maiores ratione aliquid, ex veniam nobis est accusantium harum sequi, accusamus libero optio sint.
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aliquam asperiores ea saepe velit perspiciatis impedit beatae! Eos, sint corrupti. A amet saepe tempora laboriosam, repudiandae ipsa, quos facere vitae reiciendis earum quibusdam impedit dolore adipisci quidem voluptate assumenda fuga vel temporibus eligendi. Similique, at doloribus?
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eveniet quia iure dolor dicta officiis! Voluptatibus dicta velit, alias expedita cupiditate consequuntur eveniet inventore, corporis maiores est, optio natus corrupti quo quibusdam? Voluptates error libero rerum voluptate molestias ea doloribus quis ipsa eveniet necessitatibus? Ad molestias dolores harum mollitia itaque error!
Soft card bold
Use .accordion-soft .accordion-card-bold
Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis dignissimos sint voluptates, laborum perspiciatis laudantium quam, dolor, consequatur a est maxime optio quidem doloribus autem! Facilis maiores ratione aliquid, ex veniam nobis est accusantium harum sequi, accusamus libero optio sint.
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aliquam asperiores ea saepe velit perspiciatis impedit beatae! Eos, sint corrupti. A amet saepe tempora laboriosam, repudiandae ipsa, quos facere vitae reiciendis earum quibusdam impedit dolore adipisci quidem voluptate assumenda fuga vel temporibus eligendi. Similique, at doloribus?
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eveniet quia iure dolor dicta officiis! Voluptatibus dicta velit, alias expedita cupiditate consequuntur eveniet inventore, corporis maiores est, optio natus corrupti quo quibusdam? Voluptates error libero rerum voluptate molestias ea doloribus quis ipsa eveniet necessitatibus? Ad molestias dolores harum mollitia itaque error!
Soft content
Use .accordion-soft
Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis dignissimos sint voluptates, laborum perspiciatis laudantium quam, dolor, consequatur a est maxime optio quidem doloribus autem! Facilis maiores ratione aliquid, ex veniam nobis est accusantium harum sequi, accusamus libero optio sint.
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aliquam asperiores ea saepe velit perspiciatis impedit beatae! Eos, sint corrupti. A amet saepe tempora laboriosam, repudiandae ipsa, quos facere vitae reiciendis earum quibusdam impedit dolore adipisci quidem voluptate assumenda fuga vel temporibus eligendi. Similique, at doloribus?
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eveniet quia iure dolor dicta officiis! Voluptatibus dicta velit, alias expedita cupiditate consequuntur eveniet inventore, corporis maiores est, optio natus corrupti quo quibusdam? Voluptates error libero rerum voluptate molestias ea doloribus quis ipsa eveniet necessitatibus? Ad molestias dolores harum mollitia itaque error!
Soft content flush
Use .accordion-soft class with flush props.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis dignissimos sint voluptates, laborum perspiciatis laudantium quam, dolor, consequatur a est maxime optio quidem doloribus autem! Facilis maiores ratione aliquid, ex veniam nobis est accusantium harum sequi, accusamus libero optio sint.
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aliquam asperiores ea saepe velit perspiciatis impedit beatae! Eos, sint corrupti. A amet saepe tempora laboriosam, repudiandae ipsa, quos facere vitae reiciendis earum quibusdam impedit dolore adipisci quidem voluptate assumenda fuga vel temporibus eligendi. Similique, at doloribus?
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eveniet quia iure dolor dicta officiis! Voluptatibus dicta velit, alias expedita cupiditate consequuntur eveniet inventore, corporis maiores est, optio natus corrupti quo quibusdam? Voluptates error libero rerum voluptate molestias ea doloribus quis ipsa eveniet necessitatibus? Ad molestias dolores harum mollitia itaque error!
Soft content card
Use .accordion-soft
Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis dignissimos sint voluptates, laborum perspiciatis laudantium quam, dolor, consequatur a est maxime optio quidem doloribus autem! Facilis maiores ratione aliquid, ex veniam nobis est accusantium harum sequi, accusamus libero optio sint.
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aliquam asperiores ea saepe velit perspiciatis impedit beatae! Eos, sint corrupti. A amet saepe tempora laboriosam, repudiandae ipsa, quos facere vitae reiciendis earum quibusdam impedit dolore adipisci quidem voluptate assumenda fuga vel temporibus eligendi. Similique, at doloribus?
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eveniet quia iure dolor dicta officiis! Voluptatibus dicta velit, alias expedita cupiditate consequuntur eveniet inventore, corporis maiores est, optio natus corrupti quo quibusdam? Voluptates error libero rerum voluptate molestias ea doloribus quis ipsa eveniet necessitatibus? Ad molestias dolores harum mollitia itaque error!
Soft content card shadow
Use .accordion-soft
Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis dignissimos sint voluptates, laborum perspiciatis laudantium quam, dolor, consequatur a est maxime optio quidem doloribus autem! Facilis maiores ratione aliquid, ex veniam nobis est accusantium harum sequi, accusamus libero optio sint.
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aliquam asperiores ea saepe velit perspiciatis impedit beatae! Eos, sint corrupti. A amet saepe tempora laboriosam, repudiandae ipsa, quos facere vitae reiciendis earum quibusdam impedit dolore adipisci quidem voluptate assumenda fuga vel temporibus eligendi. Similique, at doloribus?
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eveniet quia iure dolor dicta officiis! Voluptatibus dicta velit, alias expedita cupiditate consequuntur eveniet inventore, corporis maiores est, optio natus corrupti quo quibusdam? Voluptates error libero rerum voluptate molestias ea doloribus quis ipsa eveniet necessitatibus? Ad molestias dolores harum mollitia itaque error!
Simple
Use .accordion-simple
Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis dignissimos sint voluptates, laborum perspiciatis laudantium quam, dolor, consequatur a est maxime optio quidem doloribus autem! Facilis maiores ratione aliquid, ex veniam nobis est accusantium harum sequi, accusamus libero optio sint.
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aliquam asperiores ea saepe velit perspiciatis impedit beatae! Eos, sint corrupti. A amet saepe tempora laboriosam, repudiandae ipsa, quos facere vitae reiciendis earum quibusdam impedit dolore adipisci quidem voluptate assumenda fuga vel temporibus eligendi. Similique, at doloribus?
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eveniet quia iure dolor dicta officiis! Voluptatibus dicta velit, alias expedita cupiditate consequuntur eveniet inventore, corporis maiores est, optio natus corrupti quo quibusdam? Voluptates error libero rerum voluptate molestias ea doloribus quis ipsa eveniet necessitatibus? Ad molestias dolores harum mollitia itaque error!
Simple flush
Use .accordion-simple with flush prop
Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis dignissimos sint voluptates, laborum perspiciatis laudantium quam, dolor, consequatur a est maxime optio quidem doloribus autem! Facilis maiores ratione aliquid, ex veniam nobis est accusantium harum sequi, accusamus libero optio sint.
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aliquam asperiores ea saepe velit perspiciatis impedit beatae! Eos, sint corrupti. A amet saepe tempora laboriosam, repudiandae ipsa, quos facere vitae reiciendis earum quibusdam impedit dolore adipisci quidem voluptate assumenda fuga vel temporibus eligendi. Similique, at doloribus?
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eveniet quia iure dolor dicta officiis! Voluptatibus dicta velit, alias expedita cupiditate consequuntur eveniet inventore, corporis maiores est, optio natus corrupti quo quibusdam? Voluptates error libero rerum voluptate molestias ea doloribus quis ipsa eveniet necessitatibus? Ad molestias dolores harum mollitia itaque error!
Simple Card
Use .accordion-simple and .accordion-card
Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis dignissimos sint voluptates, laborum perspiciatis laudantium quam, dolor, consequatur a est maxime optio quidem doloribus autem! Facilis maiores ratione aliquid, ex veniam nobis est accusantium harum sequi, accusamus libero optio sint.
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aliquam asperiores ea saepe velit perspiciatis impedit beatae! Eos, sint corrupti. A amet saepe tempora laboriosam, repudiandae ipsa, quos facere vitae reiciendis earum quibusdam impedit dolore adipisci quidem voluptate assumenda fuga vel temporibus eligendi. Similique, at doloribus?
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eveniet quia iure dolor dicta officiis! Voluptatibus dicta velit, alias expedita cupiditate consequuntur eveniet inventore, corporis maiores est, optio natus corrupti quo quibusdam? Voluptates error libero rerum voluptate molestias ea doloribus quis ipsa eveniet necessitatibus? Ad molestias dolores harum mollitia itaque error!
Simple Card Shadow
Use .accordion-simple, .accordion-card and .accordion-card-shadow
Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis dignissimos sint voluptates, laborum perspiciatis laudantium quam, dolor, consequatur a est maxime optio quidem doloribus autem! Facilis maiores ratione aliquid, ex veniam nobis est accusantium harum sequi, accusamus libero optio sint.
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aliquam asperiores ea saepe velit perspiciatis impedit beatae! Eos, sint corrupti. A amet saepe tempora laboriosam, repudiandae ipsa, quos facere vitae reiciendis earum quibusdam impedit dolore adipisci quidem voluptate assumenda fuga vel temporibus eligendi. Similique, at doloribus?
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eveniet quia iure dolor dicta officiis! Voluptatibus dicta velit, alias expedita cupiditate consequuntur eveniet inventore, corporis maiores est, optio natus corrupti quo quibusdam? Voluptates error libero rerum voluptate molestias ea doloribus quis ipsa eveniet necessitatibus? Ad molestias dolores harum mollitia itaque error!
Simple card bold
Use .accordion-simple, .accordion-card and .accordion-card-bold.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis dignissimos sint voluptates, laborum perspiciatis laudantium quam, dolor, consequatur a est maxime optio quidem doloribus autem! Facilis maiores ratione aliquid, ex veniam nobis est accusantium harum sequi, accusamus libero optio sint.
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aliquam asperiores ea saepe velit perspiciatis impedit beatae! Eos, sint corrupti. A amet saepe tempora laboriosam, repudiandae ipsa, quos facere vitae reiciendis earum quibusdam impedit dolore adipisci quidem voluptate assumenda fuga vel temporibus eligendi. Similique, at doloribus?
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eveniet quia iure dolor dicta officiis! Voluptatibus dicta velit, alias expedita cupiditate consequuntur eveniet inventore, corporis maiores est, optio natus corrupti quo quibusdam? Voluptates error libero rerum voluptate molestias ea doloribus quis ipsa eveniet necessitatibus? Ad molestias dolores harum mollitia itaque error!
Icon
Use .accordion-icon
Icon card bold
Use .accordion-icon
Always open
You can make accordion items stay open when another item is opened by using the alwaysOpen prop.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis dignissimos sint voluptates, laborum perspiciatis laudantium quam, dolor, consequatur a est maxime optio quidem doloribus autem! Facilis maiores ratione aliquid, ex veniam nobis est accusantium harum sequi, accusamus libero optio sint.
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aliquam asperiores ea saepe velit perspiciatis impedit beatae! Eos, sint corrupti. A amet saepe tempora laboriosam, repudiandae ipsa, quos facere vitae reiciendis earum quibusdam impedit dolore adipisci quidem voluptate assumenda fuga vel temporibus eligendi. Similique, at doloribus?
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eveniet quia iure dolor dicta officiis! Voluptatibus dicta velit, alias expedita cupiditate consequuntur eveniet inventore, corporis maiores est, optio natus corrupti quo quibusdam? Voluptates error libero rerum voluptate molestias ea doloribus quis ipsa eveniet necessitatibus? Ad molestias dolores harum mollitia itaque error!