Create stunning accordions

UDesign Accordion is a perfect element to show a lot of information as several groups in a small area. Enjoy the Accordion Element.

Unlimited possibilities

Choose any type you want

UDesign provides 2 more desinged accordion type as "solid", "boxed" except default type to customize your accordion easily.

Boxed style

How to change address.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non semper .

Create your own beautiful website.
What benefits a customer can take?
How to change address.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non semper .

Create your own beautiful website.
What benefits a customer can take?

On background style

How to change address.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non semper .

Create your own beautiful website.
What benefits a customer can take?
How to change address.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non semper .

Create your own beautiful website.
What benefits a customer can take?

Simple & Clean

Which payment methods can I use?

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non semper .

What benefits a customer can take?
How to change address.
Which payment methods can I use?

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non semper .

What benefits a customer can take?
How to change address.

Glossary

Accordion element options

Customize Elements Globally or Individually

  • Accordion Type: Select a certain type of your list among 3 types.
  • Show Focus Line: Toggle for making focus line is shown or not when card is active.
  • Card Space: Control space between cards.
  • Toggle Icon: Show that card is opened or not.
  • Active Toggle Icon: Show that card is opened.
  • Toggle Icon Size: Control size of toggle icon.
  • Card Border Width: Control border width of card.
  • Card Border and Background Color: Control border and background color of card when normal, hover and active states.
  • Card Border Radius: Control border radius of card.
  • Panel Header Typography: Control font of card header text.
  • Panel Header Color: Control color of card header text when card is normal, hover and active.
  • Panel Header Margin and Padding: Control spacing of card header.
  • Panel Content Padding: Control spacing of card content.
Accordion Image

Easy for sure

How to use our
Accordion Element

UDesign Accordion Element provides multi options to make your accordion in a short time.

  • Use Section For option is to use section as accordion.
  • Accordion Type option is to select accordion type in your list.
  • Column For option is to use column as accordion content.
  • Accordion Title option for card header.