La Trobe Design System > DS-Home > Design System components > DS Accordion

DS Accordion

Component description

Accordions help users see only the content they need. Accordions expand and collapse sections of content.

Component field properties

  • Character count limits and recommendations per field
  • Mandatory and optional elements
  • Other notable display options.

Accordion title  
Mandatory field 
Character count: 40 characters including spaces 
Plain text – no HTML

Accordion content field  
Mandatory field 
WYSIWYG – includes HMTL styling e.g. links, headings, option to nest (embed) content and include a DS button group (2 buttons)

Display options  
One accordion content field can be set to open to display the accordion content on page load.

Guidelines for use

  • Use the DS Accordion to create a single accordion. Stack one on top of each other to make a set
  • Select the same heading level for each accordion. Make sure the heading level you choose follows the page heading hierarchy, e.g. Heading 2, Heading 3
  • Use a maximum of 10 accordions
  • You can reorder the accordion containers
  • Use accordions sparingly for key and succinctly written content – they shouldn’t be used as a design option to shorten the page content

Most suited for these page types

Standard content pages

Example(s) of use

Sample

At La Trobe, we know there’s more to being a good student than good marks.

Our Aspire program rewards you for your leadership, volunteering or community contributions.  Have you been part of an award like the Duke of Edinburgh; volunteered with an organisation like Lifesaving Vic, Relay for Life or Salvation Army; been in a leadership role like a sports team captain; or helped out your community in another way?

Tell us about it and you could get an early offer to La Trobe University ahead of the general round offers. You could also win a scholarship, receive extra study support to ace your Year 12 exams and make like-minded friends ahead of your first class.

Aspire is open to aspiring Year 12 and non-Year 12 undergraduate students.

Button 1 Button 2

It’s difficult to say exactly how many students will be admitted through the Aspire program.

The community engagement component makes up a large part of the selection criteria, and the number of students admitted through Aspire will depend entirely on the strength of their submissions.

It’s difficult to say exactly how many students will be admitted through the Aspire program.

The community engagement component makes up a large part of the selection criteria, and the number of students admitted through Aspire will depend entirely on the strength of their submissions.

Training module