COMPONENTS
ACCORDION
An accordion is a type of menu that displays a list of headers stacked on top of one another. Also, it can improve the user experience, if it is used for the right reason and the right content.
VARIANT: BASIC WITH PLUS ICON
Accordion with a title and a plus icon to indicate there’s more content available if clicked. Often, there are two sets of icons used to indicate whether an item has been expanded (-) or collapsed (+). When it is opened, there are bullet points or multiple paragraphs, but they should be brief and descriptive.
Accordion Title
- Lorem ipsum dolor sit amet, consectetur
- Lorem ipsum dolor sit amet, consectetur
- Lorem ipsum dolor sit amet, consectetur
VARIANT: BASIC WITH SUB TEXT AND ICON
Accordion with a title and an arrow icon to indicate there’s more content available if clicked. The subtitles are meant to be brief but descriptive enough to indicate what the reader can expect to learn more about by clicking. When it is opened, there are bullet points or multiple paragraphs, but they should be brief and descriptive.
Accordion Title
SECONDARY TITLE
- Lorem ipsum dolor sit amet, consectetur
- Lorem ipsum dolor sit amet, consectetur
- Lorem ipsum dolor sit amet, consectetur
VARIANT: BASIC WITH ARROW
Accordion with a title and an arrow icon to indicate there’s more content available if clicked. Often, there are two sets of icons used to indicate whether an item has been expanded (arrow up) or collapsed (arrow down). When it is opened, there are bullet points or multiple paragraphs, but they should be brief and descriptive.
Accordion Title
- Lorem ipsum dolor sit amet, consectetur
- Lorem ipsum dolor sit amet, consectetur
- Lorem ipsum dolor sit amet, consectetur
VARIANT: BASIC WITH SUB TEXT AND ICON
Accordion with a title and a plus icon to indicate there’s more content available if clicked. The subtitles are meant to be brief but descriptive enough to indicate what the reader can expect to learn more about by clicking. When it is opened, there are bullet points or multiple paragraphs, but they should be brief and descriptive.
Accordion Title
SECONDARY TITLE
- Lorem ipsum dolor sit amet, consectetur
- Lorem ipsum dolor sit amet, consectetur
- Lorem ipsum dolor sit amet, consectetur
VARIANT: BASIC WITH SUB TEXT AND IMAGE
Accordion with a title and an arrow icon to indicate there’s more content available if clicked. The subtitles are meant to be brief but descriptive enough to indicate what the reader can expect to learn more about by clicking. When it is opened, there are images, bullet points or multiple paragraphs, but they should be brief and descriptive.
Accordion Title
- Lorem ipsum dolor sit amet, consectetur
- Lorem ipsum dolor sit amet, consectetur
- Lorem ipsum dolor sit amet, consectetur
VARIANT: BASIC WITH SUB TEXT AND IMAGE AND PLUS ICON
Accordion with a title and a plus icon to indicate there’s more content available if clicked. The subtitles are meant to be brief but descriptive enough to indicate what the reader can expect to learn more about by clicking. When it is opened, there are images, bullet points or multiple paragraphs, but they should be brief and descriptive.
Accordion Title
SECONDARY TITLE
- Lorem ipsum dolor sit amet, consectetur
- Lorem ipsum dolor sit amet, consectetur
- Lorem ipsum dolor sit amet, consectetur
VARIANT: ACCORDION MULTIPLES WITH PLUS ICON
Accordion with a title and a plus icon to indicate there’s more content available if clicked. When fitting a lot of content on a small space, then a multiple accordion can help to give readers an overview of what the page is about and reduce how much they need to scroll.
Accordion Title
- Lorem ipsum dolor sit amet, consectetur
- Lorem ipsum dolor sit amet, consectetur
- Lorem ipsum dolor sit amet, consectetur
Accordion Title
- Lorem ipsum dolor sit amet, consectetur
- Lorem ipsum dolor sit amet, consectetur
- Lorem ipsum dolor sit amet, consectetur
VARIANT: ACCORDION MULTIPLES WITH SUB TEXT AND PLUS ICON
Accordion with a title and an arrow icon to indicate there’s more content available if clicked. When fitting a lot of content on a small space, then a multiple accordion can help to give readers an overview of what the page is about and reduce how much they need to scroll. Also, having a subtitle it would work as a preview of the inner content.
Accordion Title
SECONDARY TITLE
- Lorem ipsum dolor sit amet, consectetur
- Lorem ipsum dolor sit amet, consectetur
- Lorem ipsum dolor sit amet, consectetur
Accordion Title
SECONDARY TITLE
- Lorem ipsum dolor sit amet, consectetur
- Lorem ipsum dolor sit amet, consectetur
- Lorem ipsum dolor sit amet, consectetur
VARIANT: ACCORDION MULTIPLES WITH ARROW
Accordion with a title and an arrow icon to indicate there’s more content available if clicked. When fitting a lot of content on a small space, then a multiple accordion can help to give readers an overview of what the page is about and reduce how much they need to scroll.
Accordion Title
- Lorem ipsum dolor sit amet, consectetur
- Lorem ipsum dolor sit amet, consectetur
- Lorem ipsum dolor sit amet, consectetur
Accordion Title
- Lorem ipsum dolor sit amet, consectetur
- Lorem ipsum dolor sit amet, consectetur
- Lorem ipsum dolor sit amet, consectetur
VARIANT: ACCORDION MULTIPLES WITH SUB TEXT AND ARROW
Accordion with a title, subtitle and an arrow icon to indicate there’s more content available if clicked. When fitting a lot of content on a small space, then a multiple accordion can help to give readers an overview of what the page is about and reduce how much they need to scroll. Also, having a subtitle it would work as a preview of the inner content.
Accordion Title
SECONDARY TITLE
- Lorem ipsum dolor sit amet, consectetur
- Lorem ipsum dolor sit amet, consectetur
- Lorem ipsum dolor sit amet, consectetur
Accordion Title
SECONDARY TITLE
- Lorem ipsum dolor sit amet, consectetur
- Lorem ipsum dolor sit amet, consectetur
- Lorem ipsum dolor sit amet, consectetur