Accordion

Introduction

An accordion expands to reveal more relevant information if a user is interested in the topic. An accordion takes up less vertical space and as such is a possible solution when pages must have a lot of content.

When to use

Use this component when a page has a lot of information. Accordions make content easily scannable and only reveals information to a user when they decide they want to see more about the topic.

A primary use case for accordions across both sites is for frequently asked questions.

Component properties

There are no specific component properties at this time.

Frame(s)

The accordion is available for use in the following frames:

  • One column frame
  • Two column frames:
    • 6-6
    • 8 side of 8-4 / 4-8
    • 9 side of 3-9 / 9-3
    • 7 side of 7-5 / 5/7

Sitecore field(s)

The accordion component consists of two parts:

(1) Accordion listing:

  • Title - Uses an H2 (optional)
    • Single Line Text Field
    • Limit text to one line (approx. 25 characters or less)
  • Accordion item(s) (required)
    • A selectable list of items

(2) Accordion item(s):

  • Heading – span (16 px font size)
    • Multi-line text field and cannot contain formatted text,
    • This is the “question” field for the accordion item
  • Description
    • Rich text field
    • This is the “answer” field for the accordion item

Required field(s)

Both the heading and description are required for the accordion to work successfully.

Additional information

You must first create the accordion item, and once complete, select it to show up in the accordion listing (the Accordion items field in the listing component).

Color and Link are deprecated and are not currently in use. They are slated for removal.

Image specs

No imagery is used on the accordion component.

Spacing

If using the title field, there is a standard of 46 pixels between the heading and the first question.

When you expand an accordion item, there is 16 pixels between the question and the answer.

The accordion collapse or expand icon is 36 x 36 pixels.

Content Variations

Default Accordion - original

Common questions from Unum brokers

Accordion with long answer (1st FAQ) - original

Commonly asked questions about Leave and Absence Management

Accordion with wrapping question - original

Commonly asked questions about Critical Illness Insurance