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

DS Tabs

Component description

DS Tabs help break up and organise content into meaningful sections and categories. Each tab label describes its own content and helps signpost content for the user.

Component field properties

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

Tab to open on page load
Recommend leaving defaulted to ‘tab1’.

[Tab 1] Tab 1 – label
Mandatory field
Character count: 40 characters including spaces
Plain text – no HTML

[Tab 1] Tab 1 – content
Mandatory field
Character count: 40 characters including spaces
Plain text – no HTML

[Tab 1] Tab 1 – nested content
Choice between entering content or nesting content

Repeat for Tab 2 (and Tab 3 if needed)

Display options

  • Component supports a maximum of three tabs.

Guidelines for use

  • Ensure tab titles are concise and use one to two words maximum.
  • Keep in mind that at mobile widths, the character length of a title will impact the experience.
  • Icons are not permitted in tab labels.
  • Ensure the Tab titles clearly describe the user function or content and are written in plain language.
  • Arrange tabs in an order that makes sense for your users.
  • You can either enter content into the WYSIWYG field OR you can nest content. If you nest content (e.g. Event listings) this will replace the WYSIWYG content.
  • Do not nest large amounts or pages within tabs.

Most suited for these page types

  • Level two landing pages
  • Content pages

Example(s) of use

Sample

First

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate laboriosam libero quis maiores hic explicabo distinctio nesciunt alias! Distinctio ratione eligendi delectus natus accusamus iste laborum omnis qui eius quas.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate laboriosam libero quis maiores hic explicabo distinctio nesciunt alias! Distinctio ratione eligendi delectus natus accusamus iste laborum omnis qui eius quas.

Training module