Accordion Design Concept - B

Gave these panels double the amount of space in between each of them, about 10px gap.

Positioned the icon to the right side to make the content the first element the eye sees. The hierarchy is clearer made by the composition with the help of better spacing between each panel and a lighter weighted type.

Applying a vertical line to the left side of the hover and the selected state can allow for a transition animation while subtle depicting a sense of connectedness between question and answer.

More by Mark Cabritit

View profile